Support

Account

Home Forums Add-ons Repeater Field ACF Repeater with counter

Solved

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 🙂

  • awesome! thanks James!

  • 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>
    
  • This reply has been marked as private.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.