Установка миниатюры записи в качестве фона

Question

Установка миниатюры записи в качестве фона

25 мар. 2016 г., 13:43:19

Просмотры: 38.6K

Голосов: 5

У меня есть отдельная страница для моих продуктов, где отображаются все продукты. Вот как я это реализовал:

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

Я решил установить миниатюру записи в качестве фонового изображения для li.produkt. Когда я делаю что-то вроде этого:

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

Страница генерирует элемент изображения над элементом li. Что я делаю не так??

moeses

221

миниатюры записей

Все ответы на вопрос

В WordPress теперь доступна функция get_the_post_thumbnail_url.

Пример использования из кодекса:

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

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

mspseudolus

91

15 мая 2018 г. 23:26:13

Согласно WordPress Codex функция the_post_thumbnail() Отображает миниатюру записи. https://developer.wordpress.org/reference/functions/the_post_thumbnail/ Однако она выводит весь HTML-тег изображения, а не только src, что вам и требуется.

Вместо этого следует использовать функцию wp_get_attachment_image_src(), которая Получает изображение, представляющее вложение.. https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Поэтому предлагаю попробовать что-то вроде этого:

// Получаем полную версию изображения
$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 .')">';

WP-Silver

707

25 мар. 2016 г. 14:08:14

Комментарии

Просто обратите внимание, что у вас есть лишняя скобка ")" в конце первой строки.

Simone Cabrino

29 мар. 2017 г. 17:22:47

Попробуйте использовать background-size: cover, background-position: center и background-size: 300px 100px;

<?php
echo '<li class="produkt" style="background-image: url('<?php the_post_thumbnail_url(); ?>'); background-size: cover; background-position: center; background-repeat: no-repeat; background-size: 300px 100px;">';
?>

Pedro Marques

1

30 нояб. 2020 г. 17:07:40

просто вывести URL миниатюры записи:

<li class="produkt" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);">></li>

Ilyasine

1

10 февр. 2021 г. 00:32:55

Tung Du 885 · Accepted Answer · 2016-03-25T13:54:59Z

Проблема здесь в том, что the_post_thumbnail() возвращает не URL изображения, а HTML-тег img.

Вы можете использовать этот код:

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

Tung Du

885

25 мар. 2016 г. 13:54:59