CODEWITHSUNDEEP
phpwordpressvimeo
this_guy
this_guy

Reputation: 604

Get post meta for different posts in loop

I have a custom post type called 'video' and in that custom post type I have a metabox where a user can paste a vimeo link. I am trying to query the video custom post type's metadata, but the code below is returning the same metadata (vimeo link) for each post even though they are different in the dashboard. I want each post to have it's own vimeo link within the loop. Thanks for the help! Let me know if I need to be more clear on something.

$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);

$the_query = new WP_Query( $args );

echo '<section id="our-work">';

echo '<div class="row-fluid">';

$i = 1;

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

     global $post;
     $vimeo = get_post_meta( $post->ID, '_cmb_test_embed', true );

     $counter += 1;

     if($counter == 4 || $counter == 5 || $counter == 9 || $counter == 10) : 

     echo '<div class="span6">';

     the_post_thumbnail();

     echo '</div>';

     else:

     $thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail_name');
     $vimeo_id = (int) substr(parse_url($vimeo, PHP_URL_PATH), 1); ?>

     <div class="span4">
     <div class="myModalThumbnail"><img src="<?php echo $thumb[0]; ?>"/></div>
     </div>

     <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">
       <iframe src="//player.vimeo.com/video/<?php echo $vimeo_id; ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=cc6f1a" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
     </div>
     </div>

     <?php  endif; 

    // if multiple of 3 close div and open a new div
     if($i == 3 || $i == 5 || $i == 8 || $i == 10) {echo '</div><div class="row-fluid">';}

$i++; endwhile; endif;

echo '</div>';

echo '</section>';

// Reset Post Data
wp_reset_postdata();

?>

UPDATE -

I figured out what is causing the issue. It's the jQuery for the modal. The modal is showing the first posts' link for every post. See example fiddle. Click on the 'Dummy Image' and you will see what I mean. How can I dynamically assign selectors so that each post image shows it's corresponding vimeo link?

Upvotes: 0

Views: 2495

Answers (1)

M Khalid Junaid
M Khalid Junaid

Reputation: 64476

Use get_the_ID()

Retrieve the numeric ID of the current post. This tag must be within The Loop

$vimeo = get_post_meta(  get_the_ID() , '_cmb_test_embed', true );

EDIT Try to initialize as empty when loop starts like

if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
$vimeo_id ="";
$vimeo="";

EDIT Checkout this fiddle

You have assigned id="myModal" to multiple elements but the id attribute in supposed to be unique in html standard once assigned do not use same id for other element instead you can use the class attribute i made some changes in html and also in your javascript see how you can dynamically manage the modal popup for your posts

 jQuery(document).ready(function($) {
     $('.myModalThumbnail').click(function () {
      var modalclass=  $(this).attr('id');
       $("."+modalclass).modal('show');

    });
});


 <div class="span4">
 <div class="myModalThumbnail" id="post-<?php echo get_the_ID();?>"><img src="<?php echo $thumb[0]; ?>"/></div>
 </div>

 <div  class="modal hide fade post-<?php echo get_the_ID();?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 </div>
 <div class="modal-body">
   <iframe src="//player.vimeo.com/video/<?php echo $vimeo_id; ?>?title=0&amp;byline=0&amp;portrait=0&amp;color=cc6f1a" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 </div>
 </div>

Upvotes: 3

Related Questions