Как задать бекграунд div'у в кастомных полях ACF?

Question

[Виталий Фролов]

В общем задача такая,есть блок который выглядит вот так вот

Внутри это вот так

<div class="page-title">
    <div class="overlay"></div>   
    <div class="container"> 
        <div class="row">
            <div class="col-md-12 page-title-container">
            <?php 
                if ( themesflat_choose_opt( 'breadcrumb_enabled' ) == 1 ):

                    themesflat_breadcrumb_trail( array(
                        'separator'   => themesflat_choose_opt('breadcrumb_separator'),
                        'show_browse' => true,
                        'labels'      => array(
                        'browse'  => get_theme_mod( 'breadcrumb_prefix', esc_html__( '', 'fo' ) ),
                            'home'    => esc_html__( 'Home', 'fo' )
                        )
                    ) );
                
                endif;                       
            ?>

Каким образом с помощью ACF мне задать свой бекграунд этому блоку?Ну т.е чтоб при создание страницы можно было ставить свою картинку и она была бекграундом.

Я создал группу правил под именем "imageblock"
В этой группе создал поле "imageback" с типом поля Изображение
пробовал сделать вот так вот

<div class="page-title" style="background-image: url(<?php echo get_sub_field('imageback')['url']; ?>);">

Но в консоле выводит пустой бекагрунд,ну т.е то что моё <?php echo get_sub_field('imageback')['url']; ?> не видно.
Как решить эту проблему?

Comments

[Павел]

А почему sub_field ? оно у вас в репитере или просто отдельным полем? Если отдельным, то the_field. Смотрите документацию к плагину

Answer 1

[Jimmy Neutron]

<?php if( have_rows('imageblock') ):  while( have_rows('imageblock') ): the_row(); 
$imageback= get_sub_field('imageback'); ?>
	<div class="page-title" style="background-image: url(<?php echo $imageback['url']; ?>);">
<?php endwhile; endif; ?>

Comments

[Виталий Фролов]

т.е вот так вот?

<?php if( have_rows('imageblock') ):  while( have_rows('imageblock') ): the_row(); 
$imageback= get_sub_field('imageback'); ?>
  <div class="page-title" style="background-image: url(<?php echo $imageback['url']; ?>);">
<?php endwhile; endif; ?>
    <div class="overlay"></div>   
    <div class="container"> 
        <div class="row">
            <div class="col-md-12 page-title-container">
            <?php 
                if ( themesflat_choose_opt( 'breadcrumb_enabled' ) == 1 ):

                    themesflat_breadcrumb_trail( array(
                        'separator'   => themesflat_choose_opt('breadcrumb_separator'),
                        'show_browse' => true,
                        'labels'      => array(
                        'browse'  => get_theme_mod( 'breadcrumb_prefix', esc_html__( '', 'fo' ) ),
                            'home'    => esc_html__( 'Home', 'fo' )
                        )
                    ) );
                
                endif;                       
            ?>

Пробовал воткнуть так,не работает.

[Jimmy Neutron]

Виталий Фролов, сайт на локальном или в сети?

Answer 2

[Николай Миронов]

В настройках поля imageback можно указать будет ли отдаваться весь массив данных картинки или только url

Вариант с Массивом (дефолтный):

<div class="page-title" style="background-image: url(<?php $image = get_field('imageback'); echo $image[sizes][large] ?>);">

Вариант с URL:

<div class="page-title" style="background-image: url(<?php the_field('imageback') ?>);">