Miniaturas com Campos personalizados

Os thumbnails ou miniaturas são indispensáveis, até criaram funcionalidades práticas no WordPress para exibi-las, mas você ainda pode usar Custom Fields ou Campos personalizados.

Existe outros modos de exibir miniaturas, como a função post_thumbnail agora bem implementada ou usando plugins. Muitos autores dizem que usar Custom Fields para mostrar thumbanils é ultrapassado, a minha opinião é que depende…

Vantagens

  • Usar o endereço de uma imagem remota, ou seja, hospedando as miniaturas em um sites como o Imageshack ou Imagehost você economiza espaço e tráfego do seu servidor.
  • Por criar as miniaturas você pode recortar partes mais interessantes do que as thumbnaisl geradas automaticamente.
  • É uma funcionalidade estável e compatível. Com o Related Posts é ótimo, assim como o plugin do Justin Tadlock

Desvantagens

  • Ter que gerar as imagens e enviá-las para o servidor ou servidor de imagens para cada postagem
  • Informar toda a vez qual Custom Field usar e informar o endereço da imagem
  • Ruim de implementar se o site começou sem thumbnails. Ou seja, você vai precisar editar postagem por postagem, uma por uma!

Quem deve usar

Se você…

  • precisa editar thumbnaisl manualmente mesmo porque as imagens geradas não ficariam legais
  • precisa economizar espaço e tráfego do site
  • quer exibir thumbnails em todas as postagens, mesmo as que não tem imagens inseridas no texto.
  • quer controlar as thumbnails exibidas, inclusive adicionando textos e efeitos nas imagens.

Enfim, há quem ainda tenha que usar Custom Fields…

Como usar

Ao criar uma postagem nova, veja logo abaixo da área de edição de texto, uma caixa entitulada Campos personalizados.

Em Nome informe por exemplo thumb e em valor coloque o endereço da imagem:

Clique no botão Adicionar campo personalizado e pronto!

Agora temos inserir um código onde queremos exibir a tal thumbnail, por exemplo, na página inicial, ao lado do título em cada postagem.

Abra o arquivo index.phpdo seu tema e procure pela linha que contém o seguinte ou algo parecido:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Link permanente para %s', ' '), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>

Abaixo dessa linha você deve inserir o código:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php $thumb = get_post_meta($post->ID, "thumb", true); if (!empty($thumb)) echo "<div class='index-thumb'><img src='$thumb' alt='img' /></div>"; ?></a>

A imagem está dentro de uma DIV chamada index-thumb para facilitar a estilização.

Imagem para ‘sem thumbnail’

Desde que no exemplo acima a imagem está dentro de uma DIV, só precisamos criar a classe no arquivo style.css do tema, incluindo neste código a imagem que vai aparecer caso a postagem não tenha nenhum thumbnail ainda:

.index-thumb{
border:2px solid #ccc;
width:50px;height:50px;
margin:10px 10px 10px 0; float:left;
background: url(img/semthumb.png) no-repeat;
overflow:hidden
}

O código overflow:hidden oculta o que não couber dentro da DIV sem achatar ou esmagar as imagens que forem um pouco maior que as dimensões da DIV.