Flex duplicate content

• renee

• July 13, 2016 at 2:21 pm

Hi – just getting started with flexible content and finding that using while ( have_rows('flex-field') ) : the_row() produces duplicates of code and not sure why this is.

I’m trying to bring in an image (Image url) as a background and have succeeded but it’s pulling in the style tag twice:

    <?php 
    if( have_rows('flex-field') ): 
        while ( have_rows('flex-field') ) : the_row();?>

             <?php if( get_row_layout() == 'flex-section' ); ?>
    <style>  
    .photo-box {
          background: url(<?php the_sub_field('hero_image'); ?>) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size:  cover;
          background-size: cover;

    }
    .fore-image {
        background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;
         background-size: contain;
    }
</style>

The first style has empty urls but the second works?
Anyone know why?

• James

• July 13, 2016 at 3:16 pm

Hi @renee

You got multiple style tags because you’ve added it in the while loop. So, when you have two ‘flex-section’ layouts, the style will be printed twice. If you want to do something like that, I suggest you use the inline CSS code instead. It should be something like this:

<?php if( have_rows('flex-field') ): ?>
    
    <style>  
        .photo-box {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size:  cover;
              background-size: cover;

        }
        .fore-image {
            background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;
             background-size: contain;
        }
    </style>
    
    <?php while ( have_rows('flex-field') ) : the_row();?>

        <?php if( get_row_layout() == 'flex-section' ); ?>
                
            <div class="photo-box" style="background: url(<?php the_sub_field('hero_image'); ?>) no-repeat center center fixed;"></div>
            <div class="fore-image" style="background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;"></div>

I’m not sure regarding the empty URLs issue. After you tried the code I gave you, could you please share some screenshots of the issue?

Thanks 🙂

• renee

• July 13, 2016 at 3:48 pm

Hi James,

Understand where you’re coming from but this didn’t fix the issue. Used code:

<?php if( have_rows('digital_sections') ): ?>
    
    <style>  
        .photo-box {
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size:  cover;
              background-size: cover;

        }
        .fore-image {
               background-size: contain;
        }
    </style>
    
    <?php while ( have_rows('digital_sections') ) : the_row();?>

        <?php if( get_row_layout() == 'hero_images' ); ?>
        <header class="container-fluid photo-box" style="background: url(<?php the_sub_field('hero_image'); ?>) no-repeat center center fixed;">
            <div class="fore-image" style="background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;"></div>
        </header>        

<?php endwhile; endif; ?>

And now everything within the <?php while ( have_rows('digital_sections') ) : the_row();?> is repeated and the first set still empty?

Resulting code:

<header style="background: url() no-repeat center center fixed;" class="container-fluid photo-box">
            <div style="background: transparent url("") no-repeat scroll center center; transform: translate(0px, -4.5%);" class="fore-image"></div>
        </header>
<header style="background: url("http://localhost/startup/wp-content/uploads/2016/06/sg-bg-2.jpg") no-repeat center center fixed;" class="container-fluid photo-box">
            <div style="background: transparent url("http://localhost/startup/wp-content/uploads/2016/06/fore-image.png";) no-repeat scroll center center;" class="fore-image"></div>
        </header>

• James

• July 13, 2016 at 3:55 pm

Hi @renee

Could you please var_dump() the flexible content like the following?

var_dump(get_field('digital_sections'));

If that doesn’t show the data, could you please add the ID of the post like this:

var_dump(get_field('digital_sections', 99));

Where ’99’ is the post ID where the flexible content is set.

Thanks 🙂

• renee

• July 13, 2016 at 4:08 pm

This reply has been marked as private.

• James

• July 13, 2016 at 4:47 pm

Hi @renee

It seems that you forgot to close the if logic. Could you please try this code:

<?php if( get_row_layout() == 'hero_images' ) { ?>
    <header class="container-fluid photo-box" style="background: url(<?php the_sub_field('hero_image'); ?>) no-repeat center center fixed;">
        <div class="fore-image" style="background: url(<?php the_sub_field('fore_image'); ?>) no-repeat center;"></div>
    </header>
<?php } ?>

Hope this helps 🙂

• renee

• July 13, 2016 at 4:59 pm

Thanks James – we forgot the opening and closing {}

Working beautifully now – thanks so much for your help.