If you have been using WordPress for your photography website for a while, chances are that at some point you wanted or needed to change the default image sizes – Thumbnail, Medium and Large. Or maybe you are changing your theme and the new one is using different image sizes.
How do image sizes work in WordPress?
Out of the box, WordPress sets three image sizes by default. These defaults are:
- Thumbnail: 150 x 150 (cropped)
- Medium: 300 x 300 (resized)
- Large: 1024 x 1024 (resized)
Cropped means an image gets resized until the smaller side is 150 px, and the rest gets cropped on both sides equally. An image with 300 x 400 px for example, would be resized to 150 x 200 and then the remaining 25px on both sides get cropped.
Resized means an image gets resized until it fully fits the specified size. So an image of 2048 x 1024 pixel would be resized to 1024 x 512 for the large version.
On top of the default settings, a theme (or plugins) can register their own image sizes, as needed. A theme that uses small Thumbnails for posts in a sidebar for example might register an additional 50 x 50 image size for those images. We do this in picu as well, to generate only the exact image sizes we use in the collection templates, and nothing else, when you upload images to your proofing collections.
How to change sizes
Changes in image sizes happen either when you change the settings, change the theme or install a new plugin which registers a new image size.
A common misconception is that the setting in the backend directly changes the images displayed on the frontend. But thats not how it works in WordPress.
The Default Settings (as well as the registered image sizes from your theme) define how WordPress handles new images, and therefore only affects images uploaded after a setting has changed. Old images, that are already uploaded, are untouched and will still display the same.
That is, until you manually regenerate them.
How to regenerate images in WordPress
To get all images to use the new image sizes, you need to regenerate them. Basically telling WordPress to take all your existing uploads and do the same thing it does during a new upload, all over again.
There are several ways you can trigger a regeneration of all the images in your portfolio.
Regenerate using the Regenerate Images Plugin
The most convenient way is using a plugin called “Regenerate Thumbnails“, which lets you choose to regenerate the whole media library or even single images.
Step 1
Install and activate the Regenerate Thumbnails Plugin and navigate to Tools > Regenerate Thumbnails in your WordPress Admin.
Step 2
If you want to regenerate ALL images, click the big blue button to Regenerate Thumbnails for All … Attachments and let it run until finished.
There are two settings you can use to control the regeneration of images:
- Skip regenerating existing correctly sized thumbnails (faster)
On by default, this will make the script skip all thumbnails that are already available in the correct size. Uncheck this only if you want to force-regenerate everything. - Delete thumbnail files for old unregistered sizes
This can help free up space on your server, but keep in mind that it will delete all files for old sizes from your server. As those images may still be linked from inside the content of posts and pages on your size, this can result in broken images and should be used carefully.
Voilà, if the process ran through successfully, your image should now be regenerated and available in the new image sizes.
Regenerating single images
If you don’t want to regenerate all, but only some specific images, this is also possible with the Regenerate Thumbnails plugin.
Go to your Media Library and click on a thumbnail to open “Attachment Details”. In there you find a button “Regenerate Thumbnail” at the bottom right-hand side.
Using WP-CLI
If you are familiar using the command line interface of WordPress – WP-CLI – there is a handy command to trigger the regeneration from the command line as well.
The media
command used to regenerate images is:
wp media regenerate
By adding one or more IDs of specific images you can choose to regenerate specific images as well:
wp media regenerate <span style="color:#7b848c" class="has-inline-color">123 456 789</span>
Code language: HTML, XML (xml)
Don’t forget to replace the example IDs above with the IDs of real images in your installation.
Be aware that the WP-CLI command will delete all old image sizes by default. To keep them, which is usually a good idea, unless your 100% sure you want to delete them, you can add the --skip-delete
flag to the command like so:
wp media regenerate --skip-delete
Code language: JavaScript (javascript)
Also, as we saw earlier in the plugin settings, you can choose to only generate thumbnails for images missing image sizes, to make it run faster. This is done by adding the –only-missing flag.
wp media regenerate --only-missing
Lastly, if you know exactly which image size changed – for example if you changed the Medium size from 300 x 300 to 400 x 400 Pixel – it is also possible to generate just that one size, and leave the rest alone by adding the --image_size
flag:
wp media regenerate --image_size=<span style="color:#7b848c" class="has-inline-color">medium</span>
Code language: HTML, XML (xml)
You can combine and add those flags as needed to do exactly what you want. Here you find the complete list of WP-CLI Commands.
What happens to images uploaded through picu?
When you upload images to a client proofing collection in picu, we do not use the default settings and generate the image sizes needed for the picu collections layout exclusively. If we change images sizes used by picu (which happens very rarely), doing one of the above works for picu images as well.
If you have any questions about this, let us know!