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' ) {
global $post;
$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.
Everaldo, fiz aqui e não deu certo. Pode me ajudar?
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ê.
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!
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.
Olá Orlando,
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.
Abraços
Mto bom! Parabéns e obrigado. 😀
Obrigado Luiz.
Ficamos felizes em poder compartilhar algumas dicas e truques que usamos no dia a dia.
um updade
pra deixar a imagem do bg responsiva altere
echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ )”‘;
por
echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ )” center center’; background-size:cover;
um updade
pra deixar a imagem do bg responsiva altere
echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ )”‘;
por
echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ )” center center’; background-size:cover;
Corrigindo o que escrevi, o correto é:
echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ ) center center; background-size:cover;”‘;
Obrigado, muito me serviu!