Image Gallery

Step 1. Creating a static image gallery  

Go to the page you want to add the image gallery to. 

Find the widget 'Image Gallery' and drag it to your page structure. 

Click on 'Edit the widget', so the popup that let you edit your widget appears. 

Fist you can give your gallery a appropriate name, remember to do set this on every language. 

Choose the photos you want to have in your gallery by clicking on the 'add images' button and select the images.  

When clicking on 'Select' you will see your chosen images. 

Lets save our changes and see how our gallery looks like now. 

As seen above the gallery covers the whole page, we need to add some flexboxes under our gallery widget to size down the gallery. 

I added two flex boxes with configurations (e.g. container wrapping as styling), so it is down to the size I want to have on my gallery. 

As you see above the image showing that it is more photos in the Gallery is not on line with the other images.  This is due to us not setting the preset of our images. 

Go to the image within the gallery and click on 'edit'

Set the image size preset on the right to 'image fill'. 

Now we have a nice looking gallery! 
 

Step 2. Editing the gallery 

If you click on the image that is faded out with the photo icon on a image gallery will pop up. 

The user can switch between the images by clicking on the arrows. 

If we go back to the Image Gallery widget, and click edit, we have some options to edit this part. 

Under the Add Image button is it a dropdown named widget-language. If you click on it we have three options. 

1. None 
2. Dots
3. Slide numbers 

Choosing dots adds a horizontal line of dots that indicates for the user where he or she is in the gallery.  

Choosing Slide Numbers adds a slide number count on the right top corner of the image gallery.