Using the Genesis Featured Image


I decided to write this post because I wanted a way to align my featured image to the right by changing the default class from “alignleft” to “alignright”. I figured it would be simple enough to do. I probably just had to add a filter to a featured image hook or something along those lines.

OMG, I was so wrong.

First thing I realized was that the Genesis Framework doesn’t have a specific filter for the Featured Image. You can add an image in your post and have Genesis pull the first thumb. But when you activate the featured image in the Genesis settings, all you can do is change the size.

Yes, I can add a style in my style sheet to override the alignleft class, but my anal coding tells me “NO, there has to be a better way”.

First thing I had to remember is that the Genesis Framework is still WordPress. Well duh! But, with all the hooks and filters and functions that are included in the framework, sometimes I forget that I can always go back to the basics.

Genesis doesn’t have a filter that directly affects the featured image on the post but WordPress does!

has_post_thumbnail();
the_post_thumbnail();
get_the_post_thumbnail();

Sometime the solutions can take so long to get to, but in the end, they’re so simple!

The Solution to using the Genesis Featured Image

First add the image size to your functions.php file.

/** Add new image sizes */
add_image_size( 'post-image', 150, 150, TRUE );

Quick Explanation: post-image is the reference to the size, 150 is the height and width, TRUE means to crop the image.

Now add the action.

/* Manipulate the featured image */
add_action( 'genesis_post_content', 'ibfy_post_image', 8 );

Keep in mind that the featured image is within the post content. So we’re adding our new function to the genesis_post_content hook.

Now the meat!


function ibfy_post_image() {
global $post;
	if ( is_page() )
		return; // Make pages act normal

	//setup thumbnail image args to be used with genesis_get_image();
	$size = 'post-image'; // Change this to whatever add_image_size you want
	$default_attr = array(
			'class'	=> "alignright attachment-$size $size",
			'alt'	=> $post->post_title,
			'title'	=> $post->post_title,
		);

	// This is the most important part!  Checks to see if the post has a Post Thumbnail assigned to it. You can delete the if conditional if you want and assume that there will always be a thumbnail
	if ( has_post_thumbnail() && is_home() ) {
		printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), genesis_get_image( array( 'size' => $size, 'attr' => $default_attr ) ) );
	}

}

Here’s a little explanation on what I discovered printf() is. Basically you put in your code with little tags like %s, which just means “string”. There’s also %d which means return an integer. This is almost exactly the same as sprintf(). I’m not sure what the difference is Thanks to Kevin Lloyd, I finally do understand the difference, and it’s used with Genesis, quite often actually so it’s good to start to understand how to use it.

Each %s gets the value from the properties after the quotes IN ORDER. So in the code above, ‘href=”%s”‘ gets the first property which is “get_permalink()” and so on.

The genesis_get_image() function will now return the featured image with the attributes we set at the beginning! You can now manipulate the Genesis Featured Image however you want. Add classes, change alignment, go nuts!!!

Here’s the full code to copy:

/** Add new image sizes */
add_image_size( 'post-image', 150, 150, TRUE );

/* Manipulate the featured image */
add_action( 'genesis_post_content', 'ibfy_post_image', 8 );
function ibfy_post_image() {
global $post;
	if ( is_page() )
		return; // Make pages act normal

	//setup thumbnail image args to be used with genesis_get_image();
	$size = 'post-image'; // Change this to whatever add_image_size you want
	$default_attr = array(
			'class'	=> "alignright attachment-$size $size",
			'alt'	=> $post->post_title,
			'title'	=> $post->post_title,
		);

	// This is the most important part!  Checks to see if the post has a Post Thumbnail assigned to it. You can delete the if conditional if you want and assume that there will always be a thumbnail
	if ( has_post_thumbnail() && is_home() ) {
		printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), genesis_get_image( array( 'size' => $size, 'attr' => $default_attr ) ) );
	}

}

Last thing to remember is to disable “Include the Featured Image?” under the Genesis Content Archives settings.
If you know a different way or a better way, please share!

