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

<?php
/**
* 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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk

Reader Interactions

Comments

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

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

    http://www.mamamouse.com if you need to check it out. Maybe I’ll be lucky and figure it out!

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

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

  4. 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 https://gist.github.com/anonymous/33c5911f73d2a38c91b6

    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 https://gist.github.com/anonymous/a6a93623ccd27d6c492a

    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?

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

      • 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

  5. Hi Bill, great post!

    I have implemented the changes in the function.php and style.css as you instructed, but It doesn`t seem to work.

    Is there any particular place in the code that it should be inserted?

    I use Generate Pro theme, and I have put the archive settings to left alignment.

    http://www.timemanagementchef.com if you need to check it out.

    Thanks in advance.

    Best regards,
    Tor

    • You should be able to place that code in functions.php (to apply sitewide) or single.php (to apply only to single posts). I looked at your site and the images still have a class of ‘alignleft’ so you must have done something incorrectly.

  6. Hello Bill,

    I am your fan! Trying to do something great.
    I am working on http://www.codeoffering.com/ . I’ve checked ” Include the Featured Image?” options. But it’s not picking up the first image of a post. It’s showing thumbnail only when I set a featured image. What’s happened? I use my own child theme of Genesis. Is there any problem in my child theme? I heard that Genesis picks up the first image of a post if there is not featured image set.

    • If a featured image isn’t specified, Genesis will use the first image that you uploaded on the page. If you selected an already uploaded image in the media gallery, it won’t use it. If you uploaded an image and then didn’t insert it in the page (or inserted and then removed it), that will be used.

      It doesn’t actually look to see what images are in the post. It just does a query for ‘post_type => ‘attachment’, and ‘post_parent’ => current page’s ID.

  7. Thanks so much for this Bill! I switched out the “alignnone” with “aligncenter” and the images are centered perfectly!

Leave A Reply