Docs

Image Gallery widget

Image gallery widget logoImage Gallery allows you to select images and place them on the page as a group of smaller thumbnails. Clicking a thumbnail open the original image fullscreen.

You can edit the template of both the gallery and its nested widgets similar to Image Preview.

Edit Gallery screenshot Edit Gallery Preview screenshot

Configuration

The Image Gallery widget is combined of two. Inside the gallery there are widgets like Image Preview, but adapted to display image inside the gallery (with their own templates). That is why Image Gallery has two subsections inside the widgets section.

In the ImageGalleryPreview section you can configure displaying of each particular image, similar to the Image Preview widget.

The ImageGallery widget sets classes, styles and attributes to the element (the <div> tag) wrapping all images.

Настройки по умолчанию:

widgets: {
    ImageGalleryPreview: {
        templateLink: {
            classes: [],
            styles: {
                "background-color": "white",
                "margin": "7px",
                "outline": "none"
            },
            attributes: {
                "rel": "lightbox"
            }
        },
        templateImage: {
            classes: [],
            styles: {
                "width": "250px",
                "outline": "none",
                'display': 'flex'
            },
            attributes: {}
        }
    },
    ImageGallery: {
        templateGallery: {
            classes: [],
            styles: {
                "display": "flex",
                "flex-wrap": "wrap",
                "background-color": "#EEE",
                "padding": "7px",
                "width": "fit-content",
                "margin": "15px auto",
            },
            attributes: {}
        }
    }
},