inFocus WP Theme: Display Blog Post Images on Single Blog Post Pages

i

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.

These instructions are only applicable for versions of inFocus up to and including v1.6

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">
/* <![CDATA[ */

	var portfolio = '<?php echo $is_portfolio; ?>';

	document.write('<style type="text/css">.noscript { display:none; }</style>');
	jQuery.noConflict();
	

The JavaScript code needs access to the value of the PHP variable $is_portfolio, so it’s assigned to a JavaScript variable.

 

Next, find the call to the portfolio_img_hover() function:

if(index == ($max-1)) {
	// activate hover class
	portfolio_img_hover();
}else{

portfolio_img_hover() is the function that fades-in/out the image on mouse-over/out.

Replace line 101 with:

if(index == ($max-1)) {
	// activate hover class
	if (portfolio) { portfolio_img_hover(); }
}else{

Now the call to portfolio_img_hover() is only executed if a portfolio image exists. The assumption being that normal blog posts don’t have a portfolio image.

What I’m attempting to do here is stop blog post images fading-in or out while keeping the original functionality for portfolio post images intact.

About the author

A native Brit exiled in Japan, Steve spends too much of his time struggling with the Japanese language, dreaming of fish & chips and writing the occasional blog post he hopes others will find helpful.

8 responses

Leave a Reply to Heather Cancel reply

8 Comments

  • Oh thank you! This worked wonderfully… is there any way you could tell me how to make this work on pages, too?

    • 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.

  • 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

  • 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!

  • 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.

    • 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.

Steve

Recent Comments

Recent Posts