Regenerate Thumbnails is a WordPress plugin that will regenerate all thumbnail sizes for one or more images that have been uploaded to your WordPress Media Library.
This is useful for situations such as:
- A new thumbnail size has been added and you want past uploads to have a thumbnail in that size.
- You've changed the dimensions of an existing thumbnail size, for example via Settings → Media.
- You've switched to a new WordPress theme that uses featured images of a different size.
It also offers the ability to delete old, unused thumbnails as well as update the content of posts to use the new thumbnail sizes.
If you have command line access to your server, I highly recommend using WP-CLI instead of this plugin as it's faster (no HTTP requests overhead) and can be run inside of a
screen for those with many thumbnails. For details, see the documentation of its
media regenerate command.
Jetpack's Site Accelerator Module
Jetpack is a plugin by Automattic, makers of WordPress.com. It gives your self-hosted WordPress site some of the functionality that is available to WordPress.com-hosted sites.
The Site Accelerator Module makes the images on your site be served from WordPress.com's global content delivery network (CDN) which should speed up the loading of images. Importantly though it can create thumbnails on the fly which means you'll never need to use this plugin.
Building The Plugin
The latest release can be downloaded from WordPress.org, but if you wish to build your own copy, here's how:
Make sure you have Node.js installed.
Clone this repository inside your
$ git clone https://github.com/automattic/regenerate-thumbnails.git $ cd regenerate-thumbnails
Install yarn package manager. It's like npm but better.
Install the other dependencies:
Activate the plugin and visit Tools → Regenerate Thumbnails.
If you're looking to make modifications to this plugin's Vue.js code, run the following command:
This will do the following things:
- Automatically rebuild the
build.jsfile whenever any of the source files change.
- Put Vue.js in development mode which will allow you to use a browser extension to help with debugging.
- Spawn a Browsersync server at http://localhost:3030/ that will load a proxied version of your development WordPress install that automatically refresh the page in your browser when changes are made to files. Also if you open the site in multiple browsers, it will sync your navigation and scrolling between them. By default, this assumes that your WordPress install lives at
localhost. If this is not the case (for example you're using Varying Vagrant Vagrants), then edit
To run the PHPUnit unit tests, first run the
install-wp-tests.sh script from the
bin directory. Then simply run
phpunit from the plugin's root directory.