The Pro version of Modals comes packed with the ability to automatically create thumbnail images, used as clickable links to open modal popups for Image Modals, Galleries & Slideshows and Auto-Converted Images (all Pro features).

The "Create Thumbnails" feature is enabled by default. If you disable it (via the Modals plugin settings) Modals will fallback to displaying the large original image as clickable link to open the modal, unless you manually create a custom thumbnail for that image yourself (see below).

Automatically generated thumbnails

In the Modal plugin settings you can customize the default width and height that Modals will use to create thumbnails (default is set to 80x60), set the quality of the thumbnails, select the filetypes to create thumbnails of (gif, jpg, png), and decide whether you want the thumbnail images to be cropped or not.

With the "Resize Method" set to "Crop", all thumbnails will be created with the exact width and height, meaning that if proportions are different, the thumbnails will be cropped to fill the specified dimensions. With the option set to "Scale", the thumbnails will be created to the maximum width or height, maintaining their aspect ratio.

As we've seen previously, you can also individually override/customize the width and height for the thumbnails in each specific image modal or gallery modal tag, by using the thumbnail-width and thumbnail-height attributes.

All thumbnails are stored inside a subfolder of the location containing your original image, with the same filename of the original image appended by the dimensions. By default, the folder name is resized (so the thumbnail for image gallery/apples.jpg would be gallery/resized/apples_80x60.jpg), but you can customize the folder however you want.

Note that thumbnails will only be created for internal images hosted on your website. Thumbnails will not be generated for external images, which will be used regardless of the settings.

Custom thumbnails

As mentioned, thumbnails will be automatically generated based on the original image. But you also have the ability to manually create your own custom thumbnails.

Obviously, you can individually overwrite an automatically generated thumbnail of a specific size with a custom one by simply replacing that file.

Thumbnail base

Even cooler, you can upload your own special image that Modals will use (instead of the original) as a base to create all thumbnails of the various possible sizes. This can be useful for example if you want all thumbnails for your image be in grayscale, or zoomed-in on a particular area, or in any way different from the original image.

You can do so by inserting your custom image in the thumbnails folder, with the same filename of the original image (with no dimensions appended to the filename). For example, your custom thumbnail for gallery/apples.jpg would be gallery/resized/apples.jpg.

Manual thumbnails

If you turn off the "Create Thumbnails" feature, thumbnails will not be automatically created, but you can manually upload your custom thumbnail, which will be displayed with the dimensions you uploaded it with (it will not be resized).

To do so, the path and name of your custom thumbnail file for gallery/apples.jpg would be gallery/resized/apples.jpg.