A new major update for Modals comes with a built-in thumbnail generation for images and galleries, a completely rewritten documentation, and more!

Modals is the powerful plugin that allows you to easily create cool modal popups on your site, like this!. You can make modals / lightboxes for whatever you want: text, articles, other internal pages, external pages, images, videos, and even full-blown Modal Image Galleries & Slideshows with thumbnail creation.

Today a new significant version of Modals has been released, version 10. with new cool features and a completely revamped documentation, now more organized and detailed than ever.

Here is a breakdown of all the new features that have been added with Modals 10:

New Thumbnails System PRO

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 "Crop" option enabled, all thumbnails will be created with the exact width and height, meaning that if proportions are different, the image will be cropped to fill the specified dimensions. With the option disabled, the thumbnails will be created to the maximum width or height, maintaining its aspect ratio.

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 appendend 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.

Legacy Suffix Support

Older versions of Modals used a fixed suffix (by default: _t) to identify and store thumbnail images, instead of storing them in a subfolder.

In the Modal plugin settings you can enable support for this previous naming method. With this option turned on, Modals will first look for thumbnails stored with a suffix (for example the thumbnail for image gallery/apples.jpg would be gallery/apples_t.jpg) before looking for thumbnails stored in the specified subfolder.

Note: This option will be automatically set to on by default when updating from older versions, while it will be set to off for new installs.

New Image Attribute PRO

It's now possible to also make thumbnail links for individual image modals.

You can do so by using the new image attribute, and without placing any text between the {modal} tags, like:

Example:

{modal image="images/fruit/bananas.jpg" title="Totally bananas"}{/modal}

By default, the dimensions of the automatically created thumbnail will be based on your default settings. However, you can also individually customize the width and height of the thumbnail for each specific image modal, by using the thumbnail-width and thumbnail-height attributes:

Example:

{modal image="images/fruit/bananas.jpg" thumbnail-width="100" thumbnail-height="100"}{/modal}

Gallery Images & Thumbnails PRO

The Pro version of Modals allows you to a create and open a full-blown images gallery with arrow navigation. You can achieve this by simply using a single modal tag with a gallery attribute holding the folder that contains your images.

Example:

{modal gallery="images/gallery"}{/modal}

By default, *all* the images found in the specified folder will be displayed in the modal gallery in alphabetical order, and the first image found will be shown in the content as a thumbnail.

But you have several options to control the displayed images and thumbnails inside galleries. Now there are new images and thumbnails attributes, while the old show and showall attributes have been deprecated.

Limit/Order Images

If you only want certain images from the folder to show in the modal gallery, you can define them by using the images attribute.

Range of images

You can show a range of images by specifying the number of the first and last image you want to show. For example, to show only the first three:

Example:

{modal gallery="images/gallery" images="1-3"}{/modal}

Specific images

To show a selection of specific images only, simply list them separated by a comma. The modal gallery will also keep the order in which you list the images:

Example:

{modal gallery="images/gallery" images="bananas.jpg,strawberries.jpg,apples.jpg"}{/modal}

Random order

You can decide to show all images from the folder with a random order instead of alphabetical. This will also make thumbnails show in random order:

Example:

{modal gallery="images/gallery" images="random"}{/modal}

Thumbnails

Modals, by default, will automatically create and display thumbnail images as clickable links to the gallery.

To control number of displayed thumbnails, you can add a thumbnails attribute. Note that if you limited the images output by the gallery with the images or filter attributes, you will of course only be able to display thumbnails from that selection of images.

All thumbnails

To have thumbnails for all images included in the gallery in alphabetical order:

Example:

{modal gallery="images/gallery" thumbnails="all"}{/modal}

You can also make all thumbnails show by default in all your modal galleries by enabling the "Show All Gallery Thumbnails" setting.

Range of thumbnails

To show only a certain amount of thumbnails, simply specify the number. For example, to show the first 3 thumbnails:

Example:

{modal gallery="images/gallery" thumbnails="3"}{/modal}

You can also have a range of thumbnails not starting from the start, by specifying the number of the first and last image you want to show. For example, to show from the 2nd to the 5th thumbnail:

Example:

{modal gallery="images/gallery" thumbnails="2-5"}{/modal}

Specific thumbnails

To have a specific image as a thumbnail, you can simply specify the desired image name:

Example:

{modal gallery="images/gallery" thumbnails="strawberries.jpg"}{/modal}

Or for multple images, a comma separated list of image names or thumbnail numbers:

Example:

{modal gallery="images/gallery" thumbnails="apples.jpg,strawberries.jpg"}{/modal}

Example:

{modal gallery="images/gallery" thumbnails="1,3,5"}{/modal}

Random thumbnail

To have a random image as a thumbnail:

Example:

{modal gallery="images/gallery" thumbnails="random"}{/modal}

Thumbnail dimensions

By default, the dimensions of the automatically created thumbnails will be based on your default settings. However, you can individually customize the width and height of the thumbnails for each specific gallery modal, by using the thumbnail-width and thumbnail-height attributes.

You don't need to specify both width and height attributes - you can also just specify one, and all thumbnails will be created maintaining its aspect ratio.

Example:

{modal gallery="images/gallery" thumbnail-height="100"}{/modal}

When you specify both width and height attributes, all thumbnails will be created with the exact width and height, meaning that if proportions are different, the image will be cropped to fill the specified dimensions.

Example:

{modal gallery="images/gallery" thumbnail-width="100" thumbnail-height="100"}{/modal}

Custom link (no thumbnail)

If you place anything between the modal tags, that content will be used as a link to open the gallery instead of a thumbnail. This can be text, or a custom image, or basically anything you want.

Example: Click here

{modal gallery="images/gallery"}Click here{/modal}

And more...

• Adds ability to override the title and description of the modal in html image tags with data-modal-title and data-modal-description attributes
• Changes default styling of modals with images and videos to have no padding
• Moves Scale Photos and Retina Image settings to free version

Read the Changelog for Modals 10.0.0 for the full list of improvements and fixes that have been made in the new release.

For a complete overview of all the features included in Modals, head over to the full Documentation, and check out the Video Tutorials.