solving repetitive html in word press template - php

Question

I would like some help In creating a loop for my WP template.
I have the same div block repeated a few times, the class numbers are different and that's about it.
based of the sample blocks bellow can someone give me a example of how i could wrap this in a loop and change the class numbers ?
code block
If you see bellow some of the class names just differ with the number
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_1') ?>"
alt="<?php the_field('section_3_image_1_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_1'); ?>"
title="<?php the_field('title_1'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_2') ?>"
alt="<?php the_field('section_3_image_2_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_two', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_2'); ?>"
title="<?php the_field('title_2'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_3') ?>"
alt="<?php the_field('section_3_image_3_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_3', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_3'); ?>"
title="<?php the_field('title_3'); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>

Answer 1

<?pho $i=1; if( have_rows('parent_field') ):
while ( have_rows('parent_field') ) : the_row(); ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_' . $i) ?>"
alt="<?php echo get_field('section_3_image_' . $i . '_alt') ?>">
<h3 style="min-height: 150px"><?php echo get_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php echo get_field('link_' . $i); ?>"
title="<?php echo get_field('title_' . $i); ?>"
class="btn btn-lg btn-secondary">
<?php echo get_field('link_text'); ?>
</a>
</p>
</div>
<?php $i++; endwhile; endif; ?>
if you are working with while loop this will work fine.
This ACF field data and your while will work fine as this.

Answer 2

You can do with this code:
<?pho for($i = 0; $i < YOUR_MAX_VALUE; $i++): ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php the_field('section_3_image_' . ($i+1)) ?>"
alt="<?php the_field('section_3_image_' . ($i+1) . '_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_' . ($i+1)); ?>"
title="<?php the_field('title_' . ($i+1)); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link_text'); ?>
</a>
</p>
</div>
<?php endfor; ?>
Remember to set YOUR_MAX_VALUE to the value you need.

Answer 3

if you are working with for loop this will work fine.
<?pho for($i = 0; $i < YOUR_VALUE.length; $i++): ?>
<div class="col-6 col-lg-4">
<img class="mb-3" width="170" height="170" src="<?php
the_field('section_3_image_' . ($i+1)) ?>"
alt="<?php the_field('section_3_image_' . ($i+1) . '_alt') ?>">
<h3 style="min-height: 150px"><?php the_field('text_one', false, false) ?></h3>
<p class="pb-5">
<a href="<?php the_field('link_' . ($i+1)); ?>"
title="<?php the_field('title_' . ($i+1)); ?>"
class="btn btn-lg btn-secondary">
<?php the_field('link'); ?>
</a>
</p>
</div>