Como coloquei thumbnails automáticos, sem custom fields ou plugins
Como devem ter reparado estive a fazer uns pequenos ajustes na theme aqui do blog, para além de alguns elementos novos na sidebar, temos agora thumbnails automáticos no índice dos posts. Esta técnica é extremamente útil, pois não temos de fazer nada para inserir o thumbnail, não temos de usar custom fiels, não temos de usar plugins (não cumprem o viva thumbs, não vale nada e não funciona bem), simplesmente o script vai buscar a primeira imagem do artigo e corta-a automaticamente.
1- Criar o timthumb.php
O timthumb é um script que muitas themes do wordpress já trazem para este efeito, é gratuito e podem ir busca-lo aqui. Basta copiar o código e criar o ficheiro timthumb.php e coloca-lo na pasta da vossa theme.
2- Editar o ficheiro functions.php
A maior parte das theme trás este ficheiro, se a vossa theme não tiver um ficheiro functions.php criem um, com um seguinte código.
<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>
3- Código do thumbnail
Agora vamos inserir o código na vossa theme, para aparecer o thumbnail, poderá ser no ficheiro index,php, no archive.php, depende da vossa theme, deverá estar dentro do loop que vai buscar o conteúdo, antes do the_content(); por exemplo.
<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1">
</a>
</div>
4- Adicionar o CSS
Para terminar, basta adicionar algum código CSS para dar estilo aos vossos thumbnails.
.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}
O efeito será mais ou menos este, espero que vos seja útil.
Fonte
Sobre o Nuno
Licenciado em Comunicação e Design Multimédia. Criador de vários projectos de referência na web em Portugal. Gestor de projecto do maistrafego.pt uma comunidade dedicada à web portuguesa desde 2004.
-
miguel parisi on Linkbuilding e Backlinks para sites novos
-
-
Tiago Matos on 8 Startups e projectos portugueses que merecem destaque - parte 1
-
Thomato on 8 Startups e projectos portugueses que merecem destaque - parte 1
-
Rui Gomes on 8 Startups e projectos portugueses que merecem destaque - parte 1
Perfeito, muito bom! Já tinha visto nos temas da elegant themes mas nunca tinha explorado a fundo!
Parabéns :D
ótima post..
Os clientes reclamavam de usar o custom fields (acha complicado) e usando este código, o único trabalho é eles inserirem a imagem no post (que é muito facil..rs).
Valew pela força Nuno..
Exacto o objectivo é esse.
Obrigado pelo comentário.
“(não cumprem o viva thumbs, não vale nada e não funciona bem)”
Porque dizes isso? Já o uso em vários sites e funciona perfeitamente bem e pelo preço não acho caro (até porque com a licença para 1 site já lá vão 3 lol)
bfms, experimentei o plugin e não fez o que era suposto fazer, alguns thumbnails simplesmente não apareciam… Nunca cheguei a perceber.
Usei local a função e funcionou perfeitamente, mas quando subi para o servidor ñ deu certo, devo alterar algo no servidor para poder funcionar esta função?
obrigado..
Se funcionou localmente não tem porque não funcionar no servidor. Verifique se fez o upload de todos os ficheiros…
Acontece o mesmo comigo, em localhost funciona, enviado ao servidor, não funciona.
Complemento…
Fazendo alguns teste, percebi que a função que traz o link da imagem está funcionando. É o timthumb.php que parece não funcionar.
Criem uma pasta na vossa theme chamada de “cache” e dêem-lhe permissões 777.
Digam se assim já funciona.
Muito bom o tutorial :D Sou bem capaz de meter thumbnails num dos meus sites por estes dias.
Grande dica, já estou implementando no meu tema.
Muito bom o artigo, funcionou perfeitamente, muito obrigado!
Obrigado pela dica. Muito boa e automatiza 100% a maior dificuldade dos clientes.
Kra vc foi foda msm!! :D
Vlw de mais sua contribuição. Obrigado.
Nuno,
por acaso não tiveste problemas com estes códigos ?
Coloquei-o num tema e funciona bem. O problema é o load do servidor que dispara quando activo o tema…
Se conheceres alguma alternativa avisa.
[ ps.: um plugin para acompanhar os comentários por email não era má ideia ;) ]
Prezados,
Realmente, o Timthumb é uma ótima opção, porém tem alguns problemas de compatibilidade a partir da versão 2.9 do WordPress.
Estou passando por problemas em detrimento disto.
Não existem problemas de compatibilidade, estou a usar em vários sites, sem qualquer problema. O que pode ser incompatível é o tema que está a usar.
Nuno, no meu caso eu hospedo minhas imagens no photobucket e não deu certo, gostaria de saber se tem algum jeito do thumbnails usar a imagem da URL? Obrigada pela atenção