You can use the Gallery widget to place several images in one place. This widget allows you to upload an unlimited number of images and allows you to organize a gallery of images on the site.

You can use images from your site's library in the "Gallery" widget, or upload up to 20 different images simultaneously. Note how the widget is implemented on this site. You can see in the code that all photo and video content on the site is implemented through the "Gallery" widget.

Important:

The size of uploaded images should not exceed 5 megabytes. If one of the uploaded images weighs more than 5 megabytes, the uploaded images will not be completed successfully.

When multiple images are uploaded, the order is formed depending on how fast a particular picture was uploaded to the constructor.

Tip:

If you want to change the order of the images in the "Gallery" widget, you can switch to the "Slideshow" design and swap out the images.

There are currently two gallery widgets in the designer - a new version of Gallery New with new features and a previous version of Gallery. You can find the former version of the gallery in the "Old Widgets" section.

You can change the order of images in the gallery, duplicate already uploaded images or delete unnecessary images. To do this, click on the "Edit Gallery" button that appears above the widget when you click on it, and use the corresponding settings icon. To change the order, pinch the image with your left mouse and drag it to the desired location.

You can replace a previously uploaded image, specify alt and title attributes, assign a link to the image, and crop to remove excess in the uploaded photo. To view these settings, you need to click on the image in the gallery after you go to the widget settings. 

There are three design types available within the widget:

1. Grid
2. Slider
3. Collage

Grid

If you select the "Grid" design, you will get images with the same aspect ratio, which may cause pictures to be cropped if their aspect ratio is not the same as the picture in the widget. Available settings in the Grid design:

    Number of Columns - you can choose the number of columns of images.
    Indentation between photos - you can turn them on or off, and adjust their size in pixels by clicking on the gear next to the setting.
    Caption - you can turn on a caption for pictures in the gallery. All you have to do is choose its location, alignment and text color by clicking on the gear next to the setting.
    Click Preview - allows your visitors to get a closer look at the uploaded picture when they click on it.

Slider

Works visually like the regular "Slider" widget, but in this case you can't set a background. Unlike the Slider widget, you will be able to upload an unlimited number of slides to the Gallery widget. For this design, you can customize the following:

    Arrows - you have the ability to enable or disable slide switch arrows, as well as set their color and choose a view from the options offered.
    Indicators - for the slide switch, you can also choose the view from the suggested options, set their color and location.
    Caption - shows the caption of the pictures. Among its settings you can choose its location, alignment and text color.
    Click Preview - Enlarges pictures by click.
    Auto Scroll - enables auto scrolling of the slider. You can specify the time interval after which the slide will automatically switch.
    Show slides in a circle - if this option is enabled, the first slide will be shown after the last one and so on in a circle.
    Slide Switching Animation - you can choose from 2 slide switch animations.

Collage

If you select this type of gallery, then your site will automatically line up pictures in different order depending on the aspect ratio of the uploaded images. Available settings in the Collage design:

    Collage design - you can choose the best arrangement of pictures for your site from the provided options.
    Indentation between photos - you can turn them on or off and adjust their size in pixels by clicking on the gear next to the setting.
    Caption - you can enable picture captions and choose their location, alignment, and text color by clicking the gear next to the setting.
    Click Preview - allows your visitors to enlarge the uploaded picture when they click on it.

Gallery widget settings

You can replace the previously uploaded image, specify your caption and alt attribute, as well as crop to remove excess in the uploaded photo. To view these settings, you need to click on the pencil in the box with that image. You can also remove unwanted images in the gallery by clicking on the trash can icon. You can use this site as an example of a proper setup.

There are three types of design available within the widget:

1. Grid
2. Collage
3. Slideshow

Grid

If you select the "Grid" design, you will get images with the same aspect ratio. If you select this design, images may be cropped if their aspect ratio is not equal to the image's aspect ratio in the widget. Available settings in the "Grid" design:

    Number of Columns - you can choose the number of columns of images.
    Magnify photo by click - allows your visitors to see the uploaded picture closer.
    Show caption - in this case visitors will see the caption of the picture. You only need to choose when it will appear: when hovering over image or will be permanently placed under image.

Collage

If you choose this design, then in this case your site will automatically line up pictures in different order depending on the aspect ratio of uploaded images. Available settings in the Collage design:

    Zoom in on photo by click - will allow your visitors to see the uploaded picture closer.
    Show caption - in this case visitors will see the caption of the picture. You only need to choose when it will appear: when they hover over the image or will be permanently placed under the picture.
    Orientation - your collage will be placed according to the chosen orientation.

Slideshow

Visually works like the regular Slideshow widget, but in this case you will not be able to set a background. Unlike the Slideshow widget, you will be able to upload an unlimited number of slides to the Gallery widget. For the "Slideshow" design you can configure the following:

    Show Caption - shows the caption of the pictures.
    Auto Scroll - enables auto scrolling of the slider. You can specify the interval after which the slide will automatically switch.
    Slide switch - here you can set the slide switch. It can be either toggle arrows or full-size image thumbnails, clicking on which will take your visitors to the slide they want.
    Slide Switching Animation - you can choose from 4 slide switch animations.