Custom Post Type : Looper : Click Image to show modal with full content

[FourCandles]

Using Pro 6.4.21 and latest WordPress

I have a Custom Post Type set up as Team Member and am looping over the Team Members and outputting some basic info to a grid. This all works fine.

I’d like to add a modal that opens when the featured image is clicked that shows the full Team Member info. Is this possible using one of these methods?

• Using 1 modal and targeting it to make it load the correct content. I’m guessing some JS would be required but not sure.
• Using a modal per Team Member and have the specific modal open when the corresponding featured image is clicked.

There are only around 10 Team Members so having a modal per Team Member is workable but not elegant.

Thanks!

[ruenel]

Hello @FourCandles,

Thanks for writing in! Using the Loop is already on the right path. You can add the Modal element inside your Loop. Use the featured image as the Modal’s Toggle Icon to launch the modal content and display the display the Team Members Info. A sample element structure could be like this:

Section
   Row - Looper Provider Query Builder (Team Members)
      Column - Looper Consumer
         Modal element
              Headline
              Text

Hope this makes sense.