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
