Support

Account

Home Forums Add-ons Flexible Content Field Flex Content in Repeater

Solved

Flex Content in Repeater

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

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

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

  • 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-->
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.