Gallery Widget
The Gallery displays images and content in a grid and provides different layout, animation and overlay options. A lightbox can be enabled to show a larger version of your media.
Dynamic Grid
The Gallery widget provides the option of arranging items fluently and seamlessly for a gap-free multi-column layout on all device sizes. You can filter items by name or tag.
Gutter
You can set different gutter widths or remove the gutter completely for a tiled image layout. Independently from the overlay, you can add different animations to the image.
Overlay
Display your content in an overlay. You can apply a background, animation and determine the alignment. The overlay can be triggered on hover or remain visible at all times.
Panels
The Gallery widget can also display content in an image caption with different panel styles. You can split content parts to be shown in the caption and the overlay.
Redbrick House
USB Stick
Boardwalk
Backwoods
Tablet
Wooden Box
Additional Fields
Some of the elements that you can display inside a Gallery widget need to be defined first by creating an additional field inside the Content Manager.
| Field | Description |
|---|---|
| Tags | Need to be created for filtering items. |
Gallery Options
| Layout Options | Settings | Description |
|---|---|---|
| Grid Behaviour | Match Height, Dynamic Grid | Match the height of grid items or display them in a masonry style. |
| Grid Gutter | Default, Collapse, Small | The spacing between grid columns. |
| Grid Filter | none, Text, Divider, Nav, Tabs | The navigation to filter grid items. |
| Grid Alignment | Left, Center, Right | Alignment of the filter navigation. |
| Columns Phone Portrait | 1, 2, 3, 4, 5, 6 | Number of columns on phones in portrait view. |
| Columns Phone Landscape | Inherit, 1-6 | Number of columns on phones in landscape view. |
| Columns Tablet | Inherit, 1-6 | Number of columns on tablets. |
| Columns Desktop | Inherit, 1-6 | Number of columns on desktops. |
| Columns Large Screens | Inherit, 1-6 | Number of columns on large desktops. |
| Items Animation | None, Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to grid items when scrolling into view. |
| Media Options | Settings | Description |
|---|---|---|
| Media Image | [Number] | Set the width and height of Gallery images in pixels. |
| Media Border | None, Circle, Rounded | The appearance of gallery images. |
| Overlay Appearance | Image Caption, Overlay Center, Overlay Bottom | Display content in an image caption or different overlays. |
| Overlay Background | None, Steady, On hover | Add a background to the overlay at all times, on hover or not at all. |
| Use second image as overlay if exists | Create a second media field in the content settings, which will automatically be displayed as an overlay. | |
| Overlay Toggle content on hover | Hide content by default and display it on hover. | |
| Overlay Animation | Fade, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to the overlay when being displayed on hover. |
| Overlay Image Animation | None, Fade, Scale, Spin, Grayscale | The animation that will be applied to the image on hover. |
| Content Options | Settings | Description |
|---|---|---|
| Text Display | Show or hide title and content. | |
| Text Title Size | Default, H1, H2, H3, H4, Extra Large | Define the font size of the title. |
| Link Display | Display the Read More link. The link URL is added to each item in the Content Manager. | |
| Link Style | Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button, Button, Button Primary, Button Large, Button Large Primary |
Set the style of the Read More link. |
| Link Text | [Text] | Define the link text. |
| Lightbox Options | Settings | Description |
|---|---|---|
| Lightbox Enable | Show/ hide the lightbox. | |
| Lightbox Image | Width, Height | Set the image’s width and height in pixels. |
| Lightbox Caption | None, Use Title, Use Content | Set the content which will be displayed inside the lightbox caption. |
| Button Display | Show/ hide lightbox button. | |
| Button Style | Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button, Button, Button Primary, Button Large, Button Large Primary |
Set the styling of the button that opens the lightbox. |
| Button Text | [Text] | Define the button text. |
| General Options | Settings | Description |
|---|---|---|
| Custom HTML Class | [Text] | Set a custom HTML class that will be added to the widget element in the rendered output. |