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:
> 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.
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!