Além de deixar o site com uma estética mais bonita, os thumbnails (miniaturas) aumentam a taxa de cliques, pois uma imagem é mais chamativa ao leitor.

Uma imagem vale mais que mil palavras.

Existem plugins que podem gerar automaticamente miniaturas, mas nenhuma é mais completa que o script ThimThumb.

Ele não depende das configurações de mídia do WordPress, o que é perfeito para ser implementado junto a temas, pois não depende de configurações feitas pelo usuário. O Scarllet é um exemplo de tema que se utiliza deste script.

Esse script redimensiona a imagem sem distorce-la, grava as imagens em uma pasta do próprio tema, e é fácil de instalar e usar.

Como fazer

Instalação

Faça o download do script TimThumb e salve dentro da pasta do seu tema. Para uma maior organização, você pode colocar esse script em uma subpasta chamada “scripts”, ficando assim: \wp-content\themes\meutema\scripts\timthumb.php .

No local onde você salvou o script crie uma nova pasta com o nome de “cache”. Mude o chmod (atributos do arquivo) para 777, garantindo assim que seja possível gravar as imagens nesta pasta.

Com isso o TimThumb já pode ser utilizado.

Utilização

Você pode utilizar em qualquer lugar do seu tema, bastará usar o seguinte código (realizando as devidas modificações):

<img src="/scripts/timthumb.php?src=http://meusite.com/files/2009/12/exemplo.jpg&w=322&h=206&zc=1">

Entendendo o código:

<?php bloginfo(‘template_directory’); ?>/scripts/timthumb.php

Aqui é o caminho onde está instalado o script. Você deve altera-lo se por acaso a instalação tenha sido feito em outro lugar.

http://meusite.com/files/2009/12/exemplo.jpg

Aqui é o link da imagem original que será redimensionada. Ao invés de usar um link estático, você pode usar um custom field (campo personalizado) dentro do laço do post (veja o post: Usando Custom Fields no ThimThumb).

w=322&h=206

Aqui é o tamanho do thumbnail gerado. Ele está em pixels, o “w” representa a largura, e o “h” representa a altura. Modifique para o tamanho do thumbnail desejado.

zc=1

Este é o zoom crop, que indica se a imagem será dado zoom para realizar o corte. Deixando com o valor “1” o zoom crop está ativado e será feito o zoom, deixando a imagem ser distorção. Se deixado o valor em “0” o zoom crop está desativado e não será feito o zoom, o que pode gerar distorção na imagem.

Veja o exemplo para entender melhor.

Conclusão

Os thumbnails estão sendo usados amplamente nos mais variados tipos de sites, a exemplo temos os portais de noticias como R7 e Globo.com.

Mesmo se o seu site seguir a dinâmica de blog (vários artigos completos em uma mesma página), os thumbnails podem ser usados, por exemplo, para ilustrar os arquivo de categorias ou os resultados de pesquisa, como usado no Hongkiat.

As utilizações são inúmeras, sendo o único limitador a criatividade de quem for utilizar este recurso. Então não se limite ao utilizar os thumbnails.

Deixe seu Comentário

Os campos marcados com asterísco (*) são obrigatórios. O seu e-mail não será publicado.

Nome *

Email *

Seu site, blog, twitter...

Comentário *

ENVIAR