The Pro version of Modals also 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.

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

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:

{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:

{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:

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

Include Subfolders

You can decide to also include images from all the subfolders of the given parent folder, by adding include_subfolders="true":

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

Advanced Filtering

For a more advanced control over the images shown, you can use the filter attribute, which allows you to filter images by matching part of the filenames.

This example only shows images from folder images/gallery that contain "berries":

Blueberries Strawberries
{modal gallery="images/gallery" filter="berries" thumbnails="all"}{/modal}

The Filter attribute supports Regular Expressions. For example, to only show images from folder images/staff that start with 'team-accountancy-' or 'team-finance-':

{modal gallery="images/staff" filter="^team-(accountancy|finance)-"}{/modal}

For more info on Regular Expressions:


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:

Apples Bananas Blueberries Limes Oranges Strawberries
{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:

Apples Bananas Blueberries
{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:

Bananas Blueberries Limes Oranges
{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:

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

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

Apples Strawberries
{modal gallery="images/gallery" thumbnails="apples.jpg,strawberries.jpg"}{/modal}
Apples Blueberries Oranges
{modal gallery="images/gallery" thumbnails="1,3,5"}{/modal}

Random thumbnail

To have a random image as a thumbnail:

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

All thumbnails in random order

You can show all thumbnails in a random order by combining the thumbnails attribute with the images attribute.

Blueberries Limes Apples Bananas Strawberries Oranges
{modal gallery="images/gallery" images="random" thumbnails="all"}{/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.

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

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

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

Start on a different image

By default, when opening the gallery via a text link (no thumbnail), it will start on the first image found in the gallery in alphabetical order.

If you want the gallery to start on a different image instead of the first image, add a first attribute to specify the desired image:

{modal gallery="images/gallery" first="bananas.jpg"}Click here{/modal}

To start on a random image, set the first attribute to random:

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


To make the gallery act like a slideshow that cycles through the images automatically, simply add slideshow="true" to the modal tag.

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

The Slideshow Speed can be set in the Modals plugin settings or with the attribute slideshowSpeed.

Images from different folders

What if you want to create a gallery modal but your images are not all in the same folder? You can do this as well, thanks to the "Grouping" feature that allows you to group multiple modals.

To create a gallery with your own specific images, create a modal tag for every image and then group the modals together by adding a group attribute to all modal tags.

Bananas Limes Strawberries
{modal image="images/fruit/b/bananas.jpg" group="my-fruit-group"}{/modal}
{modal image="images/fruit/l/limes.jpg" group="my-fruit-group"}{/modal}
{modal image="images/fruit/s/strawberries.jpg" group="my-fruit-group"}{/modal}

To create a slideshow on these custom galleries, you need to add slideshow="true" to every modal tag in the group.

Bananas Limes Strawberries
{modal image="images/fruit/b/bananas.jpg" group="my-fruit-slideshow" slideshow="true"}{/modal}
{modal image="images/fruit/l/limes.jpg" group="my-fruit-slideshow" slideshow="true"}{/modal}
{modal image="images/fruit/s/strawberries.jpg" group="my-fruit-slideshow" slideshow="true"}{/modal}

Titles & Descriptions

By default, Modals will convert the image filenames to Titles, and show them on top of the modal popup for each image.

But you can override image titles with your custom ones, as well as additional descriptions that will display under the title, by placing a data.txt file in the same folder where images reside. You can also specify additional information such as alternate text or different attributes specific to the thumbnail images.

Here is an example of a data.txt file showing you the different possibilities:

title_apples=My special title for Apples image
description_apples=Description specific for Apples image
alt_apples=Separate alternate text for Apples image
thumbnail_title_apples=The title of the thumbnail for Apples image
thumbnail_alt_apples=The alternate text of the thumbnail for Apples image

description=Base description that will show for all other images in the gallery