Creating an image gallery (displaying images in a grid)

If, after following the tutorial below, you can't get the images to open on a lightbox, then please read here how to fix that: Fix lightbox links not being added to images.

If you have many images you wish to use as a gallery, you need to add a File Upload field to your Gravity Forms form (if it doesn't already have one), then enable functionality using the steps below. Note: the gallery currently only works with images, not audio or video uploads.

Prefer to Watch the Video?

Add a File Upload Field

(If your form already has a File Upload field, you can skip this step.) 

In the Gravity Forms editor, click File Upload to add a File Upload field to your form.

Grid of buttons for uploading files and other form inputs, highlighting the "File Upload" option

Enable Multi-File Upload

Check the setting named "Enable Multi-File Upload" to allow uploading more than one image at a time. This will allow the images to be grouped into a gallery instead of shown one at a time.

Enable multi-file upload option checked for file upload settings

Edit the View you would like to add a gallery to

The Edit link for a View in GravityView

Click the gear icon on the Multiple File Uploads field

Choose the field you want to turn into a gallery.

Settings icon for entry field customization in image gallery creation

Set the Custom CSS Class to "gv-gallery"

Make sure to use gv-gallery without the quotes, like so:

File settings showing options for displaying images in a gallery, including width and custom CSS class

Check "Enable lightbox" in the View Settings box

If you don't enable the lightbox, the images will still look better, but the slideshow functionality will not work. See the bottom of this how-to for an example.

Settings menu with checkbox to enable lightbox for images

Save or update the View

The Update button

Edit (or create) an entry for the form and upload images to the field

You can add as many images as you like. Once uploaded, they will be displayed as a gallery.

Uploading multiple images to a File Upload field in Gravity Forms

Before

Before: each image is displayed full-size and as a bullet list.

Grid layout displaying six cat images vertically

After

After: the image sizes are reduced and the images are displayed as a grid.

Grid layout displaying six diverse cat images

And clicking any gallery image will zoom in

You can then navigate between the images using the left and right arrows.

An enlarged image
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us