Theming the Image Post Format

Working with post formats in WordPress can be challenging because of the lack of structured data. For instance, just because a user selects an “image” post format, there’s no guarantee that an image was actually attached to the post.

Alex King has created a plugin and submitted a couple patches, but until the WordPress UI catches up we as theme developers need to be a little creative.

In the most recent version of Portfolio Press, I ended up styling the image format to look like this:

(You can also view it on the demo site)

Post Format Styling

Instead of putting a title above the post like the standard format, I decided to hide it. In my opinion the focus should be on the image.

Instead of displaying the the_excerpt like I do for other posts in the archive view, I display the_content so that full images are able to be displayed.

Then, using jQuery, I built a rollover effect that displays the post title when someone hovers over the image. If you click on the image, it will take you to the full post.

jQuery With Post Formats

Using jQuery makes it much easier to work with the post formats because you don’t need to guess what’s in the content. It also fails gracefully if it doesn’t find the markup it’s looking for.

For instance, the rollover effect in Portfolio Press is applied only on the first image detected in the post format- even if the author dropped 12 in there. If there’s no image, no additional markup is added.

The script checks to make sure the image is at least 200px wide. The rollover title still might not fit in a larger image, but at least it has a chance.

Authors sometimes link their images to the fullsize version. However, in the archive view I want the image to only link to the full post. The script I wrote will unwrap any link around the original image, and replace it with a link to the post in the archive view. This might not be what some users in intend, but I think the majority will.

Enough Talk

Here’s the script I used to create the rollover effect on post format images:

    // Image Post Format
    $('#content .format-image').each( function() {
    	var image = $(this).find('img:first');
    	if (image.width() > 200 ) {
	    	var link = $(this).find('.entry-title').children();
	    	var title = link.text();
	    	image.unwrap('a');
	    	image.wrap('<div class="image-wrap" />');
	    	image.wrap(link.text(''));
	    	image.parent().append('<h3/>');
	    	$(this).find('h3').text(title).width(image.width() - 20);
    	}
    });
    
    $('.format-image .image-wrap a').hover( function() {
    	$(this).children('h3').slideDown(100);
    }, function(){
    	$(this).children('h3').slideUp(200);
    });

View It

You can view the post formats here. Portfolio Press 0.9 can be downloaded from GitHub (the latest isn’t in the .org repository yet).

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

3 Responses

  1. I am currently updating my sister’s weblog, and I am realy happy with! The only thing I want to change is to display the title from the posts (using the photo-display type), but I can’t figure out how to ‘unhide’ them! Can anyone help?

  2. Kim

    Hi Devin,

    Can the image automatically by resized when loaded from feature image when adding a new profolio? I was wondering how do I get all the images the same size. Not trying to have this look like pintrest.

    Thanks – Kim

Leave a Reply