ACF Repeater with counter

• movingsale

• September 10, 2016 at 3:15 pm

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?

• James

• September 10, 2016 at 4:04 pm

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 🙂

• movingsale

• September 10, 2016 at 4:17 pm

awesome! thanks James!

• movingsale

• September 11, 2016 at 2:42 am

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>

• James

• September 11, 2016 at 9:37 pm

This reply has been marked as private.