A publicação de imagens dentro dos artigos de um site acrescenta valor ao conteúdo transmitindo muitas informações e descritivos de forma prática. Através de imagens é possível aprimorar a explicação de um texto ou apenas ilustrá-lo de modo a compor mais agradavelmente o design do site e estimular a leitura desse artigo. O WordPress possui um ótimo recurso de Galeria, onde os arquivos de imagem enviados para determinado post ou página ficam armazenados e podem ser exibidos em tela, todos de uma única vez.

A galeria também possui suas próprias formatações e opções, no entanto, alguns tópicos podem ser otimizados em sua aplicação como o modo que as imagens são linkadas, código fonte de estilos misturado com HTML e modelo de exibição que serão tratados nesse artigo.

Veja abaixo algumas boas aplicações do uso das galerias de imagens no WordPress:

01 –

02 –

03 –

04 –

05 –

06 –

07 –

08 –

09 –

Usando a galeria

Ao editar um artigo através do WordPress, logo acima da caixa de edição na guia Upload/Inserir clique sobre o ícone de imagens e faça o upload dos arquivos que deverão compor sua galeria. Depois de ter enviado os arquivos, edite suas opções clicando sobre o link ‘Mostrar’ ao lado de cada miniatura e ao final das alterações, confirme-as clicando sobre ‘Salvar todas as mudanças’.

Note que na aba Galeria, logo abaixo da lista dos arquivos inseridos, surgiu uma nova guia com as opções para configuração da galeria. Formate sua galeria e clique sobre o botão Inserir Galeria. Caso visualize seus artigos através do editor HTML poderá conferir o shortcode [ gallery ] – seguido ou não de parâmetros, dependendo de sua formatação – inserido dentro do conteúdo; ele será responsável por exibir no referido espaço as imagens da galeria.

Caso realize sua edição no modo Visual, aparecerá uma área demarcada simbolizando o espaço que a galeria irá assumir, clique sobre ela para abrir os botões para editar e/ou excluir a galeria.

Código-fonte e estilização

Visualize o resultado da implementação da galeria em seu site e perceba que algumas formatações são impostas pelo WordPress. Dependendo da versão do WordPress em uso, consultando o código fonte, você poderá conferir o seguinte trecho de formatações de estilo inseridos a sua página:

<style type='text/css'>
    #gallery-1 {
        margin: auto;
    }
    #gallery-1 .gallery-item {
        float: left;
        margin-top: 10px;
        text-align: center;
        width: 20%;
    }
    #gallery-1 img {
        border: 2px solid #cfcfcf;
    }
    #gallery-1 .gallery-caption {
        margin-left: 0;
    }
</style>

Nas versões mais recentes essa prática foi abolida por padrão. Porém, caso encontre esse código (ou algum outro semelhante) inserido pelo sistema com o objetivo de formatar a galeria você possui duas alternativas: Atualizar o WordPress ou (de modo temporário até conseguir atualizar o sistema sem causar problemas devidos aos plugins e/ou temas ativos) utilizar o plugin Gallery Shortcode Style to Head.

O plugin possibilita a edição do estilo ao acessar a página Configurações > Mídia do painel e envia as marcações de dentro do corpo do html ‘body’ para seção de cabeçalho ‘head’. Através da mesma página é possível optar por não exibir o css, permitindo adotá-lo dentro do style.css ou outro arquivo CSS do tema.

Destino dos links

Ao editar as opções da galeria você definiu o link das miniaturas para a página de anexos ou às próprias imagens. É possível que seu tema não possua uma página de anexos responsáveis por exibir as imagens como deveria, nesse caso ao optar pela utilização do link direto para as imagens o visitante acaba deixando de visualizar seu site e a experiência dele pode não ser das melhores.

Para solucionar esse problema uma prática muito utilizada é a exibição de box com as imagens ampliadas. Instale o plugin jQuery Lightbox For Native Galleries Settings e veja o resultado diretamente em sua galeria publicada, sem realizar nenhuma alteração em código ou formatação da galeria.

Indepentemente de ter escolhido os links para anexos ou imagens o plugin funcionará corretamente, exibirá as imagens em tamanho completo juntamente com seus respectivos títulos e as opções de avançar e voltar entre os itens da galeria. Com o uso do plugin é possível atribuir a imagens soltas (fora de galerias) a exibição do ColorBox definido para o link que conterá a imagem a classe ‘lightbox’:

<a href="..." class="lightbox"><img src="..." alt="..." /></a>

Através da página de opção do plugin inserida no menu ‘Configurações’ você pode optar por um estilo que melhor se adeque ao design do seu blog.

Galeria em formato de slides

Por padrão, a exibição das imagens de uma galeria é feita lado a lado, dividida pelo número de colunas informado nas opções da mesma. Com a utilização do Photo Galleria as galerias serão transformadas de modo automático em um slideshow. A página de opções do plugin, disponível no menu Configurações do painel, possui formatação de design, dimensões, efeitos e também um guia rápido de consulta para eventuais dúvidas de sua utilização.

Essas são algumas sugestões de como aprimorar seu tema com as galerias. Você utiliza algum outro plugin para realização dessas tarefas? Deixe sua opinião e colaboração nos comentários desse post.

Abraço!