Miniatura (thumbnail) do Post – Como implementar?

Muitos temas WordPress, especialmente os temas ao estílo magazine, usam imagens para representar cada post. Até agora, para o conseguir, era necessário utilizar plugins, ou até mesmo alguma articulação na combinação de Campos Personalizados e código no próprio tema.

Com o WordPress 2.9, no entanto, foi introduzida uma nova funcionalidade que vem facilitar este processo: Miniatura (Thumbnail) do Post.

Quando activada pelo autor do tema, é introduzida uma nova secção de Miniatura do Post no interface de edição de posts ou páginas, onde se pode introduzir uma imagem para usar como miniatura (e não só), e que depois será chamada usando uma simples tag de template.

Activação

Em primeiro lugar é necessário declarar o suporte a esta funcionalidade no ficheiro functions.php do tema. Este passo vai activar o interface no painel de administração do WordPress.

add_theme_support( 'post-thumbnails' );

Desta forma activamos o suporte tanto para posts como páginas,  sendo que, no caso de querer adicionar para apenas um destes, poderá fazê-lo da seguinte forma (escolha uma das linhas, dependendo do que pretender adicionar):

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Adicionar para Posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Adicionar para Páginas

Dimensões

De seguida há que especificar as dimensões das nossas miniaturas bem como o método de corte (crop).

Existem dois métodos de corte das imagens: box-resizing (redimensionamento proporcional) e hard-cropping (corte à dimensão).

O box-resizing faz um redimensionamento proporcional à imagem até esta caber na “caixa” que definimos com a altura e largura. Por exemplo, uma imagem com 100×50 pixels numa “caixa” de 50×50 seria redimensionada para 50×25, matendo assim a proporção da imagem sem haver qualquer tipo de corte ou distorção. O benefício deste método é que a imagem aparece completa. Por outro lado, as dimensões que definimos para a nossa “caixa” de miniatura não são cumpridas à risca. Por vezes é limitada pela largura, outras pela altura.

set_post_thumbnail_size( 50, 50 ); // 50 pixeis de largura por 50 pixeis de altura, no modo box-resizing.

A outra opção é o hard-cropping. Neste modo a imagem é cortada para se acomodar exactamente às dimensões que definimos para a nossa miniatura. O benefício é temos exactamente aquilo que pretendemos a nível de dimensões, mas a imagem será cortada (quer dos lados como do topo e da parte de baixo) para caber nelas.

set_post_thumbnail_size( 50, 50, true ); // 50 pixeis de largura por 50 pixeis de altura, no modo hard-cropping

Funções no Tema

Agora podemos dar uso destas funções no nosso tema, que deverão ser usadas dentro do loop.

has_post_thumbnail() serve para testar se o post inclui uma miniatura escolhida manualmente (inserir dentro do loop):

<?php
if ( has_post_thumbnail() ) {
	// o post actual tem miniatura
} else {
	// o post actual não tem miniatura
}
?>

the_post_thumbnail() dá-nos a miniatura, se ela existir (inserir dentro do loop):

<?php the_post_thumbnail(); ?>

Estes são os passos básicos. Que tal algo mais avançado?

E se quisermos usar uma imagem de 50×50 pixeis no modo hard-cropped para a homepage, mas na página do post (single post) usarmos uma imagem limitada apenas por 400 pixeis de largura (com a altura ilimitada)? Estamos com sorte, pois é possível criarmos tamanhos personalizados adicionais! Use o seguinte código:

no functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // moniaturas normais para a homepage
add_image_size( 'single-post-thumbnail', 400, 9999 ); // imagem para página de post</code>

no home.php ou index.php, dependendo da estrutura do tema (inserir dentro do loop):

the_post_thumbnail();

no single.php (inserir dentro do loop):

the_post_thumbnail( 'single-post-thumbnail' );

Feito! Da mesma forma podemos adicionar mais tamanhos se for necessário, basta acrescentar mais linhas seguindo o seguinte parâmetro: add_image_size( $nome, $largura, $altura, {$switch_hard_crop} );, e no tema, para usar este novo tamanho, basta passar o $nome para a função the_post_thumbnail( $nome );

Se quiser que o tema seja compatível com versões anteriores do WordPress, é necessário usar a função function_exists() para evitar que as novas funções sejam chamadas nessas versões. Nos exemplos apresentados até agora omiti este código para manter o código o mais simples possível. Use o seguinte código no functions.php para incluir esta função:

if ( function_exists( 'add_theme_support' ) ) { // Adicionado no 2.9
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // moniaturas normais para a homepage
add_image_size( 'single-post-thumbnail', 400, 9999 ); // imagem para página de post
}

Notas Finais

Existe um senão nesta nova funcionalidade no WordPress 2.9 — apenas funciona em pleno para novas imagens introduzidas. Ainda não é possível redimensionar as imagens no momento em que as páginas são visualizadas (apesar de ser uma funcionalidade que está a ser considerada para futuras versões do WordPress). Isto significa que se introduzirmos novos tamanhos para miniaturas depois de já terem sido introduzidas miniaturas em posts anteriores, essas imagens antigas não serão redimensionadas para os novos tamanhos. Como solução temporária, somos salvos por um plugin, “Regenerate Thumbnails“, pelo engenhoso Viper007Bond, que redimensiona todas as imagens já inseridas no WordPress.

