Flex Content in Repeater

• robertrhu

• August 31, 2016 at 10:40 am

Trying to repeat flexible content for a hero slider where user can add video embed or an image. How do I echo each piece in the loop? I need the video to be a URL that is embedded into an echoed iFrame in the resorts_slider_video loop.

<!--ORBIT SLIDE-->
<?php
    if (have_rows('add_resorts_hero_image_slide', 'option')) {
        while (have_rows('add_resorts_hero_image_slide', 'option')) {
            the_row();
            
            $herovideo = the_sub_field('add_resorts_hero_slider_video', 'option');
            $heroimage = the_sub_field('add_resorts_hero_slider_image', 'option');

            if (have_rows('choose_resorts_hero_slider_content', 'option')) {
                while (have_rows('choose_resorts_hero_slider_content', 'option')) {
                the_row();
            
                    echo '<li class="orbit-slide">';

                    if( get_row_layout() == 'resorts_slider_video' )

                        //WHAT DO I ECHO HERE FOR THE IFRAME VIDEO?//
                        
                    elseif( get_row_layout() == 'resorts_slider_video')
                        
                        //WHAT DO I ECHO HERE FOR THE IMAGE?//
                    
                    echo '</li>';

                }
            } 
     }
}

?>
<!--END ORBIT SLIDE-->

• James

• August 31, 2016 at 4:17 pm

Hi @robertrhu

Could you please share the JSON export file of your field group so I know your setup?

Also, you don’t need to use the ‘option’ ID inside a repeater loop. It should be something like this:

<!--ORBIT SLIDE-->
<?php
    if (have_rows('add_resorts_hero_image_slide', 'option')) {
        while (have_rows('add_resorts_hero_image_slide', 'option')) {
            the_row();
            
            $herovideo = the_sub_field('add_resorts_hero_slider_video');
            $heroimage = the_sub_field('add_resorts_hero_slider_image');

            if (have_rows('choose_resorts_hero_slider_content')) {
                while (have_rows('choose_resorts_hero_slider_content')) {
                the_row();
            
                    echo '<li class="orbit-slide">';

                    if( get_row_layout() == 'resorts_slider_video' )

                        the_sub_field('video_sub_field_of_the_flexible_content');
                        
                    elseif( get_row_layout() == 'resorts_slider_image')
                        
                        the_sub_field('image_sub_field_of_the_flexible_content');
                    
                    echo '</li>';

                }
            } 
     }
}

?>
<!--END ORBIT SLIDE-->

Thanks 🙂

• robertrhu

• September 1, 2016 at 4:42 am

Thanks James!

But if I simply add the sub_field the way you have it it won’t embed into HTML, right? For instance, don’t I need to have the image subfield embedded in src=”” ? Thats why I was setting them as variables up top and then was planning on echoing the variable in the loop. But how would I echo it in an img src=”” tag within the loop?

• robertrhu

• September 4, 2016 at 6:55 am

This is what I have so far. Its not pulling in the content associate with the custom fields…

<!--ORBIT SLIDE-->
<?php
    if (have_rows('add_resorts_hero_image_slide', 'option')) {
        while (have_rows('add_resorts_hero_image_slide', 'option')) {
            the_row();
            
            $herovideo = the_sub_field('add_resorts_hero_slider_video');
            $heroimage = the_sub_field('add_resorts_hero_slider_image');
                $heroimgsize = 'hero-image';
                $heroimg_array = wp_get_attachment_image_src($heroimage, $heroimgsize);
                $heroimg_url = $heroimg_array[0];
            

            if (have_rows('choose_resorts_hero_slider_content')) {
                while (have_rows('choose_resorts_hero_slider_content')) {
                the_row();
            
                    echo '<li class="orbit-slide">';

                    if( get_row_layout() == 'resorts_slider_video' )

                        echo $herovideo;
                        
                    elseif( get_row_layout() == 'resorts_slider_video')
                        echo '<img src="'.$heroimg_url.'" />';
                    
                    echo '</li>';

                }
            } 
     }
}

?>
<!--END ORBIT SLIDE-->

• James

• September 5, 2016 at 1:40 pm

Hi @robertrhu

I’m sorry I think I made a mistake in my last answer. If the add_resorts_hero_slider_video and the add_resorts_hero_slider_image fields are located inside the flexible content, you should be able to do it like this:

<!--ORBIT SLIDE-->
<?php
    if (have_rows('add_resorts_hero_image_slide', 'option')) {
        while (have_rows('add_resorts_hero_image_slide', 'option')) {
            the_row();
            
            if (have_rows('choose_resorts_hero_slider_content')) {
                while (have_rows('choose_resorts_hero_slider_content')) {
                the_row();
            
                    echo '<li class="orbit-slide">';

                    if( get_row_layout() == 'resorts_slider_video' ){
                        
                        $herovideo = get_sub_field('add_resorts_hero_slider_video');
                        echo $herovideo;
                        
                    } elseif( get_row_layout() == 'resorts_slider_video') {
                        
                        $heroimage = get_sub_field('add_resorts_hero_slider_image');
                        echo '<img src="' . $heroimage['url'] . '" />';
                        
                    }
                    
                    echo '</li>';

                }
            } 
     }
}

?>
<!--END ORBIT SLIDE-->

To learn how to use image field, please check this page: https://www.advancedcustomfields.com/resources/image/.

If that code doesn’t work, kindly share the JSON export file of your field group so I can test it on my installation.

Thanks 🙂

• robertrhu

• September 7, 2016 at 7:21 am

Finally figured it out. Hope this helps someone else out!

<!--ORBIT SLIDE-->
<?php
if (have_rows('add_resorts_hero_image_slide', 'option')) {
    while (have_rows('add_resorts_hero_image_slide', 'option')) {
        the_row();

            if (have_rows('choose_resorts_hero_slider_content')) {
                while (have_rows('choose_resorts_hero_slider_content')) {
                the_row();
                    
                $herovideo = get_sub_field('add_resorts_hero_slider_video');
                $heroimage = get_sub_field('add_resorts_hero_slider_image');
                $heroimgsize = 'hero-image';
                $heroimg_array = wp_get_attachment_image_src($heroimage, $heroimgsize);
                $heroimg_url = $heroimg_array[0];

                    if( get_row_layout() == 'resorts_slider_video' ) {
                        
                    echo '<li class="video orbit-slide">';
                    echo '<img class="background" src="http://localhost.com/vail/tier2-hero-placeholder.jpg" />';
                        
                       echo '<div class="container">
                        <div class="watermark"></div>
                        <iframe id="heroorbitslider-video"
                          src="'. $herovideo .'"
                          width="100%" 
                          frameborder="0" 
                          scrolling="no" 
                          allowFullscreen="true" 
                          allowFullScreen="true" 
                          webkitAllowFullScreen="true" 
                          mozAllowFullScreen="true">
                        </iframe>
                        </div>';
                        
                    echo '</li>';
                    }
                    
                    elseif( get_row_layout() == 'resorts_slider_image') {
                        
                        echo '<li class="orbit-slide">';
                            echo '<img class="background "src="'. $heroimg_url .'" />';
                        echo '</li>';
                    }

                }

            }

    }

}

?>
<!--END ORBIT SLIDE-->