Controlling layout with Featured Image sizes in Wordpress

Recently, I was working with a WordPress theme that includes a “featured image” (added recently to WordPress). Instead of just displaying it on the frontend, I wanted to know how big it was so that I could add a css class to an element – changing the layout – depending if someone had uploaded a “small” or a “large” featured image.

You can enable featured images in your theme by adding the following to your functions.php file.

add_theme_support( 'post-thumbnails');

1	add_theme_support( 'post-thumbnails');

This will add support to both posts and pages. If you just want to do one or the other, add either of the following instead:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add for posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add for pages

1 2	add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add for posts add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add for pages

To show this image on the frontend without modification, you’d use one of the following:

the_post_thumbnail();
the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
echo get_the_post_thumbnail();

the_post_thumbnail();

the_post_thumbnail('thumbnail');

the_post_thumbnail('medium');

the_post_thumbnail('large');

echo get_the_post_thumbnail();

This would add the image tag, alt text etc to the page whereever you call it.

As I explained above though, I wanted to get the dimensions of the image to affect the layout. As this method displays the full image tag, what we need to do is grab the URL to the image, and check its dimensions. We can achieve this by using the function wp_get_attachment_image_src and grabbing the width and height using the PHP function getimagesize

<li <?php
// grab the source of the image
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), null, false, '' );

// returns an array, so grab first
if($src[0] != ''){
	list($width, $height) = getimagesize($src[0]);
}

$class = '';

// in this case, check if the width is over 200px
if($width > 200){
	$class = 'large';
}

// seperate if statement in case there is some additional content
if($class != ''){
	// apply the class
	echo ' class="' . $class . '"';
}

?>><a href="<?php the_permalink();?>" title="< ?php the_title();?>">< ?php echo get_the_post_thumbnail(); ?></a></li>

<li <?php

// grab the source of the image

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), null, false, '' );

// returns an array, so grab first

if($src[0] != ''){

list($width, $height) = getimagesize($src[0]);

}

$class = '';

// in this case, check if the width is over 200px

if($width > 200){

$class = 'large';

}

// seperate if statement in case there is some additional content

if($class != ''){

// apply the class

echo ' class="' . $class . '"';

}

?>><a href="<?php the_permalink();?>" title="< ?php the_title();?>">< ?php echo get_the_post_thumbnail(); ?></a></li>

Image Credit: gnuckx

Leave a Reply