Photo albums

Photo sliders

Add a new photo slider or adjust photos in the slider
Go to the page where you want to add or adjust the photo slider and make sure the page is in edit mode. At the top of the purple bar you can click on BACK TO EDIT to put the page in edit mode. You will now see the guides of the sections on the page. To the right of each content block, the edit button  will become visible when you hover over the block in question.

A content block is always in a section. If you started with an empty page, first add a section so that you can then add a photo slider. Read more about sections and how to add them.

Slick slider

• Click on + Add block within the section and choose Slick slider
• For an existing photo slider, click on  and then on Edit
• Open the tab with the desired photo ratio or open the correct tab to replace existing photos. In the example below we choose a 16:6 ratio, the photos you add will be shown in this ratio in the slider.

• Under the tab with the desired photo ratio, click on the purple button Add Media
• The Media manager will open, choose an existing image or upload a new image in the Media manager Want to know more about the Media manager and uploading and setting new images? Look at the Media manager page
• The uploaded photos will be shown in the chosen photo ratio, you do not have to make them the right size yourself With a photo ratio that is wide and very low, part of the photo will be lost at the top and bottom Once the photos have been added, you can set or adjust the slider settings under the Slider details tab.

Setting the slider details

• SlidesToShow / Show slides: how many slides do you want to see on the page at the same time? This can be 1 photo (see example), but also e.g. 3 next to each other (see example)
• SlidesToScroll / Slides scroll at a time: how many slides do you want to scroll at a time. If you only show 1 photo at a time, you will only want to scroll 1 photo. If you choose to show 3 photos at a time, you can also scroll 1 photo, then 1 photo will disappear each time and 1 new photo will be added. If you scroll 3 photos at a time, 3 new photos will be shown at once.
• Slider width
  Full width: Leave Slider width at 100% if you want to show the photo at full width. (can be done with or without the option  fade checked).
  White space on the side: if you want the slider to be narrower with space on the sides, set this under the Settings tab for margin left and margin right (can be done with and without option  fade checked).
  Centered with preview: If you use a narrower Slider width, e.g. 96%, check Center Mode to center the slider. Due to the smaller size, you will now see a small piece of the next photo on the sides. (not possible with option  fade checked).)
  Multiple photos with small space in between: If you have set SlidesToShow to show multiple photos next to each other, you can set the Slider width to e.g. 99% to create a small white space between the photos. (not possible witht option  fade checked).

• Slider height- Leave this on auto so the photos stay in proportion.
• Speed - the speed of the transition effect to the next photo cssEase
• Dots or arrows - do you prefer to navigate through the photos with the arrows on the left and right or by clicking on the dots below the photos? You can also show both. You can also show neither, make sure that autoplay is checked.
• Center modus - this centers the slider when you have entered less than 100% in Slider width and shows a piece of the previous and next photo on the sides
• Autoplay - lets the slider automatically go to the next photo. If you uncheck this, you will need the arrows or dots to navigate through the photos.
• Autoplay speed - the time before the next photo is shown when Autoplay is enabled
• Fade - with this option checked, the photos flow into each other- fade effectwith the option unchecked, the new photo slides into view from the right - slide effect. The fade effect (fade checked) is only possible with SlidesToShow 1, with multiple photos you use the slide effect (fade unchecked)
• Infinite - checked, this ensures that after the last one the first one is shown again
  Unchecked, after the last photo the second to last one is shown and goes back to the first photo.
• Slider caption - the text that is filled in in the media manager with the alternative text is shown below the photo

Block settings

The settings in the tabs Settings, Animation and Advanced are the same as in the other content blocks. For more information about these block settings see Edit page

Responsive settings

If you have set the slider details to show multiple photos, e.g. 3 next to each other, then the 3 photos are easy to see on desktop format, but on a mobile phone screen the photos become very small. You can then set that you want to show 2 or 1 next to each other instead of 3.

In the edit screen under the Advanced tab you can make adjustments for the number of photos that are shown in responsive view.

You can specify per screen width how many images should be shown, for the different widths you always have the options:

• SlidesRoShow: / how many photos should be shown
• SlidesRoScroll: / how many photos do you want to move at the same time

Clicking on a photo will open an enlargement. If you want a caption for a photo, make sure that an alternative text is filled in when uploading the photo in the Media manager, this will be used as a caption. Read more about the alternative text in the Media manager.

Masonry photo collage

Add a new masonry or adjust photos in an existing masonryPut the page in edit mode and make sure that there is a section on the page in which you can add the masonry. Read more about this at the beginning of this page if you are not yet familiar with this.

• Click on + Add block within the section and choose Masonry
• For an existing Masonry, click on   and then on Edit
• Choose how many photos you want to show horizontally next to each other on different screen formats; on a small screen you probably want fewer than on a large screen
• Add an image via the purple Add Media button. Via the Media manager, choose an existing image or upload a new image. Want to know more about the Media manager and uploading and setting new images? Check out the Media Manager page

Blok settings
The settings in the Settings, Animation and Advanced tabs are the same as in the other content blocks. For more information about these block settings, see Edit page