Gallery widget

the image gallery The widget allows you to easily add and design complex and beautiful images galleries on your page.

Content

Configurations

1. Type: Select the type of gallery, choosing between Single or Multiple. Multiple allows you to have a filterable portfolio style image gallery.
2. Add images: Choose multiple images from the media library to insert into your gallery and write a Title for the gallery.
3. Sort by: Choose default or random order
4. Slow loading: Set Yes to use Lazy Load to improve loading speed.
5. Design: Select from Grid, Justifiedor Brickwork.The Grid it is based on an aspect ratio of your choice. Justified allows you to set the height of each row and adjusts to different widths per image. Brickwork maintains the same image width and adjusts to different heights.
6. Columns: Sets how many columns will be displayed per row, from 1 to 24. Not available if Justified The design is chosen.
7. Row height: Sets the height of each row, in pixels. Only available if Justified The design is chosen.
8. Spacing: Controls the amount of space between each image in a row.
9. Link: Set the link for the images to None, Media file or Custom URL
10. Aspect ratio: Choose the aspect ratio, selecting from 1: 1, 3: 2, 4: 3, 9:16, 16: 9 and 21: 9. Only available for grid layout.
11. Image size: Set the image size, from thumbnail to full, or enter a custom size.

If Type: Multiple is chosen, the following additional options from the Filter Bar will be available:

Filter bar (only available if multiple type is chosen)

1. Filter «All»: Select Yes to include the filter "All" or No to exclude it.
2. Filter label «All»: If set to Yes, enter the desired label. "All" is the default.
3. Pointer: Select the pointer used when hovering over each filter label. Choose from None, Underline, Overline, Double Line, Framed, Background, or Text.
4. Animation: Sets the animation style of the pointer. Choose from Fade, Slide, Grow, Drop, Drop, or None.

Cover

1. Background: Select Yes to have an overlay appear when you hover over each image, or No to have no overlay.
2. Title: Choose which meta attribute to display as the title of the overlay. Select from Image Title, Caption, Alt, Description, or None.
3. Description: Choose which meta attribute will be displayed as Description of the overlay. Select from Image Title, Caption, Alt, Description, or None.

Style

Image

1. Border color: Choose the border color of the image, for Normal and Hover states
2. Border width: Choose the border thickness only for the Normal state.
3. Edge radius: Controls the roundness of the corner of the edge of the image, for Normal and Hover states.
4. CSS filters: Set CSS filters, selecting from Blur, Brightness, Contrast, and Saturation for Normal and Hover states.
5. Scrolling animation: Choose hover image animation, selecting from None, Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down, for Normal and Hover states.
6. Animation duration (ms): Sets the amount of time the animation takes, in milliseconds.

Cover

1. Cover: Select the type of overlay (Classic or Gradient) for Normal and Hover states of images.
2. Colour: Set the overlay color or gradient colors for Normal and Hover states of images.
3. Blend mode: Select from various layer effects, including Normal, Multiply, Screen, Overlay, and more. See blending mode demo
4. Scrolling animation: Choose the overlay entry or exit animation when hovering. Select from Swipe Right, Swipe Left, Swipe Up, Swipe Down, Zoom In, Zoom Out, and Fade. If input animation is chosen, images are displayed with full opacity in Normal state, with the overlay covering the image when hovering over the mouse. If Exit Animation is chosen, the overlay covers the image in the Normal state and is removed on mouse over.
5. Animation duration (ms): Sets the amount of time the animation takes, in milliseconds.

Content

1. Alignment: Aligns content to the left, right, or center
2. Vertical position: Align content to the top, middle, or bottom
3. Filling: Adjusts the content padding

Title

1. Colour: Choose the title color
2. Typography: Sets the font options for the title
3. Spacing: Sets the amount of space between the title and description

Description

1. Colour: Choose color from description
2. Typography: Sets the font options for the Description

1. Scrolling animation: Choose the input, reaction or output animation of the content when hovering the mouse. For the input animation, select from Swipe Right, Swipe Left, Swipe Up, Swipe Down, Zoom In, Zoom Out, and Fade. For the reaction animation, select from Zoom In, Zoom Out, Move Left, Move Right, Move Up, or Move Down. To exit the animation, select from Swipe right, Swipe left, Swipe up, Swipe down, Zoom in, Zoom out, and Disappear.
2. Animation duration: Sets the amount of time the animation takes, in milliseconds.
3. Sequenced animation: Set Yes so that the title and description are animated in sequence. Set to No so that the Title and Description are animated at the same time.

Filter bar

These additional filter bar options are available only if Type: Multiple was chosen.

1. Text color: Choose the color of the filter bar text for Normal, Hover and Active states.
2. Typography: Set the typography options for the filter bar text.
3. Pointer color: Choose the color of the filter bar pointer. Only available in Hover or Active states.
4. Pointer width: Select the thickness of the pointer.
5. Space between: Controls the amount of space between text elements in the filter.
6. Gap: Control the amount of space between filter text and gallery images.

Advanced

Set the advanced options that are applicable to this widget