One of my more recent obsessions when working with WordPress is trying out some different things with media, especially experimenting with attachment pages. For a new theme I’m working on, I wanted to add links to all the image sizes on the image attachment page in a Flickr-esque fashion.

Does WordPress have a function for that?

That’s one of my favorite questions because it allows me to explore WordPress and learn more about the system. WordPress is still lacking in some ways when it comes to handling media, but it does have a great function for my needs in this experiment.

The end result

The goal is to get all the image sizes for an attached image and display a link to each on the image attachment page as shown in the following image.

Creating the functionality

As I mentioned earlier in the post, WordPress has a function for that, which is called wp_get_attachment_image_src(). Judging by its name, you’d think it only returned the URL of the image, but it does so much more. It returns all four values that we’ll need in an array.

• The image source based on the size.
• The image width.
• The image height.
• True/false depending on whether the image is an intermediate size and not the original.

To use this function, we need to create our own function that loops through all the various image sizes for a specific attachment image and returns a list. Drop the following PHP code in your theme’s functions.php file to do this.

function my_get_image_size_links() {

	/* If not viewing an image attachment page, return. */
	if ( !wp_attachment_is_image( get_the_ID() ) )
		return;

	/* Set up an empty array for the links. */
	$links = array();

	/* Get the intermediate image sizes and add the full size to the array. */
	$sizes = get_intermediate_image_sizes();
	$sizes[] = 'full';

	/* Loop through each of the image sizes. */
	foreach ( $sizes as $size ) {

		/* Get the image source, width, height, and whether it's intermediate. */
		$image = wp_get_attachment_image_src( get_the_ID(), $size );

		/* Add the link to the array if there's an image and if $is_intermediate (4th array value) is true or full size. */
		if ( !empty( $image ) && ( true == $image[3] || 'full' == $size ) )
			$links[] = "<a class='image-size-link' href='{$image[0]}'>{$image[1]} &times; {$image[2]}</a>";
	}

	/* Join the links in a string and return. */
	return join( ' <span class="sep">/</span> ', $links );
}

Showing the image size links on attachment pages

Now that you have a function for displaying links to different image sizes, you need to call the function in the correct theme template. This is trickier because themes don’t always use the same templates. If you’re a theme developer, you should know where to add this. If you’re a user modifying a theme, look for an image.php or attachment.php template. Your theme should probably have one of these files.

Within The Loop, you can add the following code. I chose to add mine after the display of the attachment title.

<?php if ( wp_attachment_is_image( get_the_ID() ) ) { ?>
	<div class="image-meta">
		<?php printf( __( 'Sizes: %s', 'example-textdomain' ), my_get_image_size_links() ); ?>
	</div>
<?php } ?>

That’s all there is to it. Now you can show all those image size links as done on Flickr.