Leo Balter, Web Standards, jQuery e Wordpress

Uso de miniaturas do WordPress no iPhone

Muita gente utiliza thumbs de posts para mostrar uma imagem em lugar específico na apresentação de seu site. Muitas vezes utilizavam configurações com campos personalizados – custom fields – para obter urls das imagens. Isso era muito complicado. Vamos ver um método bem simples.

Pra começar é fácil, precisamos incluir no arquivo functions.php de nosso tema a seguinte chamada:

add_theme_support( 'post-thumbnails' );

A partir desse momento, quando ativamos nosso tema já vamos poder observar uma novidade na página de edição de artigos do WordPress, uma caixa com o nome “Miniatura do Post”.

Tela de inclusão de miniatura no artigo

Quando clicamos em “Configurar miniatura” temos uma tela idêntica à de upload de imagens, suba um arquivo normalmente. Pronto, logo após subir a mesma, temos ao lado do botão “Inserir no Post” um link com a chamada: “Usar como miniatura”.

Note que algumas vezes esse link não aparece de primeira devido ao cache do browser. Se isso acontecer, mande gravar as alterações, abra novamente a tela de mídias do artigo e selecione a imagem que já foi enviada, assim o link deve aparecer, dessa vez.

Tela de Envio de Imagem para uso como Miniatura

Agora podemos buscar essa miniatura no nosso tema, dentro do loop do WordPress com um comando muito simples:

the_post_thumbnail();

Vamos incrementar

Supomos que você quer aplicar esse suporte a thumbnails apenas nas páginas de artigos (posts) e não em páginas comuns do WordPress (pages). Pra isso utilizamos parâmetros ao método add_theme_support:

add_theme_support( 'post-thumbnails', array( 'post') );

Logo depois podemos definir o tamanho padrão pra essa miniatura:

set_post_thumbnail_size( 100, 100, true );

Note que esse tamanho definido acima não tem relação ao tamanho padrão de imagem “Miniatura” da edição do post. Esse tamanho é apenas utilizado quando utilizamos o método the_post_thumbnail().

Os parâmetros declarados acima se referem respectivamente a: largura, altura e se queremos que a imagem seja redimensionada e cortada para o tamanho especificado. Se colocássemos false ali ou não utilizássemos um terceiro parâmetro a imagem viria no tamanho full e seria redimensionada apenas no browser. Isso geraria um provável atraso no carregamento, já que a imagem pré-cortada normalmente ficaria com tamanho menor.

Se não utilizarmos esse método para definir o tamanho da miniatura, os valores padrões seriam exatamente os da miniatura padrão definida nas mídias do WordPress.

Agora vamos definir novos tamanhos aos thumbnails:

add_image_size( 'destaque-thumbnail', 290, 200, true );
add_image_size( 'destaque-verySmall', 70, 70, true );

Note que aí defini 2 novos tamanhos que fazem o pré-corte da imagem quando ela é enviada. Podemos definir quantos tamanhos quisermos, claro que afeta relativamente o desempenho do servidor.

Para buscar esses tipos específicos em nosso tema o trabalho também é simples:

the_post_thumbnail('destaque-verySmall');

Da mesma forma podemos buscar o thumbnail nos padrões definidos no wordpress:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail('full');

Podemos também verificar se o artigo ou página tem uma miniatura definida, simples também:

if ( has_post_thumbnail() ) { the_post_thumbnail(); }

Podemos também buscar o Id da imagem utilizada como miniatura:

$miniatura_id = get_post_thumbnail_id();

Assim como apenas retornar a miniatura invés de passar ela diretamente pra tela:

$miniatura = get_the_post_thumbnail( $post->ID, 'thumbnail' );

No método acima – get_the_post_thumbnail – os parâmetros se referem a: id do post e o tamanho do thumbnail que queremos retornar.

O retorno do thumbnail

Normalmente quando utilizamos o método the_post_thumbnail ele já nos trás uma tag completa. Mas e se quisermos definir padrões específicos pra certos atributos dessa tag?

the_post_thumbnail(array(100,100), array('class' => 'alignleft thumbClass'));

Veja que o primeiro parâmetro do método, como vimos antes trata do tamanho do thumbnail, sendo que o segundo parâmetro é uma array onde a chave (key) é o nome do atributo a ser incluído e consequentemente temos o seu valor.

Recuperando imagens usadas com campos personalizados

E se já tivermos utilizado custom fields pra diversas imagens? Nativamente o WordPress não vai fazer muito por você, teria que configurar novamente thumbnails novamente pra cada artigo. Mesmo assim, pessoas já passaram por esse problema e já existem plugins para resolver esse tipo de problema.