Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
36

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!

https://gist.github.com/surefirewebserv/4f921713bf11a7479e59

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.

https://gist.github.com/surefirewebserv/1d592bcdb69437dda0d2

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.

https://gist.github.com/surefirewebserv/8826c0e565b426c883ee

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!

https://gist.github.com/surefirewebserv/1bfc466cea75a0b52bdd

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:

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!

Using TimThumb to Edit the Featured Image Size

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

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

36 comments on Using the Genesis Featured Image

  1. Paul says:

    thanks, I was also expecting a filter of some sort

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

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

    1. 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…

  3. Kevin Lloyd 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.

    1. Jonathan says:

      You, my friend, are awesome! Thank you for the clarification!

  4. Shanna says:

    Cool…Thanks! Also I love the way your post date slides out when you hover over the title. Did you do that with JavaScript?

    1. Jonathan says:

      Yup, just a little bit of jQuery. All the other transitions like links, etc are CSS3. I’m actually getting this theme together to sell it in my upcoming market place =). Keep an eye out!

      1. Shanna says:

        Awesome…Thanks

  5. Keith 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

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

      1. Keith says:

        Jonathan, thanks for the reply. That box is not checked. ???????

        1. Jonathan says:

          hmmmm…. send a link to the site and paste the code in your function file. I’ll take a look for you =)

        2. Jonathan says:

          Sorry, the box should be checked.

  6. Kingsley says:

    Hi thanks for this tutorial but its not working for me.

  7. Shari Miller 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!

    1. 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.)

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

    1. mike says:

      oops, looks like the code was filtered. Be happy to explain via email if you don’t catch it.

      Mike

    2. Jonathan says:

      Nice Catch!! Fixed it, thanks for the info!!

  9. Vivek 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.

  10. 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!

    1. Jonathan says:

      Thanks for the insight Suzy, I’ll look into this more and try to get a definite answer.

  11. //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 ??

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

    2. Jonathan says:

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

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

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

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

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

  14. Joe W says:

    Thank you very much, I was starting to get a bit desperate here. :s

  15. hiren says:

    nice tutorial i currently used thesis for my website but now i think to change and used genesis. thanks for sharing.

  16. Jim says:

    && should be actual ampersand.
    Also, the gt is the actual great than sign.
    Probably happened when you copied the text.

    Thanks for taking the time!

Leave a Reply

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

Scroll to top