Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Erin Manahan
Erin Manahan
20,413 Points
Posted by Erin Manahan
Erin Manahan
20,413 Points

How to use Foundation reveal modal with Advanced Custom Fields custom post types?

I'm using Advanced Custom Fields and all the fields are displaying correctly until I get to the reveal modal for each post, in which I want a video to display, but instead of displaying the correct video for the post it displays only the most current posts' video.

I think it has something to do with the ID that has to be used to make the reveal modal pop up, but I don't know what I need to do to get the reveal modal to associate with each posts individual video. I'm using oEmbed as the field type to embed the video in the modal window.

For example 

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <li>

           <div><img src="<?php the_field('segment_image'); ?>"></div>

           <div><h4><?php the_title(); ?></h4></div>

           <div><p><?php the_field('segment_summary'); ?></p></div>

           <div><a class="button" href="<?php the_permalink(); ?>">View All</a>

           <div><a class="button" href="#" data-reveal-id="myVideoModal">Watch Segment</a></div>

                    <div id="myVideoModal" class="reveal-modal large" data-reveal>

                     <div><?php the_field('segment_video'); ?></div>

              <a class="close-reveal-modal">&#215;</a</div>

          </div>

        </li>

    <?php endwhile; endif; ?>

Any suggestions? Am I not able to use the reveal modal with videos within a custom post type loop?

2 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

If you have a loop of these then and you're calling the modal based on an ID then it's always going to show the first instance of that ID, which would be in the first loop instance.

You may need to remove myVideoModal or add unique IDs (by appending the post ID) in order to get it working properly.

What does your JS look like that is making the modal box work?

Erin Manahan
Erin Manahan
20,413 Points
Erin Manahan
Erin Manahan
20,413 Points

Thank you that worked! I just changed the name of my ID's from myVideoModal to 

<?php the_ID(); ?>

to get them for each post, makes a lot of sense now :)

And I'm just using the JS that's included with Foundation for their reveal modal.

Thank you so much!