Há algumas semanas, experimentei usar Cloudinary no comércio eletrônico porque as imagens dinâmicas são uma grande parte das necessidades do comércio eletrônico.
Os sites com muita mídia geralmente empregam softwares de manipulação de imagens potentes e caros para que possam criar imagens sob demanda. Mal sabem eles que um serviço como o Cloudinary pode fazer o que o serviço deles faz e muito mais, incluindo entrega otimizada, armazenamento em nuvem etc. A manipulação de imagens por meio de código me interessa muito porque não sou designer e prefiro não usar o PhotoShop, além disso, a manipulação automatizada de imagens é um uso muito melhor do tempo de todos.
Vamos dar uma olhada em como podemos criar imagens personalizadas e customizadas com a API do Cloudinary!
Por que personalizar?
Os casos de uso para personalização e customização de imagens são imensos, mas aqui estão alguns:
- Teste A/B – Nós mostramos conteúdo diferente aos usuários de forma programática. Por que não estender isso às imagens?
- Conversão – Os clientes em potencial podem ser mais persuadidos por uma imagem personalizada do que por uma imagem genérica do tipo “seu nome aqui”
- Conteúdo gerado pelo usuário – Os usuários podem carregar suas próprias imagens ou usar seu próprio texto para gerar um produto personalizado
- Manutenção – O senhor pode aliviar sua carga de manutenção se ela puder ser delegada à automação
- Compartilhamento – O senhor pode criar imagens personalizadas de compartilhamento social
Esses são apenas alguns motivos importantes. Vamos ver como podemos criar imagens personalizadas com a incrível API do Cloudinary!
Sobreposição de imagens
Ocasionalmente, penso em criar mercadorias para o David Walsh Blog; nada fora do comum, talvez uma camiseta ou caneca de café do DWB. Não quero usar o PhotoShop para criar essas imagens, mas quero que meus mockups de camisetas sejam uma imagem mesclada para que eu possa compartilhá-los ou ajustá-los com mais facilidade sem precisar de uma interface de usuário. Vamos começar criando uma camiseta simples do David Walsh Blog!
A primeira etapa é fazer o upload das imagens necessárias: algumas imagens de camisetas de cores diferentes e o logotipo da DWB. Depois de alguns minutos lendo o documentação sobre transformação de imagensConsegui criar as imagens da camiseta DWB em preto e branco com apenas um URL:
<!-- White shirt --> <img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_10,y_0/shirt-white.jpg"> <!-- Black shirt --> <img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_0,y_0/shirt-black.jpg">
 |
 |
O l_logo refere-se ao logo-que carreguei no Cloudinary (l_ prefixo significa que um nome de imagem o seguirá), o w_80 define a largura do logotipo como 80, o o_90 refere-se ao nível de opacidade, e o nome da imagem final é a imagem na “parte inferior” da pilha de sobreposições (a imagem sobre a qual as sobreposições serão feitas, para explicar de outra forma). Vamos criar uma caneca DWB:
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_160,o_90,x_-50,y_0/mug.jpg">
Se preferir usar o método Node.js, o senhor pode fazer o seguinte:
cloudinary.image("mug.jpg", {
overlay: "logo",
width: 160,
opacity: 90,
x:-50
});
Confira o documentação sobre transformação de imagens para saber mais sobre o posicionamento de sobreposições e outras pequenas modificações!
Sobreposição de texto
Sobrepor imagens em cima de outras imagens é um truque difícil, mas ainda mais difícil é o texto. E também exige mais manutenção… a menos que o senhor possa automatizá-lo facilmente. O texto nas imagens pode representar o preço, o objetivo ou o conteúdo da imagem inteira, uma notificação de vendas ou de liquidação, o nome de uma categoria ou praticamente qualquer outra coisa. O Cloudinary facilita a geração de texto em imagens: o senhor pode gerar imagens com texto com base na modificação do URL!
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,w_80,o_90,x_0,y_0/w_320,h_400,c_fill,bo_1px_solid_gray/l_white-bar,w_300,h_90,g_south,y_20/l_text:Helvetica_36:Shirts >,g_south,y_48/shirt-black.jpg">
Com base na imagem da camiseta DWB que criamos, o código acima cria uma imagem de conversão de “categoria” com texto indicando a categoria do produto em questão. Essa imagem de categoria sobrepõe uma imagem de bloco branco e adicionamos dinamicamente o texto com o nome da fonte, o tamanho da fonte e as informações de posicionamento desejados.
BÔNUS! Conversa sobre sobreposição
Como ideia para divulgar meu site, pensei em criar uma ferramenta divertida que permitisse às pessoas carregar uma foto e sobrepor o rosto da DWB ao rosto delas. Descartei a ideia porque algumas pessoas poderiam compartilhar as imagens, mas o retorno sobre o investimento provavelmente não seria grande. No entanto, eu costumava colocar adesivos da DWB em rostos de fotos de estoque quando andava pelo centro de Madison. Por algum motivo, gosto de reenquadrar imagens. Eu me diverti um pouco com a API do Cloudinary para criar esse efeito nas imagens:
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/l_logo,g_faces,w_1.1,fl_region_relative/oceans-eleven.jpg">
O g_faces (gravity: faces) nesse URL direciona o Cloudinary a sobrepor meu logotipo em cada rosto detectado, o que funciona muito bem no caso dessa imagem do Ocean’s Eleven:
O Cloudinary oferece aos desenvolvedores a capacidade de criar imagens personalizadas e de qualidade em tempo real. É um feito incrível e o que é ainda mais incrível é que essa é apenas uma pequena parte da oferta do Cloudinary, que inclui otimização de imagens, transformações poderosase imagens responsivas com dicas para clientes. As imagens podem ser um enorme pesadelo de manutenção, mas quando o Cloudinary permite que o senhor as programe, o pesadelo desaparece!