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