Regenerate Thumbnails

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.

Alternatives

WP-CLI

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:

1. Make sure you have Node.js installed.

2. Clone this repository inside your plugins directory:

   $ git clone https://github.com/automattic/regenerate-thumbnails.git
   $ cd regenerate-thumbnails
   

3. Install yarn package manager. It's like npm but better.

4. Install the other dependencies:

   yarn
   

5. Build the plugin's JavaScript file in production mode:

   yarn build-production
   

6. Activate the plugin and visit Tools → Regenerate Thumbnails.

Development Mode

If you're looking to make modifications to this plugin's Vue.js code, run the following command:

yarn watch

This will do the following things:

• Automatically rebuild the build.js file 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 browsersync-config.json.

Alternatively if you just want to manually build a development copy of the Javascript, then run this command:

yarn build

Unit Tests

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.