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.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.