WordPress расширенные пользовательские поля фоновое изображение

Question

WordPress расширенные пользовательские поля фоновое изображение

Я пытаюсь установить изображение, загружаемое через плагин настраиваемых полей, и отображать его в качестве фона div (который используется в слайдере).

Однако изображение не отображается … У меня есть текст в настраиваемых полях, и он отображается нормально, так что я думаю, что это как-то связано со строкой кода, которую я использую для добавления изображения.

Я пытаюсь установить фон .slide1 с изображением.

Имя настраиваемого поля — slide1_background.

HTML:

<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>

CSS:

.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}

1

background-image css custom-fields php wordpress

Решение

Другие решения

использование echo

<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">

-1

Источник

Accepted Answer

Посмотрите на разницу в вашем коде в вашем вопросе, где вы пытаетесь установить background-image, по сравнению с кодом в вашем комментарии в другом ответе, где вы устанавливаете его как источник изображения.

the_field('slide_bg1') возвращает массив, поэтому вы пытаетесь установить источник фонового изображения в виде массива PHP, который преобразуется в строку как «массив», поэтому в вашем HTML это будет выглядеть так: background-image:url('Array')

Вы должны сначала получить поле, а затем повторить url элемент возвращаемого массива в качестве источника фонового изображения:

$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
<div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }

2