Установить миниатюру в качестве фона

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

<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-элементом. Что я делаю не так??

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

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

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

Per WordPress Codex the the_post_thumbnail () Функция Отображает миниатюру сообщения. https://developer.wordpress.org/reference/functions/the_post_thumbnail/ Но это выводит весь тег изображения, а не только src, который в вашем случае необходим.

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

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

 //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 .')">';