CODEWITHSUNDEEP
wordpresstwitter-bootstrapthumbnailspopover
Sinac
Sinac

Reputation: 11694

display thumbnail wordpress in bootstrap popover

How to display thumbnail wordpress in bootstrap popover?

I used the_post_thumbnail but this function inherently echo <img> . The resulting image is not shown in popover

<?php 
if ( have_posts() ) : while ( have_posts() ) : the_post();

/*********display the_post_thumbnail in data-content of popover *********/

echo '<a href="'.get_permalink().'" rel="popover" data-title="'.get_the_title().'" data-content="'.the_post_thumbnail('full').'">';


the_title();
echo '</a>';
endwhile; endif;
wp_reset_query();
?>

Upvotes: 1

Views: 526

Answers (1)

Chris Herbert
Chris Herbert

Reputation: 6285

As you said, the_post_thumbnail() inherently echoes the whole <img> tag, so it will do unexpected things when you echo it. Do this instead:

echo '<a href="'.get_permalink().'" rel="popover" data-title="'.get_the_title().'" data-content="';
the_post_thumbnail('full');
echo '">';

There's a very good chance that you'll now have issues with unescaped double-quotes in the <img> element that Wordpress will give you, so it might make more sense to just get the thumbnail URL:

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
$url = $thumb['0'];


echo '<a href="'.get_permalink().'" rel="popover" data-title="'.get_the_title().'" data-content="<img src=\''.$url.'\'>">';

Upvotes: 1

Related Questions