Friday, 13th May 2011
Automatic image resizing in WordPress
With any website the careful use and placement of images can really enchance the look and feel of the site. This can take the form of inserting images into your blog post among the usual content, but a more effective way is to specify set areas where an image will display.
WordPress has the incredibly useful ‘Featured Image’ feature. To use this you simply upload an image, set it as the ‘Featured Image’ and save the post. From there, you can then utilise this image in any way you need, even resizing it and cropping it on the fly.
For example, the blog post you are now reading had a very large image uploaded as its featured image, but it has been automatically deployed in a number of ways throughout the site, such as displaying at a set size at the top of this page, and being used as a thubmnail on the home page and main blog page. All these versions were automatically generated by WordPress, and here I will show you to how to set up behaviour like this.
Declaring the image sizes
The first step is to identify the different versions of the image you wish to be displayed on the site. In my example, I would like a large, but relatively short image for the top of individual blog pages and a much smaller version for thumbnails. For this I will add the following two lines to the top of the theme’s functions.php:
add_theme_support('post-thumbnails');
add_image_size('blog-image', 572, 205, true);
add_image_size('blog-thumbnail', 145, 96, true);
The first line allows the theme to access the post thumbnails features, such as automatic resizing. The second line declares the main blog image, setting the size to 572 by 205 pixels and allowing for automatic cropping (this is important if you don’t want to worry about the format of the source image you’re uploading). The third line does the same, but for the thumbnails.
Inserting the image into the site
Ok, now we’re all set up. Once the ‘Featured Image’ has been applied to the blog post, we can now start inserting it onto the site. Firstly let’s take a look at the template for single blog posts which by default is single.php:
the_post_thumbnail('blog-image');
The above line is incredibly simple, and inserts the large image preset without any faffing around. I have inserted the image into a div to allow for styling later. As you could imagine, inserting the thumbnail is just as easy, but this time in the loop.php file.
the_post_thumbnail('blog-thumbnail');
So, there we have it. This is a very good example of how WordPress provides some great features out of the box… you just have to get your coding hands a little bit dirty to get the most out of them!
Related posts
Tuesday, 10th May 2011
Adobe Kuler – Creative Suite Integration
Kuler is a web application for generating color themes that can inspire any project. That might seem a little dull, but if your struggling to create the perfect balance, it can be a good source of inspiration.
Tuesday, 12th July 2011
Google web fonts, font replacement from Google.
Google have kindly released a series of web fonts, which you can use in your web projects.
Tuesday, 19th April 2011