Galleries

The built in Galleries App allows users to create lightbox photo galleries, sliders and photo stories. There is some limited configuration available for developers to customise this functionality.

For more information see the User Guide, or watch the video tour.

Config options

Custom thumbnail size

For lightbox photo galleries, a range of built in sizes are available. If you'd like to add another option to the drop down list this can be added in the admin config file or through the settings interface (In General Settings > General tab > Custom Lightbox Thumbnail Size.

$config['gallery-custom-thumbnail-size'] = 245;

CSS styling

Each of the styles of gallery will output the necessary CSS for them to display correctly and be functional. You may wish to override some of these styles to customise the styling for your use.

It is recommended that you inspect the markup of the gallery you wish to customise to see the details of the tags and classes used, some basic information is listed below to get you started.

It is not recommended to increase the size of images using CSS, thumbnail sizes and slider sizes can be increased in the Unicity CMS editor, which will output the correct size image files. 

Lightbox galleries

You'll find a class of unicity-popup-gallery on the containing DIV.

There will also be a class that includes the size of the thumbnails, e.g. unicity-gallery-size-150 or unicity-gallery-size-200 that would allow you to change the padding or margins on images depending on the thumbnail size to make them fit better in your design.

Each gallery will also have a unique ID, such as popup-gallery-1.

Photo stories and sliders

Both photo stories and sliders share very similar markup.

The container will have a class of unicity-slider-gallery.

The image size will be denoted by a class e.g. unicity-gallery-size-640 or unicity-slider-gallery unicity-gallery-size-800.

Each gallery will have a unique ID, such as slider-gallery-3.