Tutorial Post Thumbnail (imagem destacada)

A algum tempo pensava em fazer alguns posts sobre WordPress, pegando o embalo do curso de WordPress na DRC, treinamentos aqui em São Paulo. Um dos recursos do WordPress que todo mundo fica ansioso em aprender é Post Thumbnail ou na tradução Imagem Destacada, este recurso permite adicionar uma imagem vinculada ao post.

Para habilitar o recurso que apareceu desde as versões 2.9 do WordPress temos que adicionar no nosso arquivo functions.php o seguinte código:

 

Agora vamos acessar o painel do WordPress, crie um novo post e adicionar uma imagem destacada. O painel de imagem destacada na versão 3.0 e 3.1 do WordPress, fica no canto inferior direito.

Faça o upload de uma imagem e selecione a opção usar como imagem destacada.

Lembre-se caso o post já estiver publicado não esqueça de atualiza-lo. Adicionando a imagem destacada não significa, que a imagem já irá aparecer em seu post. Para a imagem aparecer em seu post é preciso chamar a a template tag the_post_thumbnail() em algum lugar do seu loop, no arquivo da página que vc quer que apareça: index.php, single.php, category.php, search.php… O importante é estar dentro do loop.

Agora vamos aplicar um thumbnail ao nosso tema. no arquivo index.php adicionamos o sequinte código :




		
>

No código acima chamamos um thumbnail ou com tamanho original ou com o tamanho padrão caso tenha sido definido no admin. É um loop simple que puxa o título e o thumbnail, existe a possibilidade de definir o tamanho do thumbnail quando carregado passando os seguintes parâmetros:

the_post_thumbnail(‘thumbnail’); – resolução thumbnail (default 150px x 150px )
the_post_thumbnail(‘medium’); – resolução média (default 300px x 300px max)
the_post_thumbnail(‘large’); – resolução alta (default 640px x 640px max)

the_post_thumbnail( array(100,100) ); – tamanhos personalizados onde passamos um array com os valores de altura e largura.

Como no exemplo abaixo, nesse caso irei utilizar o mesmo código apenas modificando o esquem dentro do loop :

 
					
>

Nesse exemplo chamamos “” carregamos um thumbnail com 350px de largura e 180px de altura.

Além dessas opções de tamanho podemos registrar tamanhos personalizados de thumbnail, com a função “add_image_size” esta função é adicionada no arquivo functions.php.

A função add_image_size recebe os seguintes parâmetros :
add_image_size( ‘nome’, largura, altura , crop : true ou false );

Considerando as funções adicionadas anteriormente, agora vamos adicionar um tamanho personalizado “meu-thumb” em nosso arquivo functions.php ele vai ficar da seguinte forma:


Resumindo a história adicionamos um novo tamanho com 320px x 280px se a imagem não atender a proporção vai ser cropada(cortada).

Agora vamos chamar um thumb com o tamanho que criamos “meu-thumb”:


		
>

Vou criar uma categoria agora WordPress e fazer um repositório dos meus estudos. Vou finalizando por aqui até o próximo tutorial

