WP: Thumbnails (+ crop) fora do WordPress

Tutorial Wordpress

Sei que muitos blogueiros não utilizam o sistema de thumbnails padrão do wordpress simplesmente por não saber utilizar, ou não fazem questão, ou não se adequam ao processo padrão, ou porque simplesmente não hospedam suas imagens em seu servidor pela falta de espaço. Há diversas maneiras de colocar thumbnails e o melhor modo que encontrei foi através de uma função de resgate de imagem do post juntamente com um script PHP que faz o recorte no tamanho desejado. É uma perfeita forma de fazer posts relacionados, resultados de busca, página de arquivos de categorias, tags, etc.

Dica: É importante ter noção que as imagens são pesadas e ocupam muito espaço no servidor depois de algum tempo, mas sempre é recomendado hospedar imagens dentro do servidor de seu próprio blog por medidas de segurança. Nunca sabemos como anda o servidor alheio. Por isso, garanta que em seu plano de hospedagem tenha bastante espaço (acima de 5GB de espaço está ótimo!). Só hospede fora quando realmente não há espaço em seu servidor.


Exemplo: Utilizei este recurso de thumbnail + crop nos meus posts relacionados


1) Resgatando uma imagem do post como thumbnail

Adicione em function.php do seu tema:

// resgatando imagem do post - madlyluv.com
function imagem_do_post() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	return $first_img;
}

Através de first_img ele captará a primeira imagem do post. Pode ser imagem tanto hospedada em servidor próprio ou externo, como o imgur.com

2) Fazendo o recorte (crop) na imagem utilizando TimThumb

O TimThumb – PHP Image Resizer é uma ótima solução para thumbnails. Ele é um script PHP que, através da URL de uma imagem, faz o recorte na altura e largura que você desejar. Junto com a função que ensinei acima, vamos poder personalizar seus thumbnails!

Primeiramente, faça o download do código TimThumb e salve-o na pasta raiz de seu tema. Em seguida, em seu código de posts relacionados, resultado de busca, arquivos, etc, você colocará o código abaixo onde deve chamar a imagem:

<?php if (imagem_do_post()) { ?>
	<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo imagem_do_post(); ?>&h=300&w=300">
<?php } else {?>
	<img src="http://marca-blog.jpg">
<?php }?>

Este código acima adicionará uma condição que, se há imagem_do_post então ele pegará a primeira imagem colocada em seu post e o interpretará como thumbnail, e, caso não tenha imagem alguma, aparecerá uma imagem específica no lugar, adicionada através de else. Para este último caso, você deverá substituir http://marca-blog.jpg pela url da imagem da marca do seu blog ou print dele para não ficar uma imagem em branco.

A terminação h=300&w=300 determina que a altura e largura é um quadrado de 300x300px. Você pode colocar nas dimensões que quiser. Caso queira mais opções de recorte de imagem, basta entrar na página do script que lá há toda a documentação.

Quer saber como ele fica com os thumbnails padrão do wordpress? Veja abaixo.

O código sofrerá poucas mudanças. Ao invés de utilizar a função imagem_do_post, irá pegar a URL direta do thumbnail que você cadastrou lá no seu post quando estava o escrevendo. A url do thumbnail será pega pelo <?=$url?> e aparecendo em seu modo "full", ou seja, seu tamanho original, determinado por este código PHP inserido logo acima da imagem:

<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) ?>

Veja só como ficará o resultado:

<?php if (imagem_do_post()) { ?>
	<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) ?>
	<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?=$url?>&h=300&w=300">
<?php } else {?>
	<img src="http://marca-blog.jpg">
<?php }?>

A partir do tamanho original do thumbnail o TimThumb irá redimensionaá-lo para o tamanho que você quiser. ;)


Observações importantes sobre o TimThumb

1) Nota-se que em seu tema surgirá uma pasta chamada /cache na pasta de seu tema. É a pasta do histórico de imagens recortadas pelo script. Não delete-a.

Atualização: janeiro de 2015

Pode acontecer de sua hospedagem não suportar o TimThumb, fazendo seu blog ficar muito lento ou até mesmo nem abrindo para alguns leitores por requerir sempre informações de servidor. Isso acontece devido à uma falha de segurança deste script. O TimThumb era uma alternativa ótima de personalização, mas há pouco tempo fiz outro tutorial que pode substitui-lo.

Veja também...

Dica de série: Anne with an E, da Netflix
King's Cross + Tour completo pelos Studios de Harry Potter
Almoço no Las Nenas Café Bistrô (Goiânia)

4 Comentário(s)

(4 pelo blog e pelo facebook)
  • Stephanie
    Visitar blog
    29 . 10 . 2014

    Eu queria usar esta função para mostrar os últimos post no header, só que eu queria o titulo do post aparece no centro igual esta neste exemplo.
    Este tutorial já faz isso? Ou ah não sei, eu já tentei vaaarios tutorias e plugins e não consigo deixar os titulos em cima qnd descanso o mouse :'(

    Responder

    • Aninha
      Visitar blog
      29 . 10 . 2014

      @Stephanie, isso é puramente HTML/CSS. Não requer javascript ou função do wordpress. O que pode requerer função é o motrar os ultimos posts e neles os thumbnails (como este faz). Mas a forma de demonstrar o titulo do post no meio da imagem é só código puro ;)

      Responder

  • Maike
    Visitar blog
    04 . 09 . 2014

    Ola,

    ótima função! Gostaria de saber, se eu consigo pegar no single.php essa imagem? Tipo, no index, eu deixei ela pequena, como thumbnail normal, porém, no single, eu queria que essa imagem aparecesse antes do título, pra isso eu precisava "capturar" esta image,, certo? Poderia me dizer se com essa mesma função eu consigo?

    Nossa, muito obrigado ;)

    Responder