I have a series of repeaters nested inside a parent which show images. The markup for this is a tab based system which shows ones large image and a repeating series of smaller ones.

The issue I have is that when I upload any images, they do not behave as expected. Images usually always display in the first nested repeater loop, and randomly seem to appear in other nested loops. I have no idea what is wrong with my logic, here here my code:

<section id="our-range">
<div class="container">
    <div id="tabs">
        <div class="col-md-4">
            <ul class="menu-side">

                <?php
                // check for rows (parent repeater)
                if( have_rows('our_range') ): 
                while( have_rows('our_range') ): the_row();
                // OPENING LOOP
                if( have_rows('categories') ): 
                while( have_rows('categories') ): the_row();
                // OPENING CATEGORY
                $category = get_sub_field('category');
                $catlink = str_replace(' ', '', $category);
                $description = get_sub_field('description');
                ?>
                <li><a href="#<?php echo $catlink ?>" class="tab-link no-scroll left-menu"><?php echo $category ?></a></li>

            </ul>
        </div>
        <div class="col-md-8">
            <div id="<?php echo $catlink ?>">
            <!-- START TAB -->
                <div class="title-range">
                <img src="<?php echo get_template_directory_uri(); ?>/images/house.png" alt="House Icon">
                <h2><?php echo $category; ?></h2>
                <div class="line"></div>
                </div>
                <?php
                $imagelarge = get_sub_field('gallery_large_image');
                $imagelargeurl = $imagelarge['original_image']['url'];

                $fpimagelarge = get_sub_field('floor_plan_large_image');
                $fpimagelargeurl = $fpimagelarge['original_image']['url'];


                $evimagelarge = get_sub_field('elevations_large_image');
                $evimagelargeurl = $evimagelarge['original_image']['url'];


                ?>
                <!-- START SUB MENU -->
                <div class="col-md-12 text-center">
                <ul class="nav nav-pills center-pills">
                    <li><a class="galleryview"><img src="<?php echo get_template_directory_uri(); ?>/images/camera.png" alt="Camera Icon"> <span>Gallery</span></a></li>
                    <li><a class="floorplan"><img src="<?php echo get_template_directory_uri(); ?>/images/floor-plan.png" alt="Floor Plan Icon"> <span>Floor Plan</span></a></li>
                    <li><a class="elevations"><img src="<?php echo get_template_directory_uri(); ?>/images/elevation.png" alt="Elevations Icon"> <span>Elevations</span></a></li>
                </ul>
                </div>
                <!-- END  SUB MENU -->
                <div class="range-gallery">
                <!-- START RANG GALLERY -->
                <!-- LARGE IMAGE -->
                <div class="row">
                  <div class="col-md-12  no-pad">
                  <a href="<?php echo $imagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $imagelarge['url'];?>" /></a>
                  </div>
                </div>
                <!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('gallery_text'); ?></p>
                <!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
                            <div class="row">
                                <?php 
                                if( have_rows('small_gallery_images') ):
                                while( have_rows('small_gallery_images') ): the_row();
                                $imagesmall = get_sub_field('small_image');
                                $imagesmallurl = $imagesmall['original_image']['url'];
                                ?>
                                <div class="col-md-4"><a href="<?php echo $imagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo $imagesmall['url']; ?>" /></a></div>
                                <?php endwhile; // END ('small_gallery_images') LOOP ?>
                                <?php endif; // if( get_field('small_gallery_images') ): ?>
                            </div>
                </div>
                <!-- END SMALL IMAGE GRID -->
                <!-- END RANGE GALLERY -->
                </div>
                <div class="range-floorplan" style="display: none">
                <!-- START RANG FLOORPLAN -->
                <!-- LARGE IMAGE -->
                <div class="row">
                  <div class="col-md-12  no-pad">
                  <a href="<?php echo $fpimagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $fpimagelarge['url'];?>" /></a>
                  </div>
                </div>
                <!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('floor_plan_text'); ?></p>
                <!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
                            <div class="row">
                                <?php 
                                if( have_rows('small_floor_plan_images') ):
                                while( have_rows('small_floor_plan_images') ): the_row();
                                $fpimagesmall = get_sub_field('small_floor_plan_image');
                                $fpimagesmallurl = $fpimagesmall['original_image']['url'];

                                ?>
                                <div class="col-md-4"><a href="<?php echo $fpimagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo 
                                $fpimagesmall['url']; ?>" /></a></div>
                                <?php endwhile; // END ('small_floor_plan_images') LOOP ?>
                                <?php endif; // if( get_field('small_floor_plan_images') ): ?>
                            </div>
                </div>
                <!-- END SMALL IMAGE GRID -->
                <!-- END RANGE FLOORPLAN -->
                </div>
                <div class="range-elevations" style="display: none">
                <!-- START RANGE ELEVATIONS -->
                <!-- LARGE IMAGE -->
                <div class="row">
                  <div class="col-md-12  no-pad">
                  <a href="<?php echo $evimagelargeurl;  ?>" target="_blank" class="fancybox"><img src="<?php echo $evimagelarge['url'];?>" /></a>
                  </div>
                </div>
                <!-- END LARGE IMAGE -->
                <p class="no-pad"><?php the_sub_field('elevations_text'); ?></p>
                <!-- SMALL IMAGE GRID -->
                <div class="gallery-row">
                            <div class="row">
                                <?php 
                                if( have_rows('elevations_small_images') ): 
                                while( have_rows('elevations_small_images') ): the_row();
                                $evimagesmall = get_sub_field('elevation_small_image');
                                $evimagesmallurl = $evimagesmall['original_image']['url'];
                                ?>
                                <div class="col-md-4"><a href="<?php echo $evimagesmallurl; ?>" target="_blank" class="fancybox"><img src="<?php echo $evimagesmall['url']; ?>" /></a></div>
                                <?php endwhile; // END ('elevations_small_images') LOOP ?>
                                <?php endif; // if( get_field('elevations_small_images') ): ?>
                            </div>
                </div>
                <!-- END SMALL IMAGE GRID -->
                <!-- END RANGE ELEVATIONS -->
                </div>
            <!-- END TAB -->
            </div>
        </div>
        <?php endwhile; // END ('categories') LOOP ?>
        <?php endif; // if( get_field('categories') ): ?>

        <?php endwhile; // end of the loop. ?>
        <?php endif; // if( get_field('our_range') ): ?>
    </div>
</div>
</div>
</section>

Read more here: Issue with nested repeater in WordPress Advanced Custom Fields


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: