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
Partilhe:
Sobre o Nuno
Licenciado em Comunicação e Design Multimédia. Webdesigner e Consultor Web Freelancer. Gestor de projecto do maistrafego.pt a maior comunidade de webmasters e empreendedores web em Portugal. Exclusivamente dedicada a melhorar a web portuguesa desde 2004.
-
Marisa Almeida on Por que vale a pena ser empreendedor na Internet
-
Merval on Por que vale a pena ser empreendedor na Internet
-
-
Rob on Crowdfunding – uma nova forma de financiamento para empreendedores
-
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
Olá,
Estou com um problema com thumbnail. Tenho um tema da ElegantThemes que se chama eStore.
Acontece que eu já dei permissões 777 chmod e as imagens internas de thumbnail não aparecem por nada neste mundo.
O timthumb.php acompanha o tema, portanto é atual, mas o curioso é que eu já tentei de todas as maneiras possíveis que nada aparece.
Se alguém já enfrentou este problema, agradeço uma ajuda.
Grato,
Airton
Esse theme já trás uma funcionalidade do género com esse script. Terá de perguntar no fórum de suporte do theme.
estou tentando utilizar esse código, mas a imagem simplesmente nao aparece. aparece somente um quadrado cinza conforme feito com o css, mas a imagem em si nao aparece. alguem poderia me ajudar por favor?
obrigado.
Olá amigo,
Como poderia adicionar as miniaturas em custom posts? Uso o tema clipper, ofertascampinas.com.br -
Obrigado,
Parabéns pelo post, muito fácil e intuitivo.
Aqui funcionou perfeitamente, abraço!