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.

Screenshot of the Gravity Forms editor

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.

Screenshot of the form editor showing the field configuration panel for the File Upload field

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.

The Gear icon for bringing up the Field Settings in GravityView

Set the Custom CSS Class to "gv-gallery"

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

Screenshot of the file upload field settings

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.

Screenshot of the View Settings panel

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.

Images displayed one after the other in a list

After

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

Images displayed next to each other in a grid layout

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