Get the featured image url of clicked post

0 Views

How can I display the featured image of a post in a modal along with it’s content.

With the help of a few online threads on similar issues, I tried this:

Read More
<?php
    if ( has_post_thumbnail()) {
        echo '<a href="' . get_permalink($post->ID) . '" >';
            the_post_thumbnail('my_feature_image', array( 'class' => "someName" ));
        echo '</a>';
    }
?>

Which unfortunately returns the same featured image for all posts.

On the same header.php where the modal is found, the following is there (above the modal divs): 

  //on the homepage... check for the post URL...
  //do we have a custom permalink incoming....
  $perma = false; if (isset($wp_query->query_vars['phpost_slug'])) #WHFIX 24/03/2015: 
  $perma = $wp_query->query_vars['phpost_slug'];
  if($perma){
  //we don't want to return a 404
  $wp_query->set( 'is_404', false );
  $phid = get_page_by_path($perma, OBJECT, 'post');
  $postvote = get_post_meta($phid->ID, 'epicredvote' ,true);
  $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $phid->ID ), 'single-post-thumbnail' );

  $pluginfeat = get_post_meta($phid->ID,'phog',true);
  $desc = get_post($phid->ID)->post_content;

link to site: https://goo.gl/30a3QQ [Click on the post’s row to open the modal.]

UPDATE

I tried removing the anchor tags as well as the classes like this and it still isn’t working: 

<?php
    if ( has_post_thumbnail()) {
            the_post_thumbnail();
    }
?>
Post Views: 0

Related posts

1 comment

  1. The element you are changing is only the html wireframe for the onclick handlers to populate, the problem is, it didnt include a image on the original so you need to add that functionality. something like this should work (add to your footer)

    var eventTargets=document.querySelectorAll('.hunt-row');

[].forEach.call(eventTargets, function(t){
    t.addEventListener('click', function(){
        console.log('clicked');
        var img= this.querySelector('img').src;

        //bind new src to modal thumb, this is not ideal as there is only a class rather than a id...

        document.querySelector('.modal-thumb').src= img;

    }, false);
});

    Of course, im not sure how nice it will play with the other click handlers, you may need to remove the default and write your own to populate the model box onclick.

Comments are closed.