inFocus WP Theme: Display Blog Post Images on Single Blog Post Pages
In a recent blog comment I was asked if I happened to know why the inFocus theme doesn’t display blog post images on single blog post pages. I too had noticed this when adding images to my blog posts and assuming this was, for whatever reason, how the developer intended it to be thought no more of it.
However, looking at the code it seemed simple enough to add this ability. You can see the quick-and-dirty fix here or read on for what is perhaps a cleaner solution.
Firstly, you should know that I don’t use portfolio pages on this site. As such, I can’t guarantee that this solution will not break the current functionality for those who do. However, I’ve attempted to tailor this solution to cater for both single portfolio pages and single blog posts. Secondly, I’m currently using inFocus v1.3 which is not the latest version. So, I don’t know if this solution will work with any version later than v1.3.
That said, open lib/includes/template-single.php and locate the code block that begins on or around line 177 with <div class="top_metadata"> and ends on or around line 184 with </div>.
Immediately below this code insert the following code block:
<?php
$post_image = get_post_meta($post->ID, 'post_image', true);
$post_image = webtreats_image_resize($height='234', $width='612', $post_image);
?>
<?php if ($post_image) { $counter++; ?>
<div id="image_loader_<?php echo $counter; ?>">
<div class="blog_frame">
<div class="loading_blog"></div>
<a class="load_blog_img" title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">
<span class="rm_portfolio_img noscript"><img src="<?php echo $post_image; ?>" alt="" /></span>
</a>
</div>
</div>
<?php } ?>
That’s really the only change that needs to be made, but you’ll notice that the image fades when you mouse-over it.
To correct this, first add the highlighted line of code to the top of lib/includes/template-single.php:
<?php /* Template Name: Blog Single Template */ //get_header(); require(WEBTREATS_INCLUDES . "/var.php"); $is_portfolio = get_post_meta($post->ID, 'portfolio_full_img', true); $teaser_text = get_post_meta($post->ID, 'teaser_text', true);
The $is_portfolio variable is assigned the name of the portfolio post’s image. It’ll be used later to determine if the page is a portfolio post.
Next, locate the opening <script> tag and add the highlighted code:
<script type="text/javascript">
/* <
Loading ...
tolu
Hi Steve, thanks a bunch for the fix. I want to quickly point out something I noticed: I do not think the fix should go directly below the “top_metadata” div as this will insert the post image somewhere else in the DOM but not in the “entry” div. I feel the code should go into the “entry” div but before a call has been made to the “the_content()” template tag like so:
ID, ‘post_image’, true);
$post_image = webtreats_image_resize($height=’234′, $width=’612′, $post_image);
?>
<div id="image_loader_”>
<a class="load_blog_img" title="” href=”">
<img src="” alt=”" />
Tried it your way but didnt get my post image to show! I did this and bingo!
Thanks again for the great job you are doing here.
Tolu.
Steve
Thanks Tolu
I do not think the fix should go directly below the “top_metadata” div as this will insert the post image somewhere else in the DOM but not in the “entry” div. I feel the code should go into the “entry” div but before a call has been made to the “the_content()” template tag like so…
The code was taken directly from template-blog.php and I placed it in exactly the same place in template-single.php. It’s a descendant of the content div, not the entry div. It works on my install. Not sure why it doesn’t for you.
Regards, Steve.
cgarvey
Nice post, saved me a bunch of time, thanks!
2 minor corrections. First is the closing div you want to place your PHP code after is line 185, not 205 (which is a different div block; one which is only printed for portfolio posts). That might explain Tolu’s issue as well.
The second really minor one is that your line of javascript (“var portfolio..”) is missing a closing ; .. That’s really more pedantic that your post merits, mind!
With those 2 points in mind, your changes worked perfectly for me, thanks!
Steve
cgarvey,
…2 minor corrections
Thanks for catching those.
Regards, Steve.
Richard
On the latest version of infocus, I note that post image only displays in the archives, as an elongated letterbox image. However if you insert an image in the post in the usual way, it shows in proportion as usual. MY guess is that not everyone wants the elongated post image to show in the post page, because of the distortion/proportion problem. The above hack is usful, only if all your images are cut wide and narrow in the first place. Thanks for the tips here, Steve
Steve
Hi Richard,
…Thanks for the tips here
You’re welcome.
Regards, Steve.
Heather
Oh thank you! This worked wonderfully… is there any way you could tell me how to make this work on pages, too?
Steve
Hi Heather,
Glad it worked for you.
… is there any way you could tell me how to make this work on pages, too?
Unfortunately, I don’t think this is possible without some substantial changes. This fix relies on the fact that inFocus allows the URL to the post’s image to be stored as meta data, which it doesn’t for pages.
You could of course simply embed an image within a page, but this wouldn’t give you the same functionality.
Regards, Steve.