Support

Account

Home Forums Add-ons Repeater Field Repeater Data in Row Instead of Column

Solved

Repeater Data in Row Instead of Column

  • Hey folks,

    Sorry if this question has been asked, I looked but couldn’t find anything.

    What I am trying to accomplish is this …

    – I have a repeater with things such as image, title, textarea, etc. These all showed up on the frontend.
    – I have three items within that repeater and again they all show up, but in a list/column and not in a row. I have tried both with Bootstrap flexbox and also with CSS Grid, but the outcome is the same.
    – I am not an expert when it comes to ACF, so I am thinking it might be me doing something wrong there.
    – My setup: I have a custom template file; assigned a page to that template; then applied the field group to that template.

    Below is the code that I have added to my template file.

    <?php
    
        if (have_rows('event')) :
    
            while (have_rows('event')) : the_row();
    
                if (get_sub_field('event_rsvp_link_or_email') == 'Link') {
                    $rsvp_link = get_sub_field('event_rsvp_link');
                } else {
                    $rsvp_link = 'mailto:' . get_sub_field('event_rsvp_email');
                }
    
        ?>
    
                <div class="wpbf-grid">
                    <div class="wpbf-medium-1-3">
                        <?php
                        $image = get_sub_field('event_image');
                        if (!empty($image)) : ?>
                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                        <?php endif; ?>
    
                        <h4><?php the_sub_field('event_title'); ?></h4>
                        <p>
                            <?php the_sub_field('event_date'); ?> at
                            <?php the_sub_field('event_start_time'); ?>
    
                            <?php if (get_sub_field('event_end_time')) {
                                echo ' until ';
                                the_sub_field('event_end_time');
                            }
                            ?>
                        </p>
                        <p><?php the_sub_field('event_description'); ?></p>
                        <p><a href="<?php echo $rsvp_link; ?>">RSVP</a></p>
                    </div>
                </div>
    
        <?php endwhile;
    
        else :
    
            echo '<p>Sorry there are no events at this time</p>';
    
        endif;
    
        ?>

    I appreciate any feedback. Cheers =)

  • Whatever your row container is, it needs to be outside of the loop. I don’t know how the grid css works in the code you posted so I will give an quick example using bootstrap

    
    if (have_row('repeater')) {
      ?>
        <div class="row">
          <?php 
            while (have_rows('repeater')) {
              the_row();
              ?>
                <div class="col">
                  // output column content here
                </div>
              <?php 
            }
          ?>
        </div>
      <?php 
    }
    
  • Hey John,

    Thanks for the quick reply, I will give this a go and let you know.

    Cheers

  • Hey John,

    Gave it a try and works like a charm, many thanks again! =)

    Cheers

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

You must be logged in to reply to this topic.