Post Thumbnail como Background – Brasa - Sites WordPress de todos os tamanhos!
Post Thumbnail como Background
Postado em 4 de junho de 2013 por Everaldo Matias
Mais uma dica simples e útil. Função para pegar o post thumbnail da página/post e adicioná-lo como background em uma div.
function thumbnail_bg ( $tamanho = 'thumbnail' ) {
$get_post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $tamanho, false, '' );
echo 'style="background: url('.$get_post_thumbnail[0].' )"';
Esse trecho (que deve ser adicionado no functions.php do seu tema) pega o endereço do post thumbnail e guarda na variável $get_post_thumbnail[0]. E então a função imprime junto com o trecho em HTML style=background o endereço do post thumbnail.
Para usar, use o seguinte:
<div > Conteúdo da DIV aqui.
Vejam que como parâmetro da função coloquei 'full', aqui você pode colocar qualquer tamanho nativo do WordPress ou algum tamanho de imagem que criou no seu functions com add_image_size(). Usem a função com criatividade. Qualquer dúvida ou sugestão, escrevam nos comentários.
12 thoughts on "Post Thumbnail como Background"
Afrânio 7 de março de 2015 Responder
Everaldo, fiz aqui e não deu certo. Pode me ajudar?
Everaldo Matias Autor do post 7 de março de 2015 Responder
Sim, vamos lá. Ele retornou algum erro? Algo que possamos identificar o motivo de não ter funcionado?
Segue alguns itens, que preciso adicionar no tutorial:
1 – Seu tema precisa oferecer suporte a thumbnails;
2 – Esse tutorial foi feito se baseando em exibir o thumbnail como bg de uma div, desde que essa div esteja dentro de um loop, ou seja single ou page.
Me confirma essas informações por favor e vamos continuando para fazer a função funcionar para você.
Afrânio 29 de junho de 2015 Responder
Deu certo agora. Não sei onde eu errei, mas funcionou. Usei a imagem destacada para adicionar banners no topo das páginas. Só preciso agora fazer os banners ficarem centralizados e com o no-repeat
certinho agora, como que queria o bg. Valeu pela dica!
orlando 24 de julho de 2015 Responder
estou querendo utilizar a imagem destacada no body, capturando entao largura e altura da tela e aplicando no body.
como faço isso? não quero utilizar os tamanhos padroes, pois preciso que o bg se adapte na altura e largura da tela, se possivel até redimensionar (recalcular) quando diminuirmos as dimensoes do navegador.
Matheus Gimenez 11 de agosto de 2015 Responder
Espero que já tenha resolvido seu problerma, mas se ainda não, você pode usar a propriedade background-size do CSS. Usando o valor cover nessa propriedade. Ai o background vai adapta ao tamanho. Lembro que você precisa setar o no-repeat para evitar repetição.