Although I really cannot say where I have seen very many portrait style, or vertical, featured images on many sites, the general aesthetics of it are a bit bothersome when the theme follows the same rules for an image with a vertical aspect ratio as it does for images with a horizontal, or landscape, aspect ratio.

Here’s a working idea to better display a Featured Image that meets the simple requirements of having a height greater than its width. Let’s have a look at what we need to address:

  • We need to define which image we are featuring.
  • We need to check if the height is greater than the width …
  • … and we need to move the image from a centered alignment to a left or right alignment
  • (optional) provide a method to over-ride the alignment

First off, the featured image id: get_post_thumbnail_id() … this gives us the key detail for the following function.

Next we needed the image’s meta data to check if the height is greater than the width: wp_get_attachment_metadata()

Putting those together we can do the following:

<?php
$featured_image_metadata = wp_get_attachment_metadata( get_post_thumbnail_id() );

if ( $featured_image_metadata['height'] > $featured_image_metadata['width'] ) {
	$output = get_the_post_thumbnail( get_the_ID(), 'full', array( 'class' => 'alignleft' ) );
} else {
	$output = get_the_post_thumbnail( get_the_ID(), 'full', array( 'class' => 'aligncenter' ) );
} ?>

Putting this altogether into some working code is a bit involved but really not too complicated.

To see the code click here.To hide the code click here.

	/**
	 * Featured Thumbnail
	 *
	 * Returns the Featured Image with default size set to thumbnail and aligned to the left
	 *
	 * @param   $size  - default: thumbnail (uses WordPress sizes)
	 * @param   $class - default: alignleft (can be any CSS class)
	 *
	 * @uses    esc_attr
	 * @uses    esc_url
	 * @uses    get_post_thumbnail_id
	 * @uses    get_the_ID
	 * @uses    has_post_thumbnail
	 * @uses    is_archive
	 * @uses    is_single
	 * @uses    the_post_thumbnail
	 * @uses    the_title_attribute
	 * @uses    wp_get_attachment_image_src
	 *
	 * @return  string - Featured Thumbnail image and URL
	 */
	function featured_thumbnail( $size = 'thumbnail', $class = 'alignleft' ) {

		$output = null;

		if ( has_post_thumbnail() ) {

			$output = '<a class="featured-thumbnail" href="' . esc_url( home_url( '/?p=' . get_the_ID() ) ) . '" title="' . esc_attr( the_title_attribute( 'echo=0' ) ) . '" >';

			$output .= get_the_post_thumbnail( get_the_ID(), $size, array( 'class' => $class ) );

			$output .= '</a>';

		}

		return $output;

	}


	/**
	 * Featured Thumbnail Single View
	 *
	 * @uses    featured_thumbnail
	 * @uses    get_post_thumbnail_id
	 * @uses    is_bool
	 * @uses    wp_get_attachment_metadata
	 *
	 * @param bool $use_portrait
	 *
	 * @return string
	 */
	function featured_thumbnail_single_view( $use_portrait = true ) {

		$featured_image_metadata = wp_get_attachment_metadata( get_post_thumbnail_id() );

		/** @var bool $use_portrait - use hook as toggle to display featured image with portrait consideration */
		$use_portrait = apply_filters( 'thumbnail_single_view_portrait', $use_portrait );

		/** Quick sanity check to ensure that a boolean value is used */
		if ( ! is_bool( $use_portrait ) ) {
			/** @var bool $use_portrait - set to true (default) */
			$use_portrait = true;
		}

		if ( $use_portrait && ( $featured_image_metadata['height'] > $featured_image_metadata['width'] ) ) {
			return featured_thumbnail( $size = 'full', $class = 'alignleft' );
		} else {
			return featured_thumbnail( $size = 'full', $class = 'aligncenter' );
		}

	}


	/**
	 * Show Featured Thumbnail
	 *
	 * Used to display the featured thumbnail image in templates
	 *
	 * @param   bool $echo
	 *
	 * @uses    featured_thumbnail
	 * @uses    featured_thumbnail_single_view
	 * @uses    is_archive
	 * @uses    is_single
	 */
	function show_featured_thumbnail( $echo = true ) {

		if ( $echo ) {

			/** Sanity check - are we in the right view to show the image? */
			if ( ! is_single() && is_archive() ) {

				echo featured_thumbnail( $size = 'thumbnail', $class = 'alignright' );

			} else {

				if ( ! is_single() ) {

					echo featured_thumbnail();

				} else {

					echo featured_thumbnail_single_view();

				}

			}

		}

	}

Note in the code above the inclusion of the thumbnail_single_view_portrait filter hook to be used as a toggle for this style of rendering a vertical Featured Image as aligned to the left by default, or centered as a landscape image would commonly appear.

This will be implemented in Opus Primus as part of its update to version 1.3.1 … feel free to pick up a copy from its GitHub repository here.