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. Tor Refsland says

    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

    • Bill Erickson says

      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.

  2. Morshed says

    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.

    • Bill Erickson says

      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.

  3. Pam Hirsch says

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

Leave A Reply