Support

Account

Home Forums Add-ons Repeater Field Loop through repeater rows

Solving

Loop through repeater rows

  • Hello! I am using a repeater field on a category page of a website. In the dashboard, several images are added to the category page using a repeater field. I would ideally like to loop through these images in order, with one appearing next to each of the category’s child pages.

    I’ve gotten semi-close to what I’m looking for by getting a random row, as you can see here: http://zolab.org/research/emergency-care/

    However, as I would like the images to stay consistent upon page refresh and also not have the same image appear two times in a row, I’d love to be able to somehow loop through the repeater fields in order, and only have them repeat once all images have been used.

    Here is my current code:

    <!-- For each child page -->
              <?php $this_page_id=$wp_query->post->ID; ?>
              <?php query_posts(array('showposts' => 20, 'post_parent' => $this_page_id, 'post_type' => 'page')); while (have_posts()) { the_post(); ?>
    
                <!-- Get a random image -->
                <?php 
                  $rows = get_field('project_images', $this_page_id ); // get all the rows
                  $rand_row = $rows[ array_rand( $rows ) ]; // get a random row
                  $rand_row_image = $rand_row['image']; // get the sub field value 
                ?>
                  
                <hr>
                <a href="<?php the_permalink(); ?>">
                  <div class="research-project cf">
                    <div class="col-xs-2" style="padding-left:0;">
                      <img style="max-width:100%;" src="<?php echo $rand_row_image; ?>" /> 
                    </div> <!-- /.col-xs-2 -->
                    <div class="col-xs-10">
                      <strong><?php echo get_the_title(); ?></strong><br>
                      <?php the_field('project_description'); ?>
    
                    </div> <!-- /.col-xs-10 -->
                  </div> <!-- /.research-project -->
                </a>
              
              <?php } ?> 
              <!-- End of child page query -->

    Thank you for your help!

  • Hi @joverbey,

    There’s some clarification needed here.
    First of it seems you’re not actually talking about category pages but rather regular pages in wordpress (you’re querying page post_type).
    Second, why are you not simply putting these images in the respective child page? Maybe even as featured image since that seems to be what you want it to be used as.

    Some other notes that may be good to know:
    * Don’t use query_posts. You’ll only be messing with the main query in a bad way. Instead create a new query with wp_query. https://codex.wordpress.org/Class_Reference/WP_Query
    * Try to avoid inline styling of elements. Put this in your style.css instead
    img{ max-width: 100%; height: auto; }

  • Hi Jonathan,

    Thank you for your help.

    Yes, the parent pages are not true WordPress category pages but regular pages that will display each of their child pages; sorry for the confusion.

    I will be handing over this site to a client, and would prefer not to have them manually input a featured image each time they create a child page, but rather have one of several pre-loaded images display next to the child page name and description on the parent page.

    The query_post code came from a post on selecting random repeater fields I came across – I am certainly open to other methods, but am just not sure how to achieve what I’m looking for. I also plan to remove my inline CSS – was just there for quick testing purposes.

    Thank you!

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

You must be logged in to reply to this topic.