Свой хэдлайн с изображением для страниц

Блок (div class="headlines")создал с помощью плагина ACF, но теперь не могу спрятать div этого блока, когда не заполнены поля и отсутствует изображение фона

вот код блока:

<div class="headlines">
	<?php $image = get_field('headlines_background'); ?>
	<div class="centered bttk-cta-bg" style="background:url(<?php echo $image['url']; ?>) no-repeat; background-size: cover; background-position: center; height: 200px; position: relative;">
		<div class="blossomtheme-cta-container headlines_title">
		<?php if( get_field('headlines_title') ): ?>
			<h4><?php the_field('headlines_title'); ?></h4>
		<?php endif; ?>
			<div class="headlines_description text-holder">
			<?php if( get_field('headlines_description') ): ?>
				<p><?php the_field('headlines_description'); ?></p>
			<?php endif; ?>
			</div>
		</div> 
	</div>        
</div>

поля которые заполняются через ACF:
1) headlines_background - поле заполнения(подгрузки) фонового изображения через ссылку на файл изображения
2) headlines_title - заголовок
3) headlines_description - описание

Так добавьте условия вывода

<?php if( !empty( get_field( 'field-one' ) ) ) { ?>
	здесь ваш контент или блок в котором выводится само поле с помощью the_field() <?php the_field( 'field-one' ); ?>
	или так - с помощью get_field() <?php echo get_field( 'field-one' ); ?>
<?php } ?>

в принципе, для вот этого поля:

        <?php if( get_field('headlines_title') ): ?>
			<h4><?php the_field('headlines_title'); ?></h4>
		<?php endif; ?>

и для вот этого поля:

            <?php if( get_field('headlines_description') ): ?>
				<p><?php the_field('headlines_description'); ?></p>
			<?php endif; ?>

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

Для вот этой конструкции:

<?php $image = get_field('headlines_background'); ?>
	<div class="centered bttk-cta-bg" style="background:url(<?php echo $image['url']; ?>) no-repeat; background-size: cover; background-position: center; height: 200px; position: relative;">

я не могу понять как применить вашу конструкцию и опять "но" если всё-таки я скрою и её, то на сам блок headlines это не повлияет, так как он останется видимым, из-за заданной высоты и затемнение фона

нужно что бы выполнялось условие - если во всех полях headlines_background, headlines_title и headlines_description отсутствует заполнение, то для блока div class="headlines" выполняется условие display: none;

тогда для всего блока добавьте условие тоже

<?php if( !empty( get_field( 'headlines_background' ) ) && !empty( get_field( 'headlines_background' ) ) && !empty( get_field('headlines_title') ) && !empty( get_field('headlines_description') ) ) { ?>
	<div class="headlines">
	...
	</div>
<?php } ?>

Либо сделайте еще какой-то чекбокс в произвольных полях который включает/выключает отображение этого блока целиком, и пропишите условие вывода блока на основе его.

Благодарю, получилось!,... а то я не в ту сторону копал пытаясь скрыть js или JQuery пустой блок...