O ThimThumb é uma excelente ferramenta para gerar miniaturas/thumbnails. No artigo ‘Gere thumbnails (miniaturas) automaticamente no WordPress’ mostrei como instalar e usar esta ferramenta, agora mostro como usar custom fields (campos personalizados) ao invés de um link estático.

Como fazer

Para usar um link de imagem vindo de um custom field, basta usar o seguinte código antes do código do timthumb (que deve estar dentro do laço do post):

<?php
$key='post-img'; // substitua o post-img pelo nome do seu custom field
$link-post-img = get_post_meta($post->ID, $key, true);
?>

No código acima estamos considerando que o nome do custom field é post-img. Pode-se alterar este nome se quiser.

No código do timthumb se deve alterar o lugar do link (logo após “src”) para:

<?php echo $link-post-img; ?>

O código do timthumb ficará assim:

<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $link-post-img; ?>&w=322&h=206&zc=1">

Para usar o código acima, se deve alterar o caminho de instalação do script (se necessário) e as informações das dimensões do thumbnail que será gerado.

Conclusão

A grande vantagem no uso de custom fields em conjunto com o timthumb é que possibilitamos que haja uma miniatura/thumbnails diferente para cada artigo/post (o que convenhamos, é indispensável).

Ainda temos o inconveniente de o usuário poder se esquecer de colocar o link da imagem no custom field, mas este problema será sanado com um futuro artigo, onde mostrarei como colocar o link de uma imagem no custom field de forma automática.

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.