Yes, it is.
Assuming you know how to create a child theme (there’s a short tut on Customizr’s FAQ list on their website), add this code in your child theme’s functions.php:
add_shortcode('tc-my-thumb', 'tc_my_post_thumbnail');
function tc_my_post_thumbnail($atts) {
extract( shortcode_atts( array(
'size' => 'medium',
'class' => 'my-thumb-class'
), $atts ) );
ob_start();
echo '<div class="'.$class.'">';
if ( has_post_thumbnail() ) {
the_post_thumbnail($size);
}
echo '</div>';
$output = ob_get_contents();
ob_end_clean();
echo $output;
}
Now, all you have to do is add [tc-my-thumb] in your posts, where you want the thumbnail. You can choose one of the default sizes (thumbnail, small, medium, full or x,y (in pixels); more on this here) and you can also wrap the thumb in your class of choice, using the following syntax:
[tc-my-thumb size=”medium” class=”my-thumb-class”]
The thumb is wrapped in a div.my-thumb-class by default but you should replace that generic name with class names of your own, depending on how many sizes of thumbs you want to display site-wide, and style them to your liking.
If you want the bubble effect on the thumb you’ll want to change the lines:
if ( has_post_thumbnail() ) {
the_post_thumbnail($size);
}
with:
do_action( '__post_thumbnail' , $size );
in the function above, but in this case you’ll have to define your own .my-thumb-class .round-div classes in CSS or you might see some corners (get inspired from first page or the posts lists).
On further testing I realized my solution only works on pages if you want the circles effect, not on single posts or custom post types.
Played with it a bit, realized where the limitation is from and here’s the working solution. Again, it’s your job to build the custom CSS around your classes to make it display the way you want.
So, in case you want the featured image anywhere in your post with the circle effect on mouse over, replace the code i posted above, in functions.php of your child theme with:
add_shortcode('tc-my-thumb', 'tc_my_post_thumbnail');
function tc_my_post_thumbnail($atts) {
extract( shortcode_atts( array(
'size' => 'medium',
'class' => 'my-thumb-class'
), $atts ) );
ob_start();
echo '<div class="'.$class.'">';
if (is_page()) {
do_action( '__post_thumbnail' , $size );
}
else {
echo '
<div class="tc-thumbnail">
<div class="thumb-wrapper">
<a class="round-div" href="#" onclick="return false;" title="'.get_the_title( get_the_ID()).'"></a>';
the_post_thumbnail($size);
echo '
</div>
</div>
';
}
echo '</div>';
$output = ob_get_contents();
ob_end_clean();
return $output;
}
and use [tc-my-thumb] with the class and size attributes, as above.
@batman77 Can’t you just add it with the Add Media button?
Alternatively, if it’s the first image in the post, you don’t even need to set it up as a featured image. Customizr will pick it up automatically (however, for best results, it needs to be 270×250).
I had this problem too. I tried ElectricFeet’s suggestion to add it with the Add Media button but the result was double images in each post (one full size and one circle-effect). So I have been trying for about two weeks to find a way to show full sized images and turn off the default ‘featured’ effect in my posts. I like the featured effect but if I have to choose between the two then I’m going with the full image because that’s what I think a post page should display.
I ended up adding a gallery program that (by chance) stopped the default on each individual post page but my archives section is still cluttered with double images. If I come up with anything through trial and error I’ll let you know.
The simple way of adding the featured image to the post is to add the result of
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
into it. Everything else I did (in the first answer) was feed the function size and class arguments.
You either create a shortcode and add it in functions.php, as I did above, or you install a plugin that allows you to input php in your post. Full documentation here.
Thank you acub and everyone for all your ideas and really quick and thorough input! I have to run off to work, but I look forward to trying these solutions out later today.
Now, all you have to do is add [tc-my-thumb] in your posts…
Now I’m awake, I just realised what you did there. Neat! Thank you.
