Melhorando a legibilidade de imagens no blog

Escrever para um blog é uma atividade um tanto pessoal, e cada um faz do seu jeito. Tem gente que senta e 5min depois tem uma página de texto que já pode publicar, e pronto. Tem gente que senta, e 2h depois chega no mesmo lugar que o primeiro, depois de pesquisar, revisar, reescrever, ilustrar e sabe-se lá mais o quê. Eu me encaixo nesse segundo grupo.

Como eu tendo a escrever conteúdos mais densos, muitas vezes me vejo obrigado a ilustrá-los, e quase sempre com algo específico, não aquelas imagens de bancos de imagem. São gráficos, prints de tela, coisas do tipo, que meu leitor eventualmente vai ter que olhar com atenção e calma. Para isso, eu imagino que quanto maior for a imagem, melhor pra o leitor. Mas você já deve saber que incluir imagens grandes no blog, além de pesá-lo, costuma afetar a apresentação também. Imagens grandes em geral ficam feias no texto.

Por isso, uma solução bem prática e eficiente é incluir uma imagem pequena, com uma insinuação do conteúdo, apenas o suficiente para que o leitor queira clicar em cima, e ao fazê-lo, abrir uma janelinha sobre o site com a versão detalhada da imagem. É possível fazer isso nativamente no WordPress, mas o resultado é tosco, porque a imagem grande abre numa nova aba ou janela (quando não por cima da página mesmo), quebrando a leitura e forçando o usuário a voltar.

Introduzindo a LightBox

LightBox é um nome genérico para um conceito já disseminado de “janela virtual”, isto é, uma solução JavaScript que simula uma nova janela, sem contudo sair da janela atual. Há centenas e centenas de implementações diferentes, o que se traduz em uma infinidade de plugins disponíveis para o WordPress. Escolher a solução certa não é exatamente uma tarefa fácil, mesmo porque as LightBoxes podem ser usadas em outras soluções, como galerias de fotos e vídeos e mesmo algum tipo mais avançado de interface e conteúdo.

Não obstante, para meu argumento aqui — imagens no post que abrem versões maiores — a solução passa pela praticidade, mais que pela versatilidade. Qualquer solução LightBox atenderia, mas as mais práticas são aquelas que lidam automaticamente com o tipo de uso que eu sugiro, afetando os outros o mínimo possível.

Não encontrei um plugin perfeito pra isso ainda, mas encontrei um que chega perto: o Simple Lightbox.

Plugin de Lightbox para WordPress: Simple Lightbox

A implementação desse plugin é um tanto mais complexa do que eu esperava, mas sua configuração e uso são bem simples e direto. Uma tela de configuração permite escolher onde a LightBox pode ser utilizada (ex: páginas, posts, capa do site, etc) e qual dos dois temas (Claro e Escuro) se deseja usar. Feito isso, onde houver uma imagem com um link para outra imagem, a Lightbox vai estar disponível.

Entenda melhor como isso funciona: No Editor do WordPress, você pode inserir uma mídia, e na configuração dessa mídia inserida você tem algumas opções. Dentre elas está o Link da Imagem, ou para onde ela deve apontar. Em geral utiliza-se Nenhum, mas podemos usar Arquivo de Mídia para favorecer esse uso da LightBox. Dessa forma o WordPress irá trabalhar 2 imagens, a original (ou versão grande) e uma miniatura, que aparece no post em si. Ao clicar nela, a versão grande aparece numa janela virtual. Você pode podia ver um exemplo nesse meu post anterior(caso eu não tenha mudado a solução desde então), mas eu mudei a solução desde então rsrs.

Problemas de Compatibilidade

Dependendo dos recursos que seu site ou blog utiliza, você pode encontrar problemas com essa solução (e com qualquer outra, na verdade). Temas em particular podem causar vários tipos de problema. Antes de experimentar, é bom verificar se seu tema já não fornece alguma solução nesse sentido, ou mesmo se algum plugin instalado não faz algo parecido. Em seguida, se possível, é bom verificar se existe alguma solução tipo LightBox em uso no seu site. Pode ser mais fácil aproveitar a existente do que introduzir uma nova, mesmo que para isso seja preciso alguma programação PHP (leia-se: criação de hooks).

Por exemplo, nesse meu blog eu quero quando este meu blog era WordPress, eu quis focar no meu conteúdo, e portanto escolhi um tema minimalista que funcione bem em mobile, inclusive. Não pretendia incluir nenhuma solução mirabolante de Slider, Galeria de Foto ou Paralax, não faz meu tipo. Por isso, a chance do Simple Lightbox interferir em algo no meu site era mínima. No seu caso, pode ser diferente.

Ainda assim, note que eu disse acima “não encontrei uma solução perfeita”, e isso porque o que eu realmente queria era ter a opção de ativar a Lightbox somente nas imagens que eu quiser, algo como uma opção extra no seletor de destinos da imagem (Nenhum, Arquivo de Mídia, URL externa, Imagem em Lightbox). Isso, eu não encontrei em nenhum lugar. O mais próximo que cheguei foi nesse plugin de configuração mínima e resultado satisfatório.