Miniatura do Post (Post Thumbails) — quem já usa esta nova funcionalidade do WordPress 2.9?

(Este post é uma adaptação traduzida do post original de Mark Jaquith, que me ajudou a implementar esta nova funcionalidade num projecto recentemente.)

22 opiniões sobre “Miniatura (thumbnail) do Post – Como implementar?

  1. Por acaso já comecei a utilizar as miniaturas para artigos em alguns dos últimos temas que fiz. No entanto, obrigado pelo artigo e pela descrição da função set_post_thumbnail_size que ainda não conhecia e que dá jeito.

    1. Hey Cláudio, ainda bem que foi útil este post!

      Realmente o add_image_size abre um mundo de possibilidades! Imagina, apenas com um passo – introduzir a miniatura do post – poderes ter uma miniatura na homepage, uma imagem maiorzinha numa zona de destaques e a imagem em tamanho grande no single post!

  2. Bom dia

    Pelo visto vc intende bastante do assunto, por isso vim pediar um help 😉
    Eu estou tentando colocar a miniatura ao lado do post e ainda não encontrei solução …
    Alguem pode ajudar?

  3. Olá

    Sou leigo neste assunto, mas confesso que já estou a 4 dias a procura da solução de como inserir as miniaturas em paginas magazine.

    Sigo a risca tudo o que dizem e continuo vendo “X” em lugar das imagens.

    Vamos a questão…

    O que sugeres para ativar o interface do “functions.php” do tema, poderias dar um exemplo completo, ou seja, como ele ficaria dentro do ‘php’ e em que parte lá dentro devo inserior?

    Pra ser sincero amigo, sei que tu entendes do que diz e é bastante quanto parece. Mas para mim já lá vão algumas horas de sono bem perdido.

    E o que mais frusta é que tudo se encontra na net a respeito, só funciona no exemplo deles.

    Peço a gentileza mais uma vez, procure enumerar alguma ordem do tipo passo-a-passo. Algo bem didático para um estúpido como eu… pois já começo a me sentir assim.

    Grato,

    Airton

  4. otima materia. parabens

    Mas acho que nao resolveu minha situaçao:

    Queria usar miniaturas para deixar a pagina mais leve. Porem as imagens utilziadas para miniatura sao as proprias “imagens originais” e minha pagina continuou pesada.

    … De qualquer forma, segui o que o post disse e as miniaturas realmente aparecem.

  5. Otimo post !

    Mas e se eu quiser, puxar a miniatura do post, se a miniatura nao existir puxar a primeira imagem do post, e se o post nao tiver imagem, coloca uma imagem padrao, caso ambas nao possua imagem?

  6. Eu gostaria de saber porque quando clico em “Definir imagem de destaque” e depois em “de uma URL” a imagem não fica como imagem de destaque? É como se me obrigasse a hospedar a imagem no meu site. Só assim me aparece a opção “Usar como imagem de destaque”. Então a minha duvida é como corrigir este suposto erro. Ou serei eu que ainda sou “aprendiz” nesta área?

  7. To com um problema, não sei se encaixa nesse artigo (que por sinal é excelente), porém vou ver se voce pode me ajudar, ao postar uma foto de tamanho 600×400 por exemplo, e ao clicar nela ela fica cortada, pois a medida pra aceitar é de 230x115px, gostaria de saber se é possível mudar essa medida de 230 para 640×480 px.. Grato – caso queira ver pra entender melhor cfpropaganda.com/promo/

  8. eu to fazendo tudo certinho mais nao consigo fazer a imagem ficar cortada. minha imagem original é 500×300, e eu quero miniatura 100×100, mais o modo de crop nao funciona. alguem pode me ajudar?

    if ( function_exists(‘add_theme_support’)):
    add_theme_support(‘post-thumbnails’);
    set_post_thumbnail_size (100, 100, true);
    endif;
    ?>

    assim esta o meu codigo em funcoes

  9. No meu código não está funcionando o crop.

    Quando chamo the_post_thumbnail( ‘destaque’ ); a imagem de 900×675 pixels é redimensionada para 286×215 pixels e ela deveria ficar com 600×215 pixels.

    Pode me ajudar?

  10. Amigo muito obrigado! eu estava tentando fazer um carroussel para meu portfólio para mostrar meus últimos trabalho na home e não consegui de forma alguma através deste seu post consegui em questão de segundos. Muito Obrigado. (My Love WORD PRESS!)

  11. Olá gostaria de aproveitar a oportunidade para tirar uma dúvida se for possível:

    a ultima imagem do carrossel esta subindo e tampando o botão de navegação o que pode esta acontecendo?

  12. Boa tarde!
    Não sei se cabe ao post. Mas como faço pra que ao compartilhar nas redes sociais (twitter, face, Whattsapp etc) a imagem fica de formato miniatura com o link?? Quando eu compartilho uma postagem do meu blog, aparece a imagem do site e não a imagem da postagem.

    Obrigado

Deixe um comentário