29 respostas para “Tutorial Post Thumbnail (imagem destacada)”

  1. eu coloquei o código no functions.php e agora não estou mais conseguindo acessar minha área administrativa. Está aparecendo a mensagem:

    Parse error: syntax error, unexpected ‘<' in /home/blogganh/public_html/wp-content/themes/Runone/functions.php on line 11

    O que eu faço?? Como conserto este erro ??

    Por favor me ajude, pois não faço idéia do que tenho que fazer para ter de volta meu blog.

    1. Olá Mauricio pode ser algum desses problemas :
      – ter algum “;” faltando
      – depois do ?> ter algum espaço( remova todos os espaços depois do “?>”, você também pode deixar sua taga < ?php sem fechamento apagando o "?>” no final do seu arquivo functions.php
      – por último só pode ter uma tag < ?php ?> no functions.php

      *se não funcionar cola o código do functions.php no pastie.org e manda o link

  2. Souuu hiper leiga, pra não dizer ignorante, quando se trata de tecnologia/computação/informática. Ai não entendi direito qual a utilidade: tipo, onde vai aparecer no meu blog e exatamente pra que serve. Mas o meu maior problema é que você cita o wordpress na versão 3.0 e 3.1, e como faço pra saber qual a versão do meu?
    E caso não seja essa, como fazer um update?
    Ai por favor me ajuda. Em todos esses fóruns e pgs de ajudas q já entrei falando sobre mil e uma dúvida, nínguém nunca me respondeu!!!!

  3. Olá Caroline sobre a questão do Thumbnail é uma funcionalidade de vincular uma imagem a um post, uma imagem que é desvinculada ao texto do post. Então quando vc cria uma arquivo para seu tema o index.php ou single.php, por exemplo. Dentro do loop onde são carregadas as informações como título do post, conteúdo ou data. Além dessas infos podemos carregar o thumbnail(imagem destacada) que vc adicionou na hora que criou o post.

    Um exemplo prático no site :
    http://www.rosenbaum.com.br/

    As imagens na parte inferior da home são thumbnails. No código da home tem chamadas para exibir thumbnail do post.

    A versão do wordpress acho que o mais fácil é acessando o painel do seu blog como na imagem a seguir : http://www.thepicky.com/images/2009/09/wordpress-dashboard.png

    Copiando do doc wordpress:

    Actualização Automática

    Se está a actualizar uma versão 2.7 ou superior, pode usar a actualização automática:

    Abra o ficheiro wp-admin/update-core.php no seu browser e siga as instruções.
    Queria mais talvez? Não há!

    Actualização Manual

    Antes de actualizar o quu quer que seja, verifique que fez cópias de segurança dos ficheiros que modificou, por exemplo index.php.
    Elimine os ficheiros do WordPress, guardando os que modificou.
    Faça upload dos novos ficheiros.
    Abra /wp-admin/upgrade.php no seu browser.

  4. Olá Fellyph,
    Manjo pouco de wordpress e menos ainda de php.
    Queria uma ajuda se possível. Estou montando um portfólio e em minhas publicações a imagem destacada do thumbnail está entrando automaticamente no post, mostrando a imagem duplicada na postagem.
    Você conhece qual seria a raiz disso que pra mim está sendo um problema?

    1. É necessário saber em que comento o thumbnail aparece, se é na home ou na single, por exemplo.
      Ai neste caso editar o respectivo arquivo do tema que está aparecendo dois thumbnails pode ser que a função está sendo acionada mais de uma vez.

  5. perguntei… e a curiosidade apesar de ser leigo me ajudou a encontrar o problema… Muti feliz aqui porque comecei a usar WP a menos de duas semanas.

    Acessei a funçao post-single.php , e apaguei o codigo abaixo:

    get_option(‘featured_image_width_single’), $theme->get_option(‘featured_image_height_single’)),
    array(“class” => $theme->get_option(‘featured_image_position_single’) . ” featured_image”)
    );
    }
    ?>

    Fiz um teste aqui e funcionou…

    O que me diz Farley? Sera que terei problemas em outras funçoes?

  6. Rafael acho que falta mais alguma coisa nessa linha de código que vc passou no comentário. tem “)” a mais. Caso do meu exemplo eu crio um tema do zero então os conflitos são mais fáceis de administrar. Mas vc pode navegar entre as páginas para verificar algum tipo de problema.

  7. Olá, estou tendo problemas para alinhar a thumbnail com o texto do post. Ao invez de o texto aparecer alinhado, logo ao lado da thum (Tem espaço), ele vai para a proxima linha. O que posso fazer?
    Outra coisa, ja tem no css o seguitne codigo: float:left;
    mas nada ainda! :/
    O que posso fazer? obrigado.

  8. Oi Fellyph,
    eu estou com uma dúvida faz muito tempo e não consigo achar a resposta em lugar nenhum,
    eu uso um tema no meu wordpress que os thumbs tem um formato quadrado, eu não gosto disso pq eles distorcem a imagem, eu gostaria que eles ficassem no formato retangular, proporcional à foto,
    aqui neste post eu descobri como alterar os tamanhos dos thumbs, mas tenho uma dúvida, eu tenho foto tanto vertical quanto horizontal, eu consigo adiconar no functions.php um novo tamanho em que eu coloque o tamanho de um dos lados da foto e outro lado ele faça um cálculo proporcional? Por exemplo, um thumb em que a aresta maior seja 200px e a menor seja calculada automática, pq desta forma ele funcionária tanto para imagens verticais como para horizontais.
    obrigada!

  9. Olá Vanessa, uma opção que você pode cadastrar dois tamanhos e utilizar campos customizados. Ai vc cadastra o valor horizontal ou vertical, na página que vc carrega o thumbnail vc adiciona uma condicional para carregar tamanhos diferentes.

  10. Oi Fellyph
    Obrigada pela sua ajuda! Eu conseguira adicionar esta condicional apenas se fosse criar uma página nova ou um post com este thumb, certo?
    no caso dos thumbs automáticos tb? por exemplos, os que são resultado de busca, ou qndo alguém clica em uma categoria,
    nestes casos eu consigo alterar o tamanho dos thumbs tb?
    obrigada!

  11. Eder, pra resolver esse seu problema de imagens duplicadas, não faça o upload da imagem destacada (thumbnail) pelo post onde vc colocou a galeria de fotos, faz o upload da thumb pelo painel midias do wordpress, em seguida vai no seu post e clica em adicionar a imagem destacada e vai na aba “arquivos de midia”, e usa a imagem que vc upo por la, ai ela não duplica na galeria !

  12. da hora o post, mas tenho uma duvida… se puderem me ajudar?

    estou colocando um tamanho de imagem 310 x 160, mas quando adiciono uma imagem destacada ela não preenche o espaço.
    a imagem não está cortando ela esta diminuindo na proporção, como faço pra ela cortar no tamanho que estou colocando?

  13. Muito obrigado pelo post. Até hoje usava classe para pegar um imagem destacada. Vou testar esse procedimento pois facilitará o uso do painel por parte dos clientes.

  14. Olá, Fellyph! Como vai? Estou usando o tema twenty twelve na versão 3.8.1 do WP e gostaria que a imagem destacada aparecesse só na listagem dos post. E que ao abrir o post a imagem destacada não aparecesse. Tem ideia de como eu posso fazer isso?

  15. ola pessoal, estou com uma dificuldade e não sei como resolver… Eu quando faço um post com imagem destaque no WP, e coloco ele com categoria, o link do post só aparece no titulo do post, mais eu queria que o link também estivesse na imagem. alguem pode me ajudar?

  16. Olá Fellyph boas dicas.
    O painel de imagem destacada está aparecendo, mas quando adiciono a imagem não aparece e não vincula ao post. Já mexi nas permissões de pasta dos diretórios de uploads do wordpress e mesmo assim não aparece. Saberia dizer como resolvo isso ?

    Obrigado

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *