tsoHost Help Centre

Table of Contents

What is the image gallery widget?

Updated Oct 31st, 2017 at 12:42 GMT

In Website Builder, we offer the possibility to add an image gallery to your website 

Step 1. Drag the widget onto your page 

drag_widget_onto_page

  1. Click on the Widgets tab on the left
  2. Click on the Image Gallery and drag it to your page 

Step. 2 Go to your image gallery settings 

image _gallery_settings

Hover over your Image Gallery and click on the picture icon to add some photos to your widget. 

Step 3. Select your images 

select_your_images

If you want to add all the images you have in your album, just tick the box that says 'Select all in album'. The order in which the images will appear in the widget is the same as in which you are looking at them here. If you want to change the order of your images, you'll have to add them one by one by clicking on the in the order you want them to show in your gallery. 

How it will look like

how_it_will_look 

The widget will occupy the whole width of your work area, meaning each image will be around 310px wide as the image gallery shows the photos in 3 columns. There is no way of setting how many columns the image gallery has as it all depends on which device you are using to see your site.

Navigating through your gallery

  navigating_through_your_gallery

After clicking on one of your images, a light box will appear showing a bigger view of your image. Click on the arrow icon (1) to move through the images in the gallery, or close the light box by clicking on the cross at the bottom (2)

Dragging your image gallery 

draggin_your_image_gallery

To drag the image gallery across your site or to place it inside a column, just to click on the drag icon and move it. 

(OPTIONAL) Make the thumbnails smaller 

make_thumbnail_smallr

The images in your gallery are set to occupy 33.3% of the 100% width of your page, so they will get divided into 3 columns. If you want to divide them into more columns, therefore making the thumbnails smaller, you will need to drag an Embed Widget onto your page (place it at the bottom, it won't be visible for your users) and paste the following code inside of it: 

<style>
.widget.gallery ul li 
{
    padding-bottom: 12.5%;     /*This will set the height of every image inside your widget*/
    width: 12.5%;     /*This will set the width of every image inside your gallery*/
  }
</style>

You can change the percentage values depending on the number of columns you want. For example, if you want 5 columns, then the values should be 20%. 

If you added the code but its not working in your published site you'll need to log out, clean your browser cache, log in, add the code again into your embed widget and re publish the site.