Support

Account

Home Forums Add-ons Flexible Content Field Flex duplicate content

Solved

Flex duplicate content

  • 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?

  • 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 πŸ™‚

  • 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>
    
  • 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 πŸ™‚

  • This reply has been marked as private.
  • 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 πŸ™‚

  • Thanks James – we forgot the opening and closing {}

    Working beautifully now – thanks so much for your help.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.