web-dev-qa-db-fra.com

Définir la vignette du post comme arrière-plan

J'ai une seule page pour mes produits où tous les produits sont listés. Voici comment je l'ai archieved:

<ul class="produkte">
    <?php $args = array( 'post_type' => 'produkte', 'posts_per_page' => 30 );

    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
        echo '<li class="produkt">';
        echo '<a href="' . get_permalink() . '">';
        echo '<div class="produkt-info">';
        the_title('<h3>', '</h3>');
        if (has_post_thumbnail()) {
            echo '<figure class="imgBox">';
           the_post_thumbnail('full', array('class' => 'img-resp') );
           echo "</figure>";
        }
        echo '</div>';
        echo '</a>';
        echo '</li>';
    endwhile; ?>
</ul>

J'ai décidé de définir la vignette du message comme image d'arrière-plan du li.produkt. Quand je fais quelque chose comme ça:

echo '<li class="produkt" style="background: url('.the_post_thumbnail().')">';

La page génère un élément d'image au-dessus de l'élément li. Qu'est-ce que je fais mal??

post-thumbnails
2
moesphemie

Le problème ici est the_post_thumbnail() ne renvoie pas l’URL de l’image mais la balise img.

Vous pouvez utiliser ce code

$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo '<li class="produkt" style="background: url('. $url.')">';
4
Tung Du

Par WordPress Codex, la fonction the_post_thumbnail () affiche la vignette du message.} _https://developer.wordpress.org/reference/functions/the_post_thumbnail/ Mais cette sortie affiche la balise entière. et pas seulement le SRC, qui dans votre cas est nécessaire.

Au lieu de cela, vous devez utiliser la fonction wp_get_attachment_image_src () qui récupérer une image pour représenter une pièce jointe.. https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Donc, je suggère d'essayer quelque chose comme ça:

//this retrieve the full version of image
$image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
$image_url = $image_data[0];
echo '<li class="produkt" style="background: url('. $image_url .')">';
2
WP-Silver

Il existe maintenant la fonction get_the_post_thumbnail_url fournie dans WordPress.

Exemple d'utilisation du codex:

$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');

https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

1
mspseudolus