Home › Forums › Add-ons › Repeater Field › ACF Repeater with counter
I have a column of buttons as shown below:
<div class="col-lg-2 col-sm-12">
<button type="button" class="btn btn-raised" data-toggle="modal" data-target="#myModal">Cert 1</button>
<div id="myModal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="img/test-report-1.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-raised" data-toggle="modal" data-target="#myModal2">Cert 2</button>
<div id="myModal2" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="img/test-report-1.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I am attempting to use the repeater field to accomplish inserting an image. However if you notice, the Button names increase, as well as the div id modal number. I have come up with most of (what I believe is correct) using the repeater field, but how can I increase the button name number and the modal id number?
<?php if( have_rows('certifications') ): ?>
<?php while( have_rows('certifications') ): the_row(); ?>
<?php $count=1 ?>
<button type="button" class="btn btn-raised" data-toggle="modal" data-target="#myModal">Cert 1</button>
<div id="myModal1" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<?php if(get_field('image')): ?>
<img src="<?php the_field('image'); ?>" class="img-responsive">
<?php endif; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php $count++ ?>
<?php endwhile; ?>
<?php endif; ?>
I need to insert Cert + $count into the button name and div id = modal $count. Is this possible?
Hi @movingsale
You should be able to do it like this:
<button type="button" class="btn btn-raised" data-toggle="modal" data-target="#myModal">Cert <?php echo get_row_index(); ?></button>
<div id="myModal<?php echo get_row_index(); ?>" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
This page should give you more idea about it: https://www.advancedcustomfields.com/resources/get_row/.
I hope this helps 🙂
Hi @James,
I did notice that the image I am uploading with ACF is not being registered. I am grabbing the field of the image as shown in the code above but when I view source on the page, the image is no where to be seen, whats up with that?
<button type="button" class="btn btn-raised" data-toggle="modal" data-target="#myModal">Cert 1</button>
<div id="myModal1" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The topic ‘ACF Repeater with counter’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.