{"id":42434,"date":"2017-04-09T08:25:27","date_gmt":"2017-04-09T16:25:27","guid":{"rendered":"https:\/\/graphpaperpress.com\/?p=42434"},"modified":"2017-03-10T14:24:13","modified_gmt":"2017-03-10T22:24:13","slug":"change-featured-image-sizes-wordpress","status":"publish","type":"post","link":"https:\/\/graphpaperpress.com\/blog\/change-featured-image-sizes-wordpress\/","title":{"rendered":"How to Change Featured Image Sizes in WordPress"},"content":{"rendered":"
Featured images are used within WordPress in a number of different ways, depending on the theme you are using. Most themes use featured images as a thumbnail preview of one of the images in a post or page that is typically displayed on the homepage and archive pages.<\/p>\n
This functionality was introduced with WordPress 2.9 and was originally known as “post thumbnails.” Most WordPress themes (including our very own<\/a>) now use featured images for many other purposes such as in image galleries, feature sliders and page header images. For example, in our Full Frame<\/a> theme, the featured image becomes the background image of the post.<\/p>\n Featured images are of course very important for creatives and anyone creating a WordPress site that contains a lot of images. To make use of featured images in any Graph Paper Press theme, all you need to do is select a featured image from the link on the right hand side of the screen in the post editor.<\/p>\n If the default featured image size that’s set in your theme works for your purposes, great. If not, it’s possible to change the size with a little code editing.<\/p>\n Why would you want to change the featured image size? Apart from making thumbnail galleries bigger or smaller, you may want to change the aspect ratio of the dimensions. Say for example you’re a landscape photographer and your portfolio is made up of sweeping panoramas. In this case, if the default featured image of the theme is square, it will end up cropping out most of your image. You can fix this by adjusting the dimensions manually to something more suitable.<\/p>\n To edit the featured images sizes from the default, you’ll need to change some code in the functions.php<\/em> file. This file can either be accessed via FTP or you can edit it directly in the WordPress dashboard under Appearance > Editor. <\/em>I would always recommend the former approach over the latter.<\/p>\n Before you make any changes to this file, it’s always worth making sure you have a backup of the original version in case something goes wrong. If you don’t have the original theme files on your computer already, make sure you download at least the functions.php<\/em> file and save it to a backup folder.<\/p>\n There are two different ways of resizing a featured image. To resize it proportionally (i.e. to avoid stretching or compressing the image) use the following code:<\/p>\n you can also choose to resize the image by cropping it with this code:<\/p>\n This sets the default size of featured images.<\/p>\n It’s also possible to add as many additional image sizes as you need by adding an extra line of code for each image size:<\/p>\n You can then use this new size in your theme template with the following code:<\/p>\n This feature is handy if you want to display featured images in a number of different ways. For example, you may want to set a thumbnail size for your image galleries and a larger size for your post header.<\/p>\n Remember that the images you upload must be at least as big as the dimensions you have set for your featured images. If you upload smaller images, they will be scaled up and will end up looking pixelated and blurry.<\/p>\n Changing the featured image size will only affect uploads from the time the code is changed. Any previous uploads will have been saved at the original dimensions, so you’ll need to re-generate them.<\/p>\n If you only have a few images to resize, you can upload them again manually. If you have more than a handful, it’s best to use a plugin like Regenerate Thumbnails<\/a> to do all the hard work for you. This plugin can be accessed via your Tools menu and will resize one or more of the images in your media gallery that you select.<\/p>\n The problem with making edits directly to your functions.php<\/em> file is that they will be lost if a new version of the theme is released and you need to upgrade it. You can make a note of the code you’ve added and insert it into the new functions.php<\/em> file but this can become tedious, particularly if you are making a lot of edits or there are new versions of the theme coming out frequently.<\/p>\nChanging The Featured Image Size In functions.php<\/em><\/h3>\n
set_post_thumbnail_size( 50, 50 ); \/\/ 50 pixels wide by 50 pixels tall, resize mode<\/pre>\n
set_post_thumbnail_size( 50, 50, true ); \/\/ 50 pixels wide by 50 pixels tall, crop mode<\/pre>\n
Adding Additional Image Sizes<\/h3>\n
add_image_size( 'category-thumb', 300, 9999 ); \/\/ 300 pixels wide (and unlimited height)<\/pre>\n
<?php the_post_thumbnail( 'category-thumb' ); ?>\r\n<\/pre>\n
Rebuilding Your Featured Images<\/h3>\n
Future-Proof Your Edits With A Child Theme<\/h3>\n