Thumbnails
One main image with a synced strip of clickable thumbs — a slider, on any of five sides.
Thumbnails is the layout for looking at images one at a time. A large main image sits beside or above a strip of small ones; clicking a thumb changes the main image, and the strip scrolls to keep up.
When to use it
- Product detail galleries.
- A single project or property shown from several angles.
- Any gallery where the visitor should study one image at a time rather than scan a wall.
Thumbnails is a self-contained layout
Because it builds a slider rather than a page of tiles, it hides the panels that couldn't mean anything here: Order, Ajax Pagination, Image Filter & Search, Motion Effects, the shared Horizontal / Vertical Gap (it has its own), and Image Click Action — its main slides deliberately don't take a click action, so the lightbox isn't available on this layout.
The panels it does show are Image & Video Settings, Content Settings (Overlay only) and Advanced Settings.
Its own settings
Thumbnails is the one layout whose Layout Settings panel has its own Settings and Style tabs.
Settings tab
| Control | What it does | Default |
|---|---|---|
| Number of Thumbnails | How many thumbs the strip shows at once. Responsive, 1–12. (Only shown in Static area mode.) | 5 / 4 / 3 |
| Thumbnail Positions | Where the strip sits: Bottom, Left, Right, Top, Bottom Inside (overlaid on the main image). | Bottom |
| Thumbnails Area Width | Auto sizes the strip to its thumbs and lets it scroll. Static fills a fixed track with Number of Thumbnails. | Auto |
| Thumbnails Width | The strip's fixed size. For a bottom/top strip in Static mode, that's the whole track (80–1200 px, default 500 / 400 / 300). For a left/right strip it's the column width (60–400 px, default 110), and it applies in both modes. Responsive. | see left |
| Thumbnails Height | Each thumb's height, 40–400 px, responsive. Hidden for a left/right strip in Static mode, where the count decides it instead. | 90 |
| Thumbnails Gap | Space between thumbs, 0–60 px, responsive. | 8 / 8 / 6 |
| Active Thumbnail Style | How the current thumb is marked: Border Around, Bottom Line, Zoom Out, Overlay, Opacity, Grayscale. | Border Around |
| Alignment | Left / Center / Right for the strip. | Left |
| Navigation Arrow | Prev/next arrows on the main image. | Off |
Auto vs Static, in one sentence
Auto means "show the thumbs at their natural size and let the strip scroll"; Static means "fit exactly this many into this much space".
Style tab
| Control | What it does | Default |
|---|---|---|
| Autoplay | Advance the main image on its own. | Off |
| Sliding Speed | Transition duration, 0–10000 ms in steps of 100. | 500 |
| Thumbnail Hover Effects | Normal, Zoom In, Zoom Out, Slide Up, Slide Down. | Normal |
| Active Border/Line | Thickness of the active thumb's border or line, 0–20 px, responsive. | 2 |
| Active Border/Line Color | Its colour. | #3858e9 |
| Thumbs Area Background | Background behind the strip. | None |
| Thumbs Area Border · Border Radius · Padding | The strip's own box. Radius and padding take px / % / em. | None / 0 |
| Pause on Hover | Pause autoplay while the pointer is over the gallery. | On |
| Infinite Loop | Wrap from the last slide back to the first. | On |
| Tab & key Navigation | Let visitors move through slides with the keyboard. | Off |
Turn keyboard navigation on
It's off by default, but a slider that can't be operated from the keyboard is a slider some visitors can't use at all. See Accessibility.
Things worth knowing
Its runtime is a separate bundle. The slider's JavaScript is only requested by a page that actually has a thumbnails gallery on it. A site that never uses this layout never downloads it.
Captions are overlaid, not stacked. Content Settings' Content Display Style control isn't shown here; titles and descriptions are drawn over the main slide. That's a design decision rather than a limitation — a caption pushing a slide shorter reads worse than one sitting over it. Your stored Classic setting isn't rewritten, so it returns if you move the gallery to another layout.
The thumbs are buttons, not tiles. They don't carry titles, descriptions, hover animations or click actions of their own — they're navigation.
Vertical strips are sized differently. A bottom or top strip is one long track holding several thumbs side by side; a left or right strip is one thumb wide. That's why Thumbnails Width means something different for each, and why the defaults differ so much.