ACF Repeater Fields & Clearfix / Styling when displaying

Question

First time posting, been using these forums as a resource for a while though... Hoping you can help.

I’m scratching my head on a PHP thing & wondered if you might have any ideas

Here’s the situation, ‘backstory’ first;

I'm typically working in Wordpress & Bootstrap. I found some code here that helps me format a post type so I can use a post type as a gallery (for example) and run a clearfix in it to tidy each row as it goes along & stops the images crashing into each other. This is what I've been using

<?php $args=array(
'post_type' => ‘post-name',
'posts_per_page'      => '100',
'orderby'=> 'date', 'order' => 'ASC' );
$my_query = null;
$my_query = new WP_Query($args);

if( $my_query->have_posts() ) {

$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 4 == 0) { ?> 

<div class="row">

<?php }?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php $i++; if($i != 0 && $i % 4 == 0) { ?>

</div>
<div class="clearfix"></div>

<?php } ?>
<?php endwhile;} wp_reset_query(); ?>

As I say, this applies a clearfix div & rights the end of a row when the image might otherwise break the flow of the page. So far, so good. Here’s where the problem comes in.

More recently I've been using a The Advanced Custom Fields plugin's custom ‘repeater’ field (where you can basically just keep piling images into a stack, but they’re not a post type any more in the same way as the above) this is what I'm using to pull that in

<?php if(get_field(‘repeater-field-name')): ?>
<?php while(has_sub_field('repeater-field-name')): ?>

IMAGE / CONTENT THAT REPEATS GOES IN HERE

<?php endwhile; ?>
<?php endif; ?> 

And this works fine too. So, my struggle is basically merging the repeated field code with the clearfix code.

Is there any easy way of modifying the clearix code to include the repeater fields? Is there a better way of doing it?

Any help appreciated, basically.

Thanks!

EDIT - FOR FURTHER INFO, HERE'S THE ACTUAL CODE I'M TRYING TO WORK WITH, IT'S NOT A POST TYPE IN THIS CASE, JUST UTILISING THE REPEATER FIELDS; This is the code I'm trying to get working. It's not a post type, it's a repeater field, so it'll repeat without any styling as per the example above (2nd block of code). So in a nutshell, I'm trying to apply an infinite clearfix (like the 1st block of code, which I use for post types) to the repeater field. I'd been trying to combine the two. Perhaps I'm heading down the wrong path?

<div class="container">
 <div class="row">
  <div class="main_cbrand roomy-100 gallery">

<?php if(get_field('artwork')): ?>
<?php while(has_sub_field('artwork')): ?>

<?php if( get_sub_field('image') ): ?>

<div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
<a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image');             ?>"><img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('title');   ?>" title="<?php the_sub_field('title'); ?>"></a>
  </div>

<?php endif; ?>
<?php endwhile; ?><?php endif; ?> 
</div>
</div>
</div>

Answer 1

Basiclly, you can go the oraganized way ;) - example:

<?php 
$args = array(
    'post_type'     => 'post',
    'posts_per_page'=> '100',
    'orderby'       => 'date', 
    'order'         => 'ASC' 
);
$query = new WP_Query($args);


// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        

        // collect item data
        $pid = get_the_ID();
        $rpt = get_field('some_name', $pid);

        // build repeater data
        $counter = 0;
        $rptData = '';
        if( !empty($rpt) ) {
            foreach($rpt as $item) {

                // 4 condition
                $rtpData .= ($counter % 4 == 0 ? '<div class="row">' : '');
                
                // make what you want with info inside the item here
                $rptData .= '<div class="col-md-3">'.$item['something'].'</div>'; 

                $rtpData .= ($counter % 4 == 0 ? '</div><div class="clearfix"></div>' : '');

                $counter++;
            }
        };


        echo '
        <div>
            <h3>I AM THE WRAPPER</h3>
            <div class="container">
                '.$rptData.'
            </div>
        </div>
        ';
    }
}
/* Restore original Post Data */
wp_reset_postdata();
?>

.
EDIT:
1st. the reason you even need a clearfix is that the .row div isn't the direct parent of those columns. Otherwise, you don't need any clearfix.

2. I don't understand how this works.. 'the_sub_field('image')' are you sure?

3. if you really think about it, different resolutions would have different amount of columns per lines so how would a clearfix help? (see 1st comment)

Nevertheless.. Here goes ;)

<div class="container">
    <div class="row">
        <div class="main_cbrand roomy-100 gallery">

            <?php 
            if(get_field('artwork')){

                $counter = 0;

                while(has_sub_field('artwork')) { 
                    ?>

                    <?php if( get_sub_field('image') ): ?>

                        <div class="col-md-2 col-sm-4 col-xs-6" style="padding-bottom: 20px;">
                            <a title="<?php the_sub_field('title'); ?>" href="<?php the_sub_field('image'); ?>">
                                <img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('title');   ?>" title="<?php the_sub_field('title'); ?>">
                            </a>
                        </div>

                        <?php echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : ''); ?>


                    <?php endif; ?>
                    
                    <?php 
                    $counter++;
                }
            } 
            ?> 
        </div>
    </div>
</div>

You can change how often it appears in this line

echo ($counter % 4 == 0 ? '<div class="clearfix"></div>' : '');