Headlines:
General settings
Content properties
Selected item properties
Managing media in the gallery
Gallery type specific settings
Slider properties
Grid properties
Swiper properties
Random - properties
In this article you will learn how to create a gallery of pictures and videos.
By choosing the content type media gallery an overlay opens up where you can choose between 4 different gallery types. Select one of them and click "Select".
As soon as you have selected the gallery type, the media database opens from the left side, where it is automatically filtered by images and videos. Now you can further narrow down your search by using filters or the search bar for full text search. In addition, you have the possibility to upload more media by clicking the plus icon. More about this: Upload Media
To insert the image gallery click on the desired media in the search results while holding down the Ctrl/Cmd key. These images or videos will then be placed in the active area in the selected order by clicking on "Insert" or you can use the Enter key.
To customize your gallery according to your wishes you have the following options:
General settings
Content properties
Here you have the possibility to change the type(1) of the gallery again and to insert a caption, as well as to adapt the appearance of this legend(2). The appearance of the legend, text formatting, color settings and icons can be changed here. Furthermore you can enable autoplay(3) for the gallery and define if images and videos should be displayed in fullscreen(4) on click (during the presentation). With this option you can also choose the color of the background, which can be visible during the presentation if the image is not exactly 16:9. Please note that if you use the fullscreen option, you cannot set a link in your gallery as clicking the element will open up the element in fullscreen. So you can either link your gallery or use it to view the media files in fullscreen.
Set the padding(5) of the gallery to the edge of the area, and set media to fill(6) or fit(7).
The following settings can be made for the caption (2):
- the position of the legend
- text formatting
- color of the background
- color of the title
- color of the description
- Icons (type, size, color)
Selected item properties
These settings affect the currently selected image/video.
- You can exchange(1) and link(2) the selected item and also fill in title and description(3) here. Find out more about the linking possibilities here: Linking Possibilities at a Glance
presono's tip:
It is not possible to display media on click in full screen and link them at the same time. So the fullscreen option is automatically disabled when a link is applied on an image or video. - In the "Options" you will find the possibility to design this image differently from the rest of the gallery. Select "Overwrite global setting" and specify whether this image should fill or be fitted into the area(4).
Images:
If the current item is an image, you can use the "Advanced options(5)" to adjust the size and position of the image. In the "Image Properties(6)" you will find the possibility to set your image to grayscale.
Videos:
If the current item is a video, you will see the "Video Properties" instead of the "Image Properties". Here you can display the "Show Video Controls(1)" and also the "Show Advanced Video Controls(2)". You can also set whether the video is looped(3) and played automatically(4). You can turn the play button(5) on or off and of course you can also turn off the sound(6) for the video.
PDF:
If you are editing a PDF, you have the following options: You can adjust the size of the PDF (1) to the highest or widest page. You can turn on/off the sidebar (3) and set the width of the sidebar (2). You can also restrict which pages (4) of the PDF should be used here.
Managing media in the gallery
Below the usual layer list of the slide, you will find a list of the media that are used in the gallery. Here you can select the images and videos to exchange them. To change the order of the media, use the arrow icons(1) or drag and drop them. To add or delete media, click the plus icon(3) or the trashcan icon(2). To make this area slightly larger, you can collapse(4) the layer list above it. Also there will be small icons if the media file is a video or a pdf as well as if there is a translated media file in use (5).
Gallery type specific settings
Slider - properties
1. Arrows
Here you can set the position(1) of the arrows or hide them. You can also choose the icon and size(2) of the arrows and also the color(3). You can also define a color which the arrows should take on mouseover(4).
2. Thumbnails
Also for the thumbnails you can choose to place(1) them inside or outside the image, or hide them.
You have the possibility to display the preview images as thumbnails or dots(2) and define their position(3). The settings for the size(4) of the thumbnails define their size in pixels. If you want to change the aspect ratio of the thumbnails, select "Cover given ratio(5)" and adjust the thumbnails with the slider, or fill in the desired values.
To define a background color(6) and a border color(7) for the thumbnail of the active image, select the desired color in the color picker.
3. Orientation
For the orientation of the slider you can choose between horizontal and vertical.
4. Animation
You will find three options here: Slide, Fade or Carousel. With the first two options, only the transition duration(1) can be adjusted. With the carousel there are more options:
- the transition duration can be adjusted (1)
- the spacing of the images left/right (2)
- the arrangement (appearance of 2D or 3D) (3)
- the distance to the camera (i.e. the zoom) (4)
- the focal length (5)
- everything can also be reset (6)
Grid - properties
Gap size
Here you can set the grap size between the images(1). As soon as you enter a value here, the buttons next to it are activated. Here you can choose if the grap should be applied only between the images or also to the border of the area(2).
Column count
Specify the number here (3) individually.
Animation
First you have to activate the animation (4) and then you can choose the style (5). You can choose between "Colorize" and "Zoom". Both can only be played automatically. When coloring, all images are kept in black and white, only the current image is colored, it will switch to the next image automatically. When zooming in, a zoom effect is applied to the current image.
Swiper - properties
Arrows
Here you can set the position(1) of the arrows or hide them. You can also choose the icon and size(2) of the arrows and also the color(3). You can also define a color which the arrows should take on mouseover(4).
Scrollbar
Show or hide(1) the scrollbar here and choose a suitable color(2).
Media aspect ratio
Adjust the aspect ratio of the images with the slider(1) or fill in the desired values(2). You can also define any ratio(3) of height to width.
More Options:
-
Alignment and number of rows/columns: For the direction(1) of the slider you can choose between horizontal and vertical. Depending on which selection you have made here, you can then choose the number of columns or rows.
-
You can adjust the distance between the images(2).
-
You can also select the option "infinite" (3), then you can continue in the endless loop without reaching an end.
Wave
With the last option you can switch on the type "wave" for the display of your gallery. The images will be displayed alternately on the top and on the bottom - thus arranged in a wave form. Once you select this option, you have some additional options: you can set the wave strength and length(1), as well as the offset (2).
For example, if the wavelength is set to "4", it means that 4 images will be placed next to each other on one wave. The shift determines where the wave starts on the left.
Two presets you can be chosen here, too - "Wave"(3) and "Alternate"(4). Here the parameters are set automatically, but of course you can still adjust them.
Random - properties
In this type of galery, one of your selected images is always randomly selected and displayed. So every time the slide is opened or presented, a new, randomly selected image is displayed. If you select the option "play automatically", a new image will be displayed in the area at a definable time interval.
You might also be interested in: