Добавить избранное изображение в качестве фона, если класс существует

Question

У меня нет примеров кода, которые можно было бы предложить, поскольку это скорее «доказательство концепции».

Возможно ли в Wordpress / PHP при просмотре сообщений добавить рекомендуемое изображение в качестве фона для div. ПРЕДОСТАВЛЯЕТСЯ, что класс существует для этого div?

Я не могу добавить изображение непосредственно в шаблон.

Есть какие-нибудь предложения?

Answer 1

Одно из решений, которое я использовал, - это установка переменной CSS в стиле для <div>.

<div class="<?= has_post_thumbnail() ? 'has-background' : 'no-background'; ?>" style="--image: url( <?=get_the_post_thumbnail_url(get_the_ID(),'full'); ?> );">
        <div class="text-block">
            <span>Company</span>
            <h1><?php the_field('page_title'); ?></h1>
            <p><?php the_field('intro_content'); ?></p>
        </div>
    </div>

А затем в вашем CSS:

.has-background {
   background-image: var(--image);
   /* other styles as needed */
}

Answer 2

Есть два варианта, которые вы можете использовать для фона изображения для div

Использование встроенного стиля в самом div

if ( have_posts() ) {
while ( have_posts() ) {
    the_post();

    /* grab the url for the full size featured image */
    $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); 

    /* link thumbnail to full size image for use with lightbox*/
    echo '<div style="background:url('.esc_url($featured_img_url).')">'; 
        the_title();
    echo '</div>';
endwhile; 
endif;