Support Center

Image Gallery - version 1.0

Last Updated: May 14, 2015 11:20AM EDT
Image Gallery - version 1.0

Image Galleries allow you to add lots of images to your site in limited real-estate. Your images are laid out in attractive slideshow or thumbnail galleries, with navigation and transition effects. Your gallery pages are always quick to load, and the large view of each image is a single click away.

To add an Image Gallery reach for the top menu and select Add Content > Image Gallery. Green rectangles will appear to indicate the locations where an Image Gallery may be added. Select the desired location and a popup will open asking you to define your Image Gallery settings. Each gallery features three display modes: ThumbnailSlideshow, and Custom

In Thumbnail mode the images are displayed in columns / rows as defined in Gallery Properties settings (3 x 3 by default). If your gallery has more images they will appear in several sets within the page.

In Slideshow mode only one image is displayed at a time and you have the option to browse through the rest through a filmstrip or other type of navigation. In this mode you can set up automatic slideshow. 


You can switch between Thumbnail, Slideshow and Custom gallery options at any time in the Image Gallery Properties.




When the gallery is in Thumbnail mode you can select the Thumbnail Size and number of thumbnails per page (Columns x Rows) in order to get started. If you want to reach the rest of the thumbnail options, click on Show Advanced Options


When Crop Thumbnail is checked, the image will be cropped to the aspect ratio of the thumbnail size before being resized. When this option is not checked, the image will preserve its original aspect ratio in the thumbnail. In some cases it may not be particularly appropriate to crop thumbnails. For instance, if you have a gallery that contains both portraits and landscape images it may be difficult to define a thumbnail size that will accommodate both layouts without cropping important parts of the image. The following example shows the differences between Crop Thumbnail On and Off:


Crop Thumbnail OFF Crop Thumbnail ON
In Advanced Options you can select the Navigation style and Position, the placement of Comments (Show Comments), and set the value for the Thumbnail Border.

When the gallery is in Slideshow mode, the basic option is just Image Size. This is the size with which the images will be displayed within the page, one at a time.


Slideshow mode viewing allows for a larger thumbnail size - so, the default is considerable bigger than in thumbnail mode. In Advanced options you can tweak the navigation, the slideshow transition effects, slideshow navigation, and other secondary settings.

Crop Thumbnail works exactly as in thumbnail mode.


The Navigation dropdown provides a wider choice of navigations, including filmstrip. For filmstrip navigation you can also select the Position to be Left or Right as in the example below.






 From the Slideshow dropdown you may choose:

  • Disabled: the navigation through the images is manual, no rotation of images.
  • Enabled (Auto-start, with controls): image rotation will start automatically upon loading the page. This option includes Play/Pause Slideshow and Forward/Back buttons
  • Enabled (Auto-start, no controls): image rotation will start automatically upon loading the page.
  • Manual: Automatic image rotation after you push a play button

The Delay setting defines the amount of time between slide rotation (when the slideshow is enabled).
The Transition Effect allows you to define what effect you will have as the slides change from one to the next(when slideshow is enabled or when changing images manually). The slideshow effects work under Internet Explorer only.
As the slideshow mode preloads the information about all the images in a gallery, we don't recommend using this mode with more than 100 images in a single gallery.

The Large Image Viewer section defines the behavior of the window that appears when you click on the thumbnails (in both Thumbnail and Slideshow mode). The basic options include Popup Dimensions where you define the size of the popup and the image inside it.  The three buttons next to it () represent the most typical screen resolutions.




The SlideshowDelay and Transition Effect have the same functionality as in the Slideshow section but applied over the popup. You can define the color of the popup background from Background Color dropdown. The Scale to Fit check box allows you to specify if to scale the whole image in order to display it in full within the popup or show a larger version but with option to scroll. When this option is checked, the image will fit into the popup both vertically and horizontally and will be visible in full. When the option is unchecked one of the image dimensions will fit inside the popup and the other will be scrollable. This for instance would allow you to have larger resolution portrait images inside a landscape popup viewer.
Keep Original Image allows you to preserve the original image even when the thumbnail and popup view images are generated. When this option is checked the viewers will be able to zoom in the photos to their original size. However, preserving original images will result in significant space usage (sometimes ten times more) on your website account.

The last section in the gallery properties, Extra Features, holds the option to add Gallery Notes.


The Gallery Notes allows you to add an additional description to your gallery with more words than in the Header or Footer. The notes will be available when clicking on See Notes link above the gallery.


Once you add the Image Gallery the dialog for adding gallery images will pop up.


Read next: Gallery Images tutorial >>


Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found