WP: Como ter tamanhos diferentes de thumbnails

Tutorial Wordpress

Ter diferentes tamanhos de thumbnails pode ser uma coisa complicada de se fazer no wordpress. E neste tutorial vou ajudar você a otimizar o seu trabalho, personalizando diversos tamanhos de thumbnails em seu wordpress, sem ter muita dor de cabeça. Por padrão, o WP costuma ter 4 tamanhos de imagens vinculadas ao post: o thumbnails (150x150px), o medium (300px de largura), large (640px de largura) e o tamanho full, que é o original. E o que faremos aqui é ir além destes tamanhos pre-definidos, utilizando uma função chamada de BFI Thumb.

O que é o BFI Thumb?

A algum tempo atrás eu fiz um tutorial de thumbnail (com ênfase em utilizar imagens hospedadas fora do wordpress) utilizando o TimThumb, um script php redimensionador de imagens para personalizar largura e altura, porém, em suas últimas versões começou a gerar algumas falhas de segurança em alguns servidores, abrindo portas para malwares. Devido a isto, ele passou a ser descontinuado por vários programadores. Desta forma, surgiu uma alternativa para esse antigo script php, o BFI Thumb, que recentemente passou a ser fortemente recomendado pelas empresas que possuem lojas de temas wordpress (o ThemeForest da Envato, por exemplo), por fazer praticamente as mesmas funções (e mais algumas além) e, principalmente, por ser um recurso seguro.

O BFI Thumb recebe a URL direta da imagem destacada do post junto com uma série de parâmetros, para depois retornar a imagem processada com o tamanho personalizado. Suas dimensões são feitas em tempo real e utiliza como base o editor de imagem do próprio WordPress para fazer o recorte. É um máximo, né?! Vamos aprender como que se faz.

Por que o BFI Thumb é tão bom?

O BFI Thumb é uma mão na roda para se utilizar o mesmo thumbnail em diferentes lugares no seu layout sem muito esforço. Você pode utilizar o mesmo thumbnail para sliders, posts relacionados, posts em destaque etc, e todas estas imagens irão respeitar os tamanhos que você definir.


1) Habilitando os thumbnails no wordpress

Antes de mais nada, é necessário habilitar o recurso de imagem destacada no seu wordpress. Primeiramente, verifique se o seu tema, ao editar ou criar um novo post, possui o seguinte item na coluna lateral:

Se em seus posts não possui esta opção, você precisará abrir o seu arquivo functions.php do tema e adicionar a seguinte linha de código:

add_theme_support( 'post-thumbnails' ); 

Pronto, agora seu wordpress está pronto para receber thumbnails. Vamos prosseguir.

2) Instalando o BFI Thumb no tema

Baixe .zip do BFI Thumb no site oficial, extraia o arquivo BFI_Thumb.php. Copie e cole-o na pasta raiz de seu tema wordpress. Em seguida, abra seu functions.php adicione o seguinte código:

require_once('BFI_Thumb.php');

A primeira linha, o require_once, irá chamar a "biblioteca" da função. O código após esta linha, definido como the_post_thumbnail irá atribuir os parâmetros de altura e largura do thumbnail para quando eu for adiciona-lo em meu tema per adicionar o tamanho que eu quiser.

2) Definindo o tamanho personalizado do thumbnail

Cole o código abaixo loop de seu tema onde você quer que apareça o thumbnail:

<?php if(has_post_thumbnail()){
	the_post_thumbnail(array( 250, 162, 'bfi_thumb' => true ));
} else {
  	echo '<img src="'.get_bloginfo('template_url').'/img/thumb.jpg">';
} ?>

Será o 'bfi_thumb'=>true que habilitará o crop da URL do thumbnail, enquanto os números 250 e 162 representam respectivamente a largura e altura que será cortada a imgem. Depois de }else{ você pode colocar a URL de uma imagem padrão ou marca de seu blog para substituir. No código acima, por exemplo, está usando uma imagem que está dentro da pasta /img/ do tema (onde a url do tema é definido por get_bloginfo('template_url')).

Use e abuse deste recurso para fazer um layout criativo para seus leitores! Depois conte-me a sua experiência ou se tem alguma dúvida sobre ele. Saiba mais sobre o BFI Thumb neste post e neste e conheça os outros recursos que ele oferece. ;D

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)

6 Comentário(s)

(6 pelo blog e pelo facebook)
  • Jéssica
    14 . 11 . 2015

    Aninha, fiz tudo certinho e coloquei o codigo pra aparecer apenas nos posts únicos, ou seja no single.php .. aparece lá o thumbnail certinho, mas so aparece um, o daquele post específico em que está. Ou seja, ele não está puxando os posts relacionados, da mesma categoria. E quando aparece o único thumbnail, aparece apenas a imagem destacada. Não aparece nada quando passo o mouse em cima, título.. nada! Nem da sinal de nenhum "hover". Aparece apenas a imagem, como se nao tivesse link nenhum. Poderia me ajudar!? Obrigadaaaa!

    Responder

  • Sara
    04 . 03 . 2015

    Esse codigo veio na hora certa <3 eu tava tendo problemas com o timthumb, não funfava de jeito nenhum. Testei esse e opa, já virou meu amor <3
    Obrigada mais uma vez. Adoro teus tutos.

    Responder

  • Maike
    Visitar blog
    14 . 01 . 2015

    Ai Ana, amei!
    Eu gosto muito de usar a função add_image_size, que ele recorta também sem nenhum script, mas esse eu amei, eu uso atualmente o timthumb, mas quero me livrar dele, porque meu servidor vive dando erros, sumindo posts e usuários!
    Obrigado pela dica;

    Abraços

    Responder

    • Aninha
      Visitar blog
      14 . 01 . 2015

      Oi @Maike! Sim, o add_image_size é muito bom, mas pena que ele não edita imagens já postadas. Precisa gerar novamente os thumbnails com um plugin (uso o Force Regenerate Thumbnails). Ou eu to fazendo errado e não sei usar, socorro kkkkkkk Pra você sempre deu certo?

      Responder

      • Maike
        Visitar blog
        14 . 01 . 2015

        @Aninha,
        Então, eu sofro com isso também kkkkk Eu uso o Regenerate Thumbnails, ele funcionou direitinho todas as vezes! Mas, eu amei esse seu tutorial por simplificar a vida da gente né? Principalmente pra evitar os plugins né.

        Responder

        • Aninha
          Visitar blog
          14 . 01 . 2015

          Aaahhh entendi @Maike! Mas então o BFI veio pra nos salvar, haha. o//