Forum

Thread tagged as: Question

Can you use Repeaters with Modals - how do pass a different modal number?

v-3.1.1 I need to have an area with unknown number of modals for a gallery. How do you pass the new modal id to the modal.

Carol Swinehart

Carol Swinehart 0 points

  • 3 years ago
Simon Clay

Simon Clay 127 points

Hi Carol, that should be possible. Can you show the code final html you're trying to achieve?

I am having trouble visualizing how to past the unique modal identifier.

Simon Clay

Simon Clay 127 points

You can use: <perch:content id="perch_item_index" type="hidden">. If you can show example code of the modal, we can help with how to implement it.

Coding for gallery is not working. Modal image does not show up. First set of code is for page and second set for gallery template ~~ <?php perch_content('gallery'); ?>

<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content">

  <div class="modal-body">

   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>        

            <img src="//media.tenor.com/images/556e9ff845b7dd0c62dcdbbb00babb4b/tenor.gif" alt="" id="image" class="img-fluid">

~~ Gallerytemplate.html ~~ <perch:before> <div class="gallery"></perch:before> <img src="<perch:content type="image" id="image" lable="Image" width="200">" alt="<perch:content type="text" id="alt" label="Description" required help="e.g. Photo of MD John Smith with his best wig on" title>" title="<perch:content type="text" id="alt" label="Description" required help="e.g. Photo of MD John Smith with his best wig on" title>" data-toggle="modal" data-bigimage="<perch:content type="image" id="image" label="Image" width="800"><perch:content type="image" id="image" label="Image" width="600">" data-target="#myModal" class="img-fluid"> <perch:after></div></perch:after> ~~

So when I get this part to work there is a glitch that is not allowing the second image to show up. This is really the first image larger so only one image has to be put in. In a repeater, how am I going to label id=image to be different images and data-target="#myModal" to be different for each entry Could be up to 75 entries.

Simon Clay

Simon Clay 127 points

So that is outputting the code wrongly. What is the output you want. We can work backwards from there.