Featured Image

PLEASE NOTE: This tutorial is for Html5 Genesis templates only. You can use it on XHTML Genesis templates, but you need to look up the correct Genesis XHTML hook.

Sometimes what seems the easiest task to complete is the most time consuming. The “Featured Image” scenario was just that for me the other day.

YES……I know there is a plugin in for that, but my thoughts on plugins is this, they should be added as an extension to the functionality of the website not an enhancement to the design of the website, add a plugin in to a website only if it brings value to the site and extends the usability of it and can transfer that usability if you decide to change themes.
A plugin that inputs a design process….mmmmmmm…..how will that design look on another theme? Well you could alter the CSS but then isn’t that defeating the object of having a plugin.

Anyway “RANT” over… back to featured images and my problem, after searching, I found several links that provided an answer, but they required a paid subscription to view them, I am extremely tight fisted, but I found one link that provided the code to display a Featured Image on top of the post. But with using Genesis I found that this “Featured Image” could be placed anywhere on the page utilizing their Hook functions.

So onto the code.
Fistly ensure your theme supports “thumbnails”, you can do this by scanning your functions.php file and looking for the following code:

add_theme_support( 'post-thumbnails' );

if you dont see it then copy and paste it into the file.
Next you need to add your image sizes. The add_image_size(); function has 4 parameters.

add_image_size($name, $width, $height, $cropBoolean);

$name is the name that you want to call your image with.

$width is the width you want the image to crop to in pixels.

$height is the height you want the image to crop to in pixels.

$cropBoolean is a true or false parameter. If set to true the image will crop itself automatically.

In the example below, the name I use to call the cropped image is “croppedFI”. The height and width are 250px and 200px respectively, and the image is set to crop.

add_image_size('croppedFI', 250, 200, true);

You can find your default image size in the WordPress Admin page under Settings > Media. The default WordPress image sizes are as follows:

thumbnail
medium
large
full (original size of the image when you upload it)
Furthermore, it is likely that your Genesis theme has custom image sizes. To find out what these are, open your themes function.php and search for add_image_size.

You can also add your own “Customized image sizes if you wish.
For example:

//* Add new image sizes
add_image_size( 'home-mini-sq', 150, 150, true );
add_image_size( 'featured-middle', 332, 190, true );
add_image_size( 'footer-bottom', 700, 400, true );

Now all you need to do is reference this inside your function and your image will get cropped for you, so no more “HiggledyPiggledy” sized images all over the place.

Lets start to add what we have learnt into our theme.

To add a Featured Image to both a Single post and a page, just add the following code to your theme’s functions.php file:

add_action( 'genesis_entry_content', 'your_prefix_featured_image', 5 );
/**
 * Show Featured Image on post and pages and a CPT if you got one (add to the array)
 */
function your_prefix_featured_image() {
	if ( ! has_post_thumbnail() || ! is_singular() ) return;
		
	$caption = get_post( get_post_thumbnail_id() )->post_excerpt;
	
	if (  is_singular( array( 'post', 'page' ) )  ): 
	
		if ( ! empty( $caption ) ) :
        	$caption = sprintf( '<figcaption>%s</figcaption>', $caption );
		endif;
 		$image = genesis_get_image( array(
			'format'  => 'html',
			'size'    => 'featured-image',
			'context' => '',
			'attr'    => '',
 		) );
 	
 		printf( '<figure class="featured-image-class aligncenter">%s%s</figure>', $image, $caption );
	endif;
}

Updated code Courtesy of Christina Arasmo Beymer

The code above will allow you to add a featured image to a single post or page. Note that this will not affect the blog page featured images sizes. Furthermore, you need to specify the Featured Image on writing your post or page for this to take effect, if you don’t assign one then the space will just collapse in and content will move into the assigned space.

Featured Image Code Options

Featured Image Only on Page

Replace this:

if (  is_singular( array( 'post', 'page' ) )  ):

With this:

 if ( !is_singular( ‘page’ ) return;

Featured Image Only on Post

Replace this:

 if ( !is_singular( array( ‘post’, ‘page’ ) )) return;

With this:

 if ( !is_singular( ‘post’ ) return;

Simple really when you think about it !

The code belows also adds the Featured Image to the Portfolio Category as well as the single page and post, it also displays the image on top of the title:

//* Code to Display Featured Image on top of the Title *//

add_action('genesis_before_entry', 'your_prefix_featured_image', 5);

What if you want the image below the title, just swap out the line and hey presto!

//* Code to Display Featured Image after Title *//
add_action( 'genesis_entry_content', 'your_prefix_featured_image', 5 );