If you have an image in your post along with a featured image and you’re seeing two images on the homepage before they get into the article, check out this post to fix: Duplicate Featured Image on Post and HomePage Fix

Resource: I borrowed some code from a wpsmith tutorial on something totally different, thanks!

Alternative way to edit the featured image

So I just discovered another way to edit the file, which is so much easier! Here’s the code!

/** Change the featured image */
remove_action( 'genesis_post_content', 'genesis_do_post_image' );
add_action('genesis_post_content','ibfy_post_image', 0) ;
function ibfy_post_image() {
	if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {
		$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'alignright post-image' ) ) );
		printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	}
}

Using TimThumb to Edit the Featured Image Size

Have your image hard cropped so that it’s always the same size.

/** Change the featured image */
remove_action( 'genesis_post_content', 'genesis_do_post_image' );
add_action('genesis_post_content','surefire_post_image', 0) ;
function surefire_post_image() {
    if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {
        $img = genesis_get_image( array( 'format' => 'url') );
        printf( '<a href="%s" title="%s"><img src="%s/path/to/your/timthumb.php?src=%s&w=225&h=160" /></a>', get_permalink(), the_title_attribute( 'echo=0' ),get_stylesheet_directory_uri(),$img );
    }
}

I host with WPEngine because it's freakin' amazing!

