WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

The WPLift Complete Guide to WordPress Image Handling

Last Updated on June 12th, 2020

Published on September 3rd, 2014

Share This Article

The WordPress media uploader has improved a lot over the years and now provides some powerful tools to manage your images, edit them within WordPress, create galleries and other functions. There are further improvments due to arrive with WordPress 4.0 which will include a better media browser with a sleeker grid-based view.

In this post we are going to cover how to control image sizes in WordPress, how to edit images after uploading them, how to shrink the filesize for faster-loading pages and how to create galleries and enable a stylish full-screen carousel for image galleries.

Controlling The Image Sizes in WordPress

When you upload an image to your website, WordPress automatically creates additional sizes for your image. You can set the sizes of these images in Settings -> Media as shown below:

Media Settings

In these options you can also choose to crop the thumbnail to the exact size you specify or they will be generated proportionally.

Post Thumbnail size settings can be overridden inside your theme’s functions.php file as well. Doing so, changing the thumbnail size in Settings -> Media will have no effect on how WordPress displays post thumbnails. This option is particularly useful for theme developers.

add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 150, 150 );

In the above code, we have set the post thumbnail size to 150X150px. Set Post Thumbnail size is a useful little function. It comes with three arguments like this:

[php]<?php set_post_thumbnail_size( $width, $height, $crop ); ?> [/php]

$crop here tells WordPress whether it should crop an image or not, default is false and setting it true will allow WordPress to crop an image.

Article Continues Below

Choosing Different Thumbnail Sizes for Different Templates

Sometimes you might want to have smaller thumbnails on your main pages and slightly larger thumbnails on archive, category, or single post templates. You can set these image sizes using the function add_image_size()

add_image_size( ‘tag-thumb’, 200,200 );
add_image_size( ‘homepage-thumb’, 220, 180 );

To display these thumbnail sizes you will have to add a little code to your template files. In the example above we have created two thumbnail sizes, one for Tags template and one for homepage template. To display the tag thumbnail we add the following code in our tags.php template.

if ( has_post_thumbnail() ) {
the_post_thumbnail( ‘category-thumb’ );
} ?>[/php]

Image Editing in WordPress

WordPress has a built in Image Editor which you can use to crop, scale and flip your images. There are two ways to access the image editor. When uploading an image from post edit page, after the upload on the right hand side you will see an “Edit Image” link.

Edit Image in WordPress

You can also visit the “Media” > “Library” link in your WordPress admin side menu, which will display a list of your latest images and hover over one and again, choose “Edit” there.

Media Library Edit

Click the “Edit Image” button and you have a few options such as cropping the image, rotating it, flipping it, scaling it and you can also edit the alt text, caption , name and description from here.

Image Editing Tools

Article Continues Below

Stopping WordPress from Creating Multiple copies of Images

It is quite useful that WordPress creates different sizes for your images. You can show a medium sized image inside post, a thumbnail on main and archive pages and full size images when someone clicks on them. However, some people may not want all these images, some people would like to have just the original image. They might have already edited the image in the size the like and want to display it only in that size, or they simply don’t want other sizes. Or they have created a custom image size for their templates and want to use those sizes and nothing else.

There are two ways to do that, first one is simpler, go to Settings -> Media and set all image sizes to 0.

Remove Image Sizes

The second method is to add the following code in your theme’s functions.php

[php]function wplift_remove_image_sizes( $sizes) {
unset( $sizes[‘thumbnail’]);
unset( $sizes[‘medium’]);
unset( $sizes[‘large’]);

return $sizes;
add_filter(‘intermediate_image_sizes_advanced’, ‘wplift_remove_image_sizes’);[/php]

Automatically Compress Images

One more thing you might want to do is automatically optimise images for filesize when you upload them, this will make your posts load quicker which will improve your site’s usability and also will help with search engines as they prefer faster loading pages. There is a free plugin you can install called WP Smush.it which uses the Yahoo Smush.it API, I use it here on WPLift and it works great – the only downside is that when you upload an image it has to communicate with the Smush.it API so images take a little longer to appear after upload, I think the benefit is worth it though.

WP Smush.it

You can also perform a “Bulk Smush.it” if you like where the plugin will go through all your old images and optimize them, this is good if you have a few images on your site but with WPLift it stated it would take 10 hours so I didnt bother!

Bulk Smush.it

Article Continues Below

Creating Image Galleries

If you would like to add a gallery of images into your post, click the “Add Media” button and then “Create Gallery” where you can upload multiple images or simply go through and tick any images you would like included in the gallery.


Once uploaded you can drag the order of the images to display in the order you would like and also delete any, add more. Once done, you hit the “Insert Gallery” button and it will be added to your post.

Sort Order WordPress Gallery

Your theme will then display the gallery of images in a grid format, and when an image is clicked will take you to a page with the single image.

Image gallery in post

Image Gallery Carousel

If you wish to improve the display of WordPress gallery images, there is a feature in the Jetpack plugin called Carousel. When activated, clicking on a gallery image will launch a full screen gallery with next and previous buttons so people can browse the gallery full-screen. Perfect for portfolio sites and photographers to show off their images. There is even an option to display EXIF data.

Jetpack Carousel

See the Carousel in action on this post at Konstantin Kovshenin’s site.

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift in 2010.