I’m still looking for something similar, the featured image round like on the front page (no need for hoover effect) as a widget in the left sidebar.
Really could use some help please!
Simply want the featured image to appear in a div, sized and centred and round like on the blog list on every post.
Somebody must know how to do this.
add this to your child theme’s functions.php:
add_filter('the_content', 'in_content_thumb');
function in_content_thumb($output) {
global $post;
if (has_post_thumbnail($post->ID) && (is_single() || is_page())) {
ob_start();
the_post_thumbnail();
$image = ob_get_contents();
ob_end_clean();
return '
<div class="thumb-wrapper span3">
<div class="round-div">
</div><span class="round-div"></span>'.$image.'</div>'.$output;
}
return $output;
}
If you want it right aligned, replace “thumb-wrapper span3” with “thumb-wrapper span3 pull-right”. Optionally, you might want to add some left (or right, depending on the floating side) margin to .entry-content .thumb-wrapper through CSS, to have some padding between the content and the thumb.
Thanks!
It didn’t quite work, there is an extra div in that code I think. I did this and it does work:
<?php
add_filter('the_content', 'in_content_thumb');
function in_content_thumb($output) {
global $post;
if (has_post_thumbnail($post->ID) && (is_single() || is_page())) {
ob_start();
the_post_thumbnail('medium');
$image = ob_get_contents();
ob_end_clean();
return '
<div class="thumb-wrapper pull-right">
<span class="round-div"></span>'.$image.'</div>'.$output;
}
return $output;
}
However, I really want the image to the right of the title of the article, not the body of the post. Do you have any idea how to modify this so that on the posts page it appears at the top right, next to the title?
Add the span3 class to thumb-wrapper and you’re done.
That extra div was taken from the post list. However, you’re right: it works without it, too.
Thanks, I just tried that span3, and I don’t know why, but it messes it up. I still don’t have it showing on the top of the page by the title, if you know how, please let me know.
Ok, here it is. However, the thumb will only look good if it keeps the default width/height proportions for featured images in Customizr (270 x 250):
add_filter('the_content', 'in_content_thumb');
function in_content_thumb($output) {
global $post;
if (has_post_thumbnail($post->ID) && (is_single() || is_page())) {
$thumb_data = TC_post_list :: tc_get_post_list_thumbnail();
TC_post_list :: tc_post_list_thumbnail( $thumb_data , 'pull-right' );
echo $output;
}
}
Thanks, I really appreciate your help, I gave that a try, but it just broke the site. I can’t believe how difficult this is, I thought it would be really easy.
Oops. You’re right. Being a test install didn’t check first page 🙂
Here’s the working version.
add_filter('the_content', 'in_content_thumb');
function in_content_thumb($output) {
ob_start();
global $post;
if (has_post_thumbnail($post->ID) && (is_single() || is_page()) && !(is_home() || is_front_page() || is_admin())) {
$thumb_data = TC_post_list :: tc_get_post_list_thumbnail();
TC_post_list :: tc_post_list_thumbnail( $thumb_data , 'pull-right' );
}
echo $output;
$return = ob_get_clean();
return $return;
}
And you can see it at work in here (for a while, at least – it’s a testing subdomain).
Looks good!
Is there a way to move this from the post itself to eg. the left sidebar?
Or in other words, from the functions.php into a widget?
You should start your own topic, PD3EM.
When you do, please give more details on your request. Do you want the post thumbnail in the sidebar?
Thanks Feet!
This is working for displaying it in the posts, but I’d actually like them floated right of the title, not the body of the post. Any ideas?
It’s too much work to make it look good in all cases. Remember it’ a responsive theme. And you got us mixed up. I’m not feet :).
Instead of hooking acub’s code to the_content above, you could try hooking it instead to tc_page_content.
But when you do, you’ll see that this simply shifts the hr and the rest of the content down. It needs much more work to rearrange the page.
I think floated right of the post is a good place to be 🙂
Before giving the last answer I already tried multiple options for achieving what leecrockett wants. The closest result can now be seen on the test site I mentioned earlier and it involves two hooks, one before and one after the heading of the post/page. Here’s the code:
add_action('__before_content', 'header_thumb_start', 0);
add_filter('__before_content', 'header_thumb_end', 200);
function header_thumb_start () {
global $post;
if (is_singular() && !(is_home() || is_front_page()) && has_post_thumbnail($post-ID)) {
echo '<div class="row-fluid"><div class="span7">';
}
}
function header_thumb_end ($output) {
global $post;
echo $output;
if (is_singular() && !(is_home() || is_front_page()) && has_post_thumbnail($post-ID)) {
echo '</div>';
$thumb_data = TC_post_list :: tc_get_post_list_thumbnail();
TC_post_list :: tc_post_list_thumbnail( $thumb_data , 'pull-right span5' );
echo '</div>';
}
}
However, it leaves a space between the heading and the content, as the content is displayed as block and gets displayed under the right floating thumbnail. The workaround for this would be to have the content have a negative top margin and add an empty floating element to it that would prevent the text from being displayed under the thumbnail, but it has to be done for each page width case, using media queries. Too much work, if you ask me.
