Center Align Featured Images in Genesis

Update: Now there is an option in Genesis settings to align featured images to left, right or none. For center alignment, set this setting to none and use this CSS.

.entry-image {
display: block;
margin: 0 auto;
}

Original Post:

On this blog I use featured images of different sizes. Basically I don’t want to spend time doing any thumbnail management. Most of my images are technical screenshots and they look best when not cropped or scaled down unevenly. Maintaining aspect ratio with such screenshots is very important. Featured Images in my Genesis theme were left aligned with text wrapping around it. This caused problems with text getting mangled between featured image and post boundary as shown below. One of the solutions for me without getting into thumbnail management was to center align featured images.

Left Aligned Featured Images

Left Aligned Featured Images

I expected that it will be possible to do it with CSS. So I asked my theme author and Genesis community here and here. But unfortunately, I was informed that the way Genesis adds featured images, it is not possible to center align them. However there is workaround to force text below image using following CSS.

.entry-content p {
	clear: both;
}

Center Align Featured Images in Genesis

I had to wrap featured images inside a DIV container. That way we can then use CSS to style them. Following are some solutions that worked for me. However I still think there can be a better solution to this problem.

Using Genesis Hooks

This solution worked, but not perfectly for my theme. It may work for you. Following code was added to genesis_post_content Hook using Simple Hooks plugin. Make sure you unhook genesis_do_post_image() and genesis_do_post_content().  The only problem with my theme was that I didn’t see the post content for the first post on blog page. Rest of the post followed perfectly.

<!--?<span class="hiddenSpellError" pre=""-->php
	add_action('genesis_post_content','center_post_image', 0) ;
	add_action('genesis_post_content','genesis_do_post_content') ;
	if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {
		$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
		if( ! empty( $img ) )
			printf( '</pre>
<div class="featured-image"><a title="%s" href="%s">%s</a></div>
<pre>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	}
?>

Modifying Genesis Theme File

This was something I was trying to avoid doing. However as above solution didn’t work well for me, I had to modify wp-content/themes/genesis/lib/structure/post.php. Following function was modified to wrap featured image inside a DIV. Lines modified are highlighted.

function genesis_do_post_image() {
	if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {
		$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );

		if( ! empty( $img ) )
			printf( '</pre>
<div class="featured-image"><a title="%s" href="%s">%s</a></div>
<pre>', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	}
}

Following CSS will center align featured images once they are rendered inside a DIV.

.featured-image {
	text-align: center;
}
.featured-image img {
	margin: 0;
}

Update: August 8 2013 : For Genesis Version 2, use the following CSS

.featured-image {
	text-align: center;
}
.featured-image img.alignleft {
	float: none;
}

Let me know if this can be solved in a better way.

Center Align Featured Images

Center Aligned Featured Images

About Dinesh Sharma

Experienced system architect, programmer, and trainer. This blog is a way of giving back and helping the community. So feel free to ask a question or to leave a comment.

    • Hi,

      I also tried this. It worked, but I didn’t see the post content for the first post on blog page. I don’t know why. Rest everything was fine. So I had to take another path…..and this is far simple, hardly 3-4 lines of code and no messing with image sizes, and is working fine for me since then.

  • Cody

    I know this is super old but this article pops up on google when searching for centering genesis featured images. Featured images get their own class now so the easiest way to do this is set the alignment to none in the genesis settings page and then simply add css like this

    article .entry-image {
    display: block;
    margin: 0 auto;
    }

    • I know this is super late, but thanks for the update.

  • Beth

    Dinesh do you know if this would work for post excerpts on the latest posts page? And if so, what do I need to switch out? I don;t need it on single posts, just on the home page.

  • Amethystmyth

    Thanks, Dinesh. I am using the Gallery Pro theme and I had to use this code

    #genesis-content .attachment-post-image {
    display: block;
    margin: 0 auto;
    padding-bottom: 25px;
    }

    but your post helped me out a lot.