Gallery Widget

The Gallery widget shows several images from the file archive — either as a gallery (grid) or as a carousel (slideshow). Use it when you want multiple images shown together and browseable by the user.

When to use this

• You want to show a collection of images — products, environment shots, event photos
• The images should be grouped dynamically based on file tags
• You want an auto-rotating slideshow on a home page
• You want to give the user a way to flip through images in a compact area

How it works

The widget pulls images from the Files plugin archive. You can pick the images manually (specific files) or by tags (every file tagged with the chosen tags is included automatically).

The view mode controls how the images are presented:

• Gallery — images are shown in a grid where all of them are visible at once.
• Carousel — images are shown one or a few at a time and the user can swipe through. Supports autoplay.

Add a gallery

1. Enable the Files plugin in the applet's Plugin Settings.
2. Open the Design editor for your applet.
3. Add the Gallery widget to the page.
4. Open the widget settings.
5. Pick files manually or turn on Select from tags.
6. Pick View mode (Gallery or Carousel) and adjust the options.
7. Save your changes.

Widget settings

Files

Setting	Description
Select files	Opens the file picker against the file archive. Shows the number of selected files.
Select from tags	Turn on to include every file tagged with the chosen tags instead of picking files manually.
Tags	Multi-select over available tags. Shown when Select from tags is on.

TIP

Use Select from tags when the image collection grows over time — for example a press image archive where new images should appear automatically as soon as they're tagged correctly.

View mode

Segment control with two options:

Mode	Description
Gallery	Images are shown in a grid.
Carousel	Images are shown as a swipeable slideshow.

Gallery options

Shown when View mode is Gallery.

Setting	Description
Size	Value 1–12 that controls the size/number of columns in the grid. Lower = larger images, higher = more images per row.
Position	Horizontal placement of the gallery on the page — Left, Center, or Right.

Carousel options

Shown when View mode is Carousel.

Setting	Description
Height	Carousel height, 10–100 in steps of 10.
Adjust content	When on, the images fit the carousel's proportions.
Pagination	Shows dots under the carousel that indicate position and let the user jump to an image.
Slides per view	How many images are shown at once. Value 1–5 in steps of 0.1 (decimals so you can show "half of next image" as a teaser).

Autoplay

Setting	Description
Autoplay	When on, the carousel rotates between images automatically.
Speed (s)	Number of seconds between automatic transitions, 1–5 in steps of 0.5. Shown when Autoplay is on.

TIP

Set Slides per view to a decimal — e.g. 1.2 or 2.5 — to hint that more images can be swiped to. It helps the user understand the carousel is interactive.

Example

Scenario: You want an auto-rotating slideshow of event photos at the top of the home page, and a browsable gallery page listing every image tagged event.

1. On the Home page, add a Gallery widget:
   • Turn on Select from tags and pick event.
   • Set View mode to Carousel.
   • Height: 60, Slides per view: 1, Pagination: on.
   • Autoplay: on, Speed: 3 seconds.
2. On the Gallery page, add another Gallery widget:
   • Turn on Select from tags and pick event.
   • Set View mode to Gallery.
   • Size: 4 for four columns.

Both widgets update automatically as new images are tagged event.

Tips

TIP

For gallery mode — use a low value for Size (1–3) for big hero images and a high value (6–12) for thumbnails and overviews.

TIP

Carousel + autoplay + pagination gives you a classic hero slideshow. Turn off pagination for a cleaner look if you only have two or three images.

Common mistakes

WARNING

If you use Select from tags but no image in the file archive has the chosen tags, the gallery is empty. Check that the files are actually tagged.

WARNING

Too many images in the carousel with Autoplay on can make it hard for users to read content in time. Keep autoplay speed at a minimum of 3 seconds for images with text or detail.

WARNING

Slides per view above 1 works best for images of similar aspect ratios. Mixed formats can look uneven side by side.