One of the things I really wanted to offer with my latest blog redesign was the option for people to download a desktop wallpaper of any of my photo-blog posts. However, knowing my own limitations, I wanted to make it as simple and automated a process as possible.
I knew that if I went with a system where I had to crop, export and upload each different image size, well, I’d never do it. So I decided to take advantage of the built-in featured image functions in WordPress. I have a feeling, looking back on this, that I could have done this a slightly simpler way (using the option to define image sizes on the fly, and not on export – but perhaps this is a slightly less intensive method as regards server load).
Set your image sizes
First up I’ve defined all the image sizes I want to offer for download. It’s important here to use a standard prefix on the wallpaper sizes if you’re using other pre-defined featured image sizes.
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'wallpaper-1920x1200', 1920, 1200, true );
add_image_size( 'wallpaper-1920x1080', 1920, 1080, true );
add_image_size( 'wallpaper-1680x1050', 1680, 1050, true );
add_image_size( 'wallpaper-1440x900', 1440, 900, true );
add_image_size( 'wallpaper-1366x768', 1368, 768, true );
add_image_size( 'wallpaper-1280x1024', 1280, 1024, true );
add_image_size( 'wallpaper-1280x800', 1280, 800, true );
}
As you can see here, I’ve covered the most common desktop wallpaper sizes. I’m not covering things like smart phone screen sizes, and I’ve obviously had to set the crop setting to true on each of them. I have to make sure when I’m uploading a photo blog post that I’m uploading a larger size than my greatest desktop background size.
One other proviso: this is only going to really work on landscape aspect images. I’d have to do some extra work to make this system work for portrait aspect images – but portrait aspect doesn’t really work for desktop backgrounds. Potentially the easiest thing would be to have a custom field specifying that the image uploaded is portrait aspect; if that field is ticked, I would entirely skip the desktop background download option in the code.
Create the function
Next up we have our function, which you should add to functions.php in your WordPress template.
/**
* Create an unordered list containing links to wallpaper sizes of featured image
*
* @param string optional $post ID
* @return echo unordered link list
*/
function pa_the_post_thumbnail_wallpapers($postID = NULL) {
// if $postID not specified, then get global post and assign ID
if (!$postID) {
global $post;
$postID = $post->ID;
}
if (has_post_thumbnail()) {
// get the meta data from the featured image
$postThumbnailID = get_post_thumbnail_id( $postID );
$photoMeta = wp_get_attachment_metadata( $postThumbnailID );
// prepare our download links
// if the sizes key is an array
if (is_array($photoMeta['sizes'])) {
// assign the sizes array to a variable
$photoSizes = $photoMeta['sizes'];
// loop through our photosizes array
foreach ($photoSizes as $key => $value) {
// if the key starts with wallpaper assign the key name to an array
if ( substr($key, 0, 9) == 'wallpaper' ) {
$downloadableWallpapers[] = $key;
}
}
}
// if there are any downloadable wallpapers
if ($downloadableWallpapers) {
// start our ul
echo '<ul>' . "\r\n\t";
// loop through available wallpapers
foreach ($downloadableWallpapers as $downloadableWallpaperSize) {
// get the image source and assign to variable
$dwInfo = wp_get_attachment_image_src( $postThumbnailID, $downloadableWallpaperSize );
// create the title by removing the prefix
$sizeTitle = str_replace('wallpaper-', '', $downloadableWallpaperSize);
// expand SIZExSIZE to SIZE x SIZE
$sizeTitle = str_replace('x', ' x ', $sizeTitle);
// echo our download link
echo '
<ul>
<li><a href="' . $dwInfo[0] . '">Wallpaper: ' . $sizeTitle . ' px</a></li>
</ul>
' . "\r\n";
}
// close our ul
echo '</ul>' . "\r\n";
// echo some advice on how to download
echo '<p class="wallpaper-download-advice"><em>Right-click/Cmd-click and select "Save link as" to download</em></p>';
// if no downloadable wallpapers, then echo error message
} else {
echo '<p>Wallpaper downloads not found.</p>';
}
// if no featured image, echo error message
} else {
echo '<p>Featured image not found, no downloads available.</p>';
}
}
What’s happening here?
Essentially we’re grabbing our featured image sizes array and looking through it. If any of the array keys start with ‘wallpaper’ then we place that key into another array. This array will only contain our wallpaper sizes.
From there we start an unordered list and output the download link. I’m parsing out the image size for each one so I can use that as the link text, and grabbing the URL for the specific image by using wp_get_attachment_image_src().
Usage
In my case I will only be using this option on single posts in my photo blog category. So I’ve edited my single.php template file to include the following:
<?php if ( in_category( 'cat-slug-or-id' ) ) { ?>
<h4>Download as wallpaper</h4>
<?php pa_the_post_thumbnail_wallpapers(); ?>
<?php } ?>
That’s it! You will now have a nice outputted list of wallpaper sizes. If you’re doing this retrospectively, you might want to alter the function to generate the different sizes on the fly, or you can use a Thumbnail Regenerator plugin to recreate all your featured image sizes. There are a few available, but most recently I’ve used AJAX Thumbnail Rebuild.
Any questions or suggestions, please let me know in the comments.
Comments