Post Thumbnail como Background

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.

Publicado em Dicas e Truques WordPress por Everaldo Matias. Marque Link Permanente.

Sobre Everaldo Matias

Sou grafiteiro e formado em design gráfico. Trabalho desde 2010 com WordPress e sou sócio fundador da Brasa. Colaboro com a Comunidade Brasileira de WordPress, onde sou moderador do fórum de suporte e participo da organização dos WordCamps de São Paulo. Na Brasa trabalho principalmente com desenvolvimento e implementação de sites em WordPress. Escrevo frequentemente posts sobre o assunto onde abordo tendências, ferramentas e tutoriais.

12 ideias sobre “Post Thumbnail como Background

  1. Afrânio disse:

    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ê.

  2. Afrânio disse:

    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

  3. Afrânio disse:

    certinho agora, como que queria o bg. Valeu pela dica!

  4. orlando disse:

    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 disse:

      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

  5. Luiz Lázaro disse:

    Mto bom! Parabéns e obrigado. 😀

  6. 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;

  7. 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;

  8. Corrigindo o que escrevi, o correto é:

    echo ‘style=”background: url(‘.$get_post_thumbnail[0].’ ) center center; background-size:cover;”‘;

  9. Calnews disse:

    Obrigado, muito me serviu!

Deixe uma resposta

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