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:
- Schema.org and Genesis 2.0 by Yoast
- Genesis 2.0 Explained by Nick the Geek
- Changes in Genesis 2.0 by GaryJ
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' ); |
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; | |
| } |
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’.
Sandeep says
I have been trying to get a solution for this for a long time now. Thanks a lot for this tutorial !
Brad Dalton says
I’ve got this problem in my RSS feed images so this may help fix that problem as well.
This is the code i use to add featured images to the feed https://gist.github.com/braddalton/6229544
Thanks for the code.
Nick Davis says
Thanks Bill, coincidentally this helps me on something I’m working on right now. Cheers.
Oliver says
Thanks, Bill. Great tip … thanks for sharing.
Bilal Khoukhi says
Thank you very much for the tip.. I was looking for help to change the alignment from Left to Right.
So here is the code for what should be done
https://gist.github.com/teamomivida/6795420
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.
Kendra says
Thanks so much! I need this!
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!
http://www.mamamouse.com 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.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.
Bill Erickson says
You can’t use this filter to target specific resolutions because it loads before anything is known about the user’s browser.
You’ll need to use CSS media queries for it. Something like this: https://gist.github.com/billerickson/9664504
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 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?
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 thegenesis_get_image()function instead ofget_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