Sal B Sal B - 3 months ago 8
PHP Question

WordPress: Query Posts in Modal - Show Title

Scenario: I have a list of links displaying a query from a post type (videos). There's a CTA to view the video which links out to YouTube.

Change: I'm changing the functionality to do a modal/form when the user clicks the CTA button. I'd like to display the title of the video/link inside the modal they just clicked on. I'm stuck on that part as it's only showing the title of the most recent. I also like the asset url (the former direct link) to populate in the hidden form field.

CODE FOR Query of videos



<a name="webinars"></a>
<img class="title-icon" src="<?php bloginfo('stylesheet_directory'); ?>/images/icon_video.png" width="64" height="60" alt="">
<h3>Webinars</h3>
<div class="container container--discover text-center">
<div class="row">
<?php $args = array('post_type' => array('videos'), 'showposts' => 3 ) ?>
<?php query_posts($args); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="asset asset--video col-sm-4">
<a href="#" onclick="ga('send', 'event', 'Video', 'Clicked', '<?php the_title(); ?>');" rel="bookmark" data-reveal-id="formModal"><div class="post" id="post-<?php the_ID(); ?>">
<div class="thumb <?php if ( in_category('enterprise-technology-solutions') ) { ?>thumb--yellow<?php } elseif ( in_category('digital-solutions') ) { ?>thumb--orange<?php } else { ?>thumb--green<?php } ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail("medium"); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumb-default.jpg" />'; } ?></div>
<h5><?php the_title(); ?></h5>
<?php the_excerpt(); ?><br>
<div class="btn btn--black btn--short">View Now</div>
</div></a>
</div>
<?php endwhile; ?>
</div>





CODE FOR MODAL


<div id="formModal" class="reveal-modal">
<div class="contact-form">
<?php $args = array('post_type' => array('videos'), 'showposts' => 1) ?>
<?php query_posts($args); ?>
<?php while (have_posts()) : the_post(); ?>

<h3><?php the_title(); ?></h3>


<form action="...">


<input id="field0" name="firstName" type="text" required pattern="[a-zA-Z]+" placeholder="First Name" />
<input id="field1" name="lastName" type="text" required pattern="[a-zA-Z]+" placeholder="Last Name" />
<input id="field4" name="emailAddress" type="text" required placeholder="Email" />
<input id="field2" name="company" type="text" placeholder="Company" />
<input id="field3" name="title" type="text" placeholder="Title" />
<input id="field5" name="busPhone" type="text" placeholder="Business Phone" />

<input id="field7" type="hidden" name="ViewNow" value="<?php echo get_post_meta($post->ID, 'asset-address', true); ?>" />
<input type="submit" value="Send" class="submit right btn btn--form">


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





Is this even possible with just PHP or would jQuery/JS be the better solution?

Answer

If you want to do it in only PHP, you need separate modal HTML for each of your videos. Your modal target for each link would have to target the specific one for that video, so instead of (I am guessing this is how you target your modal):

<a href=.... data-reveal-id="formModal" ...>

You might try:

<a href=.... data-reveal-id="formModal-<?php the_ID(); ?>" ...>

so that they are all uniquely identifiable.

Then you'd need to loop again, generating all those the modals, with titles and video URLs:

<?php rewind_posts(); // Think you'll need this to have the loop 2x on one page ?>
<?php while (have_posts()) : the_post(); ?>
    <div id="formModal-<?php the_ID(); ?>" class="reveal-modal">
        ...
    </div>
<?php endwhile; ?>  

Obviously that's not very elegant - lots of duplicated HTML, big page size, etc. An alternative is to use Javascript, with just one modal, which you dynamically update depending on the clicked link. You could do that by, say including the data you want to dynamically add to the modal as data with each link:

<a href='' data-video='url-to-video' data-title='video-title' ...>

Then in JS you grab that data and add it to the modal (example code using jQuery):

<script>
    var $title=$('#formModal h3'),
        $input=$('#field7');

    $('a').on('click', function() {
        var title=$(this).data('title'),
            url=$(this).data('video');
        $title.html(title);
        $input.val(url);
        // ... and now code to display your modal
    });
</script>