Remove Left Alignment from Featured Images in Genesis

Genesis 2.0 was officially released about a week ago, and there’s already great tutorials covering new features. Here’s some you might want to check out:

As one of the contributing developers of Genesis, I’ve been building my clients’ sites with Genesis 2.0 for the past few months. As I find useful and under-documented functionality, I’ll try to write blog posts and code snippets to share with you.

The Issue

When setting up your blog page, have you ever had an issue where the image is slightly smaller than the content area and so a few words float up around it? This is because Genesis automatically puts a class of “alignleft” on the featured image you add in Genesis > Theme Settings > Content Archives.

In the past I’ve either removed the genesis_do_post_image() function and rebuilt it, or wrote some CSS that said that particular .alignleft shouldn’t align left. But with Genesis 2.0, there’s a better way.

Almost all the hardcoded markup in Genesis 2.0 can now be changed using filters. This is so that Genesis can provide alternative markup to HTML5 and XHTML (older) sites.

The Solution

* Remove Image Alignment from Featured Image
function be_remove_image_alignment( $attributes ) {
$attributes['class'] = str_replace( 'alignleft', 'alignnone', $attributes['class'] );
return $attributes;
add_filter( 'genesis_attr_entry-image', 'be_remove_image_alignment' );
view raw functions.php hosted with ❤ by GitHub

Place the above function in functions.php (without the <?php at the top) and your image will no longer be aligned. Depending on your theme, you might also need to add this to your theme’s style.css file:

img.alignnone.entry-image {
display: block;
view raw style.css hosted with ❤ by GitHub

Here’s why it works:

In the genesis_do_post_image() function located in lib/structure/post.php, you’ll see this:

'attr'    => genesis_parse_attr( 'entry-image' ),

Instead of hardcoding the image attributes, they now pass through the genesis_parse_attr() function.  You can use the ‘genesis_attr_{attribute}’ filter to adjust those attributes.

In lib/functions/markup.php you’ll find a function called genesis_attributes_entry_image(). This is the function that’s now adding in extra classes like ‘alignleft’ to that image.

So we use the same filter as that function, ‘genesis_attr_entry-image’, and replace ‘alignleft’ with ‘alignnone’. You could replace it with ‘alignright’ or something completely different if you like.

This concept can be generalized to anything that uses the genesis_parse_attr() function. The Featured Post & Featured Page widget use ‘entry-image-widget’ as the attribute, and Genesis’ built-in grid loop uses ‘entry-image-grid-loop’.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson


  1. Sandeep says

    I have been trying to get a solution for this for a long time now. Thanks a lot for this tutorial !

  2. Nick Davis says

    Thanks Bill, coincidentally this helps me on something I’m working on right now. Cheers.

  3. Dennis O'Donnell says

    Thanks for a great post, Bill – I’ve been trying to track down a “best practices” way to do this – some people were suggesting altering the core framework files (!)….really appreciate the help, and it worked perfectly.

  4. Jeanni says

    Thank you for the fix! I have one question. Now that I have added this code and my picture is centered, now a duplicate in showing up above it, in the original position. I am new to Genesis, and so I have not figured this out yet. Can you please help? Thanks! if you need to check it out. Maybe I’ll be lucky and figure it out!

    • Bill Erickson says

      Have you added any code previously to add an image to your template? This simply modifies the display of the image added by genesis_do_post_image(). If you had coded a separate function to display an image, it will show them both.

  5. Amanda says

    Hi Bill
    Thank you so much for the post. I used it and it works 100%. The only thing is, all the feature and teaser images on the home page are medium (300 x 300) images. (I’m using the Genesis grid plugin). Now the first feature post looks funny with the medium image without the text wrap on the right. I therefore wanted to apply this rule only for a screen of 650px and less. I tried this with CSS but I have not been successful.

    Are there any quick pointers you could share that would get me on the right track.

    Your assistance and time are greatly appreciated.

  6. Affan says

    Thanks for the snippet Bill, this would be really handy.

    I’ve a question and hope you don’t mind answering. Instead of changing the class of the image, is that possible to add an extra wrapper around the image like this

    This will allow us to add a nice overlay on the image.

    One way I think it’s possible is by removing the featured image and rebuild it. Something like this

    However, I noticed that any new image uploaded won’t automatically be set as featured image like what Genesis does. I’ve to set featured image for each post manually. Is there any filter available or perhaps a better way to achieve this?

    • Bill Erickson says

      A few ways you could do this:

      1. You can unhook the genesis_do_post_image() function and build your own. If you use the genesis_get_image() function instead of get_the_post_thumbnail(), it will pull the first-attached image if no featured image was specified.

      2. You could use Javascript to wrap your featured image in the appropriate markup.

      • Affan says

        My bad, I used ! has_post_thumbnail() conditional tag to check for thumbnail. No wonder when I used genesis_get_image() function it didn’t grab the first image when no featured image is set.

        Everything looks good now