Estilos de imagem: Criando múltiplas versões das suas imagens no Drupal 7

Imagine desenvolver um portal de notícias no qual o mesmo conteúdo pode ser apresentado de várias formas diferentes e em lugares diferentes: destaque na página principal ou da categoria, visualização na listagem de notícias, visualização completa etc. Ele também pode conter imagens que precisam se adaptar às diferentes versões do conteúdo. Por exemplo, a imagem que aparece na visualização completa da notícia não pode ter as mesmas dimensões da visualização em destaque.

Num sistema "menos inteligente", isso poderia ser solucionado possibilitando que o editor envie uma versão de imagem para cada visualização. Mas isso poderia representar um trabalho enorme, especialmente considerando um grande volume de conteúdos. Felizmente o Drupal não é um desses sistemas ;)

Entendendo os estilos de imagem

O estilo de imagem é um recurso provido pelo módulo Image (no núcleo do Drupal 7) que permite criar várias versões de uma mesma imagem, aplicando efeitos a cada uma delas (redimensionar, cortar, dessaturar etc), sem afetar a imagem originalmente enviada. Essas versões podem ser utilizadas em modos de visualização de conteúdos ou por outros módulos contribuídos (ex: Colorbox, Nivo Slider, jCarosel e outros). No Drupal 6, este mesmo recurso só era possível utilizando o módulo ImageCache.

Criando e editando estilos de imagem

O Drupal 7 disponibiliza, por padrão, três estilos de imagem: "miniatura", "médio" e "grande" ('thumbnail,' 'medium' e 'large'). Quando você mudar a configuração de um desses, o módulo atualizará automaticamente todas as imagens criadas anteriormente. Cada estilo de imagem deve ter um nome, o qual vai ser usado na URL das imagens geradas.

Para criar ou alterar estilos de imagem:

  1. Navegue em Administração > Configuração > Mídia > Estilos de imagens.
  2. Adicionar ou selecionar um estilo para editar suas configurações.
  3. Ao configurar os estilos, você pode adicionar efeitos: escalar, redimensionar, girar, dessaturar etc. Por exemplo, ao combinar efeitos como cortar, escalar e dessaturar, você estará criando imagens quadradas em escala de cinza.
  4. Salve as configurações.

Usando um estilo de imagem criado

Você pode aplicar esses estilos, por exemplo, às visualizações de seu conteúdo. Por padrão, cada tipo de conteúdo tem 2 modos de visualização: "Padrão" ou "Chamada". Você pode aplicar um estilo diferente para cada uma dessas visualizações.

Para aplicar um estilo:

  1. Navegue até Administração > Estrutura > Tipos de conteúdo > Gerenciar exibição.
  2. Selecione a visualização desejada (ex: "Padrão" ou "Chamada") através dos links abaixo das abas principais.
  3. Clique no botão com um ícone de engrenagem para escolher um estilo de imagem.
  4. Salve as configurações.
  5. Verifique o conteúdo que contém o estilo imagem em questão para ver seus novos estilos em ação.

Como falei na primeira parte do artigo, existem diversas formas de utilizar um estilo de imagem. O exemplo acima apresenta a mais básica delas, mas já dá pra perceber o poder deste incrível recurso que é nativo no Drupal 7.

Se curtiu este artigo, comente e compartilhe ;)