Adding Support for Vertical Featured Images in WordPress Themes

Standard

Here’s a quick and easy way to add support for Vertical Featured images in your WordPress themes.

How it Works

Using a filter hook, we’re going to add a class to the Featured Image markup if the image’s height is greater than its width. Then, using CSS we’ll float it to the right. Pretty simple, huh?

The Script

In your functions.php file add:

The CSS

This code floats the image to the right and adds some margin to separate the image from the post’s content. Be sure to include it in your CSS file.

.vertical-image {
	float:right;
	margin-bottom: 1em;
	margin-left: 2%;
	max-width: 33%;
}

Caveats

Your Post title will need to be clear: none; if this happens:

Screen Shot 2014-01-02 at 2.13.46 PM

You may need to add overflow:hidden to your post’s CSS to prevent this from happening in case the post excerpt is too short:

Screen Shot 2014-01-02 at 1.59.06 PM

The Result

This is what it should look like if the Feature Image has a vertical (portrait) orientation:

Screen Shot 2014-01-02 at 1.53.14 PM

Conclusion

When researching this, I had a hard time finding resources on this topic, so I hope this helps! If you find this post helpful, be sure to pass it on, including a link to this post!

Advertisements

12 thoughts on “Adding Support for Vertical Featured Images in WordPress Themes

  1. Thank you for this.

    Instead of adding a class to the Featured Image markup, is there any way to add a class to it’s parent container instead?

    I am trying to add a class to the containing DIV when a post thumbnail inside it is Horizontal (or vertical, whichever) so then I can define the CSS size for some large titles that I have overlapping the image.

    On vertical images within a tight masonry grid, the titles fit nicely inside, but on the horizontal images, being the same width as the vertical ones, the titles spill over onto other content.

    I can’t rely on text-overflow CSS because there are no set dimensions on the container, I am using percentages for a fluid design. I have tried limiting the amount of characters and including ellipsis through the_title() but it also limits the titles on the vertical images, of which there is plenty of adequate space to fit longer titles. If you could point me in the right direction, I would be eternally indebted to thee. Many thanks.

    • Hi bedroomscene,

      Can you follow me on Twitter? I’ll follow you back, then can you DM me your URL so I can take a look at your site?

      Thanks!

      • Hello John, thank you for responding so fast. The site isn’t live at the moment as it’s a redesign. I can show you a screencap though. http://imgur.com/DQTt57r As you can see, there is plenty of space for titles within the vertical posts, but the titles in the horizonals need clipping. Unfortunately if I clip one title, I clip them all. WordPress doesn’t seem to define whether a featured image is horizontal or vertical within the metadata (this would make things much easier!). If the horizontal Articles had a unique class, I can then assign appropriate CSS to clip only those titles and reduce the font size etc.

        Here is an example of the html.

        TITLES

        The function your wrote in your post is exactly what I need, the only difference is that I need it to add a “vertical” class to the Article post_class() instead of the post thumbnail img class. Would this be possible? I’ll work on allowing you to preview the site without having it go completely live. Cheers.

    • Offhand, it seems like the quickest way to accomplish this is through jQuery. Something along the lines of

      $( ‘img.vertical-image’ ).parent( ‘.masonry-thumbnail’ ).addClass( ‘contains-vertical-image’ );

      Of course, this is untested code, so it may take some tightening up, but I think it will point you in the right direction.

      • Cheers for the suggestion. After trying several different strings of jQuery I have realized that the solution must come from within wordpress, as I am using masonry and infinitescroll scripts which append new content to the page which is then unaffected by the jQuery. I think the solution lies in something similar to your script so I’ll keep on looking and let you know what I find. Many thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s