Adding dynamic CSS for repeater fields

• rvnds

• November 19, 2017 at 2:06 am

Hi

I’m building up a repeater field with some options to add inline CSS styling. I cannot figure out why using a variable won’t work properly.

If I add a background image and use the code below, each repetition calls the image properly and in the right place.

<?php
while ( have_rows('content_block_items') ) : the_row();         

// VARS
$block_settings = get_sub_field('block_settings'); // <-- a group cloned into a repeater
$block_bg_img = $block_settings['background_image'];                        

// TEXT WYSIWYG FIELDS
if( get_row_layout() == 'text_block' ): ?>
    <div style="<?php if ($block_bg_img): ?>background-image:url(<?php echo $block_bg_img; echo ');'; endif; ?>">
    </div>
<?php endif; ?>

In the this code below, the background image appears correctly in the first row that call the image, however, it also appears in every row thereafter.

<?php
while ( have_rows('content_block_items') ) : the_row();         

// VARS
$block_settings = get_sub_field('block_settings'); // <-- a group cloned into a repeater
$block_bg_img = $block_settings['background_image'];         
if ($block_bg_img): 
    $block_bg_img_style = "background-image:url(".$block_bg_img.');'; 
endif;

// TEXT WYSIWYG FIELDS
if( get_row_layout() == 'text_block' ): ?>
    <div style="<?php echo $block_bg_img_style; ?>">
    </div>
<?php endif; ?>