Display Featured Image for Genesis: a New Plugin for WordPress

Display Featured Image for Genesis: a New Plugin for WordPress

There are great themes being released all the time, which do some pretty wonderful things, especially with images. We can show galleries or super large images, do sliders, lightbox effects, etc. There’s also a Featured Image option in WordPress which can be fun, although how it’s implemented varies quite a lot from theme to theme.

The Genesis Framework (affiliate link) supports Featured Images out of the box, and makes it super easy to display them in widgets and blog or category archive pages. Initially, most themes just opted to use the wee tiny thumbnail generated by WordPress. Some themes started adding specific image sizes, primarily for use in specific widget areas, and now you can even use themes which encourage you to use large images.

However, my experience is that sometimes you want a nice big image, and sometimes you don’t, even if you still want to hold on to the ability to use a featured image. So, what’s a girl to do in this situation?

My answer is: write a plugin. Call it “Display Featured Image for Genesis” (because that’s my framework. And I’m super creative with names.).

Display Featured Image for Genesis
This plugin takes a different approach to how we use and display featured images for posts and pages. Instead of simply reusing an image which already exists in the post/page content, the plugin anticipates that you will want to use lovely large images for your featured images, but to do so intelligently. Depending on what you upload, the plugin will:

  • display the image as a backstretch (screen width) image if the image is wider than your site’s Large Media Setting.
  • display the image above your post/page content, centered and up to the width of the content, if your image is larger than your Medium Media Setting (300px by default), and less than or equal to your Large Media Setting (1024px by default).
  • display nothing if your featured image width is less than or equal to your Medium Media Setting, because it’s small, and either already in your content or extraneous to it, at least to my mind.
  • display nothing if your featured image is already displayed in your content (the original image, not a resized version), because that would just be redundant. That’s what’s happening on this post, as a matter of fact.

I’m using this plugin on my site (because I do eat my own dog food). You can see it in action on, for example, my About page, or my recent post on Using Featured Images In Your RSS Excerpts.

The plugin has very little styling of its own, just a wee bit for the backstretch image, so it could theoretically be dropped into any Genesis Framework theme, although I’d definitely experiment first. I did have to make an adjustment to the background of my header area at mobile widths, as it was tucking itself behind the image, but it was a super quick fix. I’ve experimented with it on sites without a header/menu that’s locked to the top of the screen and it’s worked well there, too, although I’ve wanted the backstretch image to be shorter to compensate. The plugin author, I mean, I, wrote in a small setting to accomplish just that, so if your working area is taken up a bit by a header and/or navigation, you can set the backstretch to accommodate that as well.

You can download Display Featured Image for Genesis from the WordPress plugin repository, and I hope you will. And if you do, please please please share a link so I can see what you do with it!

Reader Interactions


  1. Koji says

    Great plug-in! It was just what I was looking for today. It took a bit to figure out that my image needed to be larger than my image width settings, but once I got that down, it works beautifully. I’m trying to figure out if there is a way to center the title of the post within the featured image and to make the title bigger. Thanks again for making this, in my opinion, huge contribution to Genesis and the WordPress community! You are a rock star!

    • Robin says

      Thanks for the kind words! If your image is large enough that it’s doing the backstretch effect, the title should already be appearing over the image, although inheriting the size from your theme’s stylesheet. You can target the entry title with `.big-leader .entry-title` and go from there with modifications. The plugin’s CSS is pretty short and is found in the /includes/css directory of the plugin. Hope that helps!

  2. Miguel travelsauro says

    Hi, thanks for this plugin, it’s exactly what I was looking for.. I have a small issue though… when using a large image and showing as backstrech, it takes a long time to load the page.. and I’m using very low resolution.. any ideas / advices to avoid this? Thank you very much!!

    • Robin says

      It’s difficult to balance a large image source with speedy delivery. I’ve done as much as I can to mitigate that. The backstretch image is loaded after all of the content, though, so even though there is a delay in how quickly the backstretch image appears, it should not affect how quickly the rest of the content takes to load. To know more, I’d have to see an affected page and try to diagnose.

        • Robin says

          Well, the content is loading right away, but the image is being displayed later, because it’s set not to run until after the page is loaded. I think that’s a really heavy page in general, and there are an awful lot of requests running on it–looks like a lot of ad and facebook related things.

          • Miguel travelsauro says

            Hi Robin! Just one more thing…do you think I could add some code so the backstrech would load before the content? It’s a low resolution image, so I think it would load quite fast and then the content will take its time anyway.. Thank you very much!

          • Robin says

            Not that I know of, not without going in and editing the actual plugin. But I think that would have a negative impact on your site–instead of the content loading, and only the image being delayed, the content would be delayed until the image has loaded.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.