Comments

    • Jonathan says

      It would’ve been so easy… In any case, I find that the second method listed is the best way to go, but the first is great for full customization.

  1. says

    You second option is much more efficient and really the best way to go until such a time as a filter is added to allow this change to be made more efficiently.

    I would recommend it over timthumb for performance reasons (with the built into WordPress image sizing the images are sized once and not every time they are called and the cache is empty). It also minimizes outside code that has to be maintained.

    On that last point, I think we are all familiar with the big security issue TimThumb went through a few months ago. They actually were on top of things but the vulnerable code was in millions of sites and could be exploited even if the theme or plugin wasn’t active. Since code has to be maintained this made for a security nightmare. By using the built in WP functionality, you just need to upgrade WP to maintain the code and thus improve security.

    In any case, the code looks good. I especially like teh progression to simpler code as you learned a better way to do it.

    • Jonathan says

      Thanks so much for the feedback. I’m definitely familiar with the TimThumb hack, it haunted me for a few weeks. The only thing I don’t like about the wordpres image resize is the crop that it does. If the image you use isn’t proportional to the dimensions your using for your featured image, it won’t do a true crop.

      Maybe a compromise would be to host your timthumb script off site and use the wordpress core as a backup…

  2. says

    To answer your question:
    printf() will actually output the text like echo does.
    sprintf() (I assume that’s what you meant) will return a string that you can stuff into another variable and use later.

  3. says

    Trying this in the functions file of the Fabric child theme with no results. I know I’m doing something wrong and should probably go to bed and look at it in the morning. I even tried to simply use remove_action( ‘genesis_post_content’, ‘genesis_do_post_image’ ); and still nothing. And by nothing, I mean the site acts as though I haven’t changed a thing. I too and simply trying to remove the left align.

    OK, I’m going to bed and will look at it in the morning. Maybe one of you fine and outstanding folks will offer me some advice that will make my morning.

    Thanks, Keith

    • Jonathan says

      Hey Keith, one thing I noticed is the Genesis Admin will sometimes override your functions. Go into the Genesis Admin settings and make sure the “Show featured Image” box is unchecked in the blog archive section. See if that makes a difference.

  4. says

    Hi there! Super happy to run across your post after some pretty fruitless searching. I am NOT a php person, at all, and I have the code pasted in the functions file of my child theme. But I am still getting the featured post images aligned left (and right, on Firefox) go figure. I would love to do away with the featured posts widget altogether, quite frankly. I would like to be able to post 2 (or more images) without having to deal with the Featured Post stuff.

    I do have the included Featured Post Image turned off. Thanks for any direction, kind of a n00b!

    • Jonathan says

      What exactly are you trying to do? Remove the featured image? add multiple images? This is something that may need to be looked into further (like diving into the code, what plugins are being used, etc.)

  5. mike says

    Great post, thanks for sharing your knowledge. I came across a bug in you post in ‘the meat’ section. The line below has the title and href attributes transposed. The printf statement puts the permalink in the title tag and the title tag in the href.

    printf( ‘%s‘, get_permalink(), the_title_attribute( ‘echo=0′ ), genesis_get_image( array( ‘size’ => $size, ‘attr’ => $default_attr ) ) );

    Reversing them fixes the problem.

    printf( ‘%s‘, get_permalink(), the_title_attribute( ‘echo=0′ ), genesis_get_image( array( ‘size’ => $size, ‘attr’ => $default_attr ) ) );

    Thought you might want to know. I really do appreciate sites like this with helpful snippets, thanks again!

    Mike

  6. says

    Well that was a great tutorial, but I want my homepage featured image to be in center rather than aligned to left and right. Is their any way to do so. Please kindly help me.

  7. suzyo says

    What Vivek said! I got this to work inasmuch as the text moved underneath the image, but changing to aligncenter didn’t budget the image.

    When I unchecked the use featured image box in content archive, the image disappeared. So, obviously, the code is not affecting the image, BUT IT DID affect the text, which was crawling up the side of the image before.

    As you know, I’m using your theme. Thank you!

  8. says

    //setup thumbnail image args to be used with genesis_get_image();
    $size = 'post-image'; // Change this to whatever add_image_size you want
    $default_attr = array(
    'class' => "alignright attachment-$size $size",
    'alt' => $post->post_title,
    'title' => $post->post_title,
    );

    Is there any way to center align the features images. I can use CSS to adjust the width of the container, but then I will have to modify the complete media query so as to make it perfect.

    Thanks in advance.. And how can I subscribe to the comments ??

    • Jonathan says

      HI Vivek, no subscribe to comments yet. I’m trying to decide what I’m going to do with the comments, maybe just for members, or public, I’m not sure yet but I’ll know soon enough.

      To answer your question, just change the class to aligncenter 'class' => "alignright attachment-$size $size", to 'class' => "aligncenter attachment-$size $size",. That should work.

    • Jonathan says

      I just tried the “Alternate Method” code with aligncenter and it seemed to word perfect on mine. Perhaps there’s something conflicting?

  9. says

    The second code snippet: Does this go in the actual template file, or in the functions.php file? Also, using the second example, do I still need to declare image size in functions.php? I tried using it and I can’t get anything to appear. I put the snippet in both my template (single-custom_p_t.php) and in my functions.php file, but no dice. I also updated the Loop Hooks to work w/ Genesis 2.0 and I still can’t get it to work. Seems I may be having the same problem Keith was having. My site is hosted locally, so I don’t think I can link to it, but maybe some clarification on what goes where may be what I need.

    • Jonathan says

      Hi Nathan,

      It would generally go in your functions file since we’re using the WordPress Conditional statements. That image size snippet is reading the size from the Genesis Options page. So it basically tells it to see what size is set in the Genesis Options page and uses that. Also, I made a mistake on Keith’s posts and the box should be checked, not unchecked.

      If your using this on a custom post type, you may need to add the CPT conditional as well is_post_type_archive( $post_type ) also explained in the link above.

  10. says

    When I say I put the snippet in both, I didn’t mean simultaneously :) I tried it in both places using various combinations and wasn’t having any luck. I would declare the image sizes in the functions.php file and put the snippet in my template after the remove_action(‘genesis_entry_header) hook. Then, I tried putting all of the code in the functions.php file (add_image_size and the hooks w/ your function.) I also tried deleting the featured image in my post and then I re-uploaded it. I also made sure the box was unchecked for the featured image setting in the Genesis Theme settings from the Admin.

    • Jonathan says

      Hi Nathan,

      What exactly are you trying to do? Are you trying to edit the alignment of the featured image? If so, Genesis 2.0 introduced the attribute hook and Bill Erickson made a post specifically for the image alignment:

      http://www.billerickson.net/genesis-featured-image-alignment/

      That will help if that’s all your looking to do. The code I created though definitely allows more flexability with the image, but it all depends on what your looking to accomplish.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>