Gallery Widget

The Gallery displays images and content in a grid and provides different layout, animation and overlay options. A lightbox can be enabled to show a larger version of your media.

Interior
Library
Vintage
Slides
Tea Box
Camera
Museum
Living Room
Office
  • Interior
  • Library
  • Vintage
  • Slides
  • Tea Box
  • Camera
  • Museum
  • Living Room
  • Office
  • Interior

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Library

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Vintage

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Slides

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Tea Box

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Camera

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Museum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Living Room

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Office

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
  • Interior
  • Library
  • Vintage
  • Slides
  • Tea Box
  • Camera
  • Museum
  • Living Room
  • Office

Dynamic Grid

The Gallery widget provides the option of arranging items fluently and seamlessly for a gap-free multi-column layout on all device sizes. You can filter items by name or tag.

Camera

Camera

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Typography

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Portfolio App

Portfolio App

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Sneakers

Sneakers

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Corporate Identity

Corporate Identity

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Badge

Badge

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Sticker

Sticker

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Vintage

Vintage

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Workspace

Workspace

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Business Card

Business Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
Flyer

Flyer

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
T-Shirt

T-Shirt

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

Parallax Grid

You can add a scrolling parallax effect to the grid columns.

canali-01
canali-02
canali-03
canali-04
canali-05
canali-06
canali-07
canali-08

Gutter

You can set different gutter widths or remove the gutter completely for a tiled image layout. Independently from the overlay, you can add different animations to the image.

Landscape

Landscape

Deer

Deer

Trespassing

Trespassing

Diving

Diving

Flower Field

Flower Field

Hot-Air Balloon

Hot-Air Balloon

Backwoods

Backwoods

Hiking

Hiking

Mountains

Mountains


Overlay

Display your content in an overlay. You can apply a background, animation and determine the alignment. The overlay can be triggered on hover or remain visible at all times.

Alps, Europe

Alps, Europe

September 2015
Cairo, Egypt

Cairo, Egypt

March 2015
Oslo, Norway

Oslo, Norway

January 2015
Hamburg, Germany

Hamburg, Germany

August 2014
Crete, Greece

Crete, Greece

July 2014
Tuscany, Italy

Tuscany, Italy

May 2013
  • Alps, Europe
  • Cairo, Egypt
  • Oslo, Norway
  • Hamburg, Germany
  • Crete, Greece
  • Tuscany, Italy
  • Alps, Europe

    September 2015
  • Cairo, Egypt

    March 2015
  • Oslo, Norway

    January 2015
  • Hamburg, Germany

    August 2014
  • Crete, Greece

    July 2014
  • Tuscany, Italy

    May 2013
  • Alps, Europe
  • Cairo, Egypt
  • Oslo, Norway
  • Hamburg, Germany
  • Crete, Greece
  • Tuscany, Italy

Image Overlay

You have the option to display a different image as an overlay on hover. Just add a second media field to the content section.

Man Man
Diver Diver
Woman Woman

Panels

The Gallery widget can also display content in an image caption with different panel styles. You can split content parts to be shown in the caption and the overlay.

Redbrick House

Redbrick House

USB Stick

USB Stick

Boardwalk

Boardwalk

Backwoods

Backwoods

Tablet

Tablet

Wooden Box

Wooden Box


Additional Fields

Some of the elements that you can display inside a Gallery widget need to be defined first by creating an additional field inside the Content Manager.

Field Description
Tags Need to be created for filtering items.

Gallery Options

Layout Options Settings Description
Grid Behaviour Match Height, Dynamic Grid Match the height of grid items or display them in a masonry style.
Grid Gutter Default, Collapse, Small The spacing between grid columns.
Grid Filter none, Text, Divider, Nav, Tabs The navigation to filter grid items.
Grid Alignment Left, Center, Right Alignment of the filter navigation.
Columns Phone Portrait 1, 2, 3, 4, 5, 6 Number of columns on phones in portrait view.
Columns Phone Landscape Inherit, 1-6 Number of columns on phones in landscape view.
Columns Tablet Inherit, 1-6 Number of columns on tablets.
Columns Desktop Inherit, 1-6 Number of columns on desktops.
Columns Large Screens Inherit, 1-6 Number of columns on large desktops.
Items Animation None, Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left, Slide Right The animation that will be applied to grid items when scrolling into view.
Media Options Settings Description
Media Image [Number] Set the width and height of Gallery images in pixels.
Media Border None, Circle, Rounded The appearance of gallery images.
Overlay Appearance Image Caption, Overlay Center, Overlay Bottom Display content in an image caption or different overlays.
Overlay Background None, Steady, On hover Add a background to the overlay at all times, on hover or not at all.
Use second image as overlay if exists Create a second media field in the content settings, which will automatically be displayed as an overlay.
Overlay Toggle content on hover Hide content by default and display it on hover.
Overlay Animation Fade, Slide Top, Slide Bottom, Slide Left, Slide Right The animation that will be applied to the overlay when being displayed on hover.
Overlay Image Animation None, Fade, Scale, Spin, Grayscale The animation that will be applied to the image on hover.
Content Options Settings Description
Text Display Show or hide title and content.
Text Title Size Default, H1, H2, H3, H4, Extra Large Define the font size of the title.
Link Display Display the Read More link. The link URL is added to each item in the Content Manager.
Link Style Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button,
Button, Button Primary, Button Large, Button Large Primary
Set the style of the Read More link.
Link Text [Text] Define the link text.
Lightbox Options Settings Description
Lightbox Disabled, Default, Slideshow Choose the lightbox style.
Lightbox Image Width, Height Set the image's width and height in pixels.
Lightbox Caption None, Use Title, Use Content Set the content which will be displayed inside the lightbox caption.
Lightbox Image Show second media element in lightbox.
Button Display Show/ hide lightbox button.
Button Style Text, Icon Mini, Icon Small, Icon Medium, Icon Large, Icon Button,
Button, Button Primary, Button Large, Button Large Primary
Set the styling of the button that opens the lightbox.
Button Text [Text] Define the button text.
General Options Settings Description
Custom HTML Class [Text] Set a custom HTML class that will be added to the widget element in the rendered output.
Custom Link Target Open all links in a new window.