Gallery

Panel settings

There are two layouts to gallery panel; Grid and Masonry. Grid layout provides a uniform grid of images, each cropped to a 4:3 aspect ratio. Masonry retains the images original aspect ratio and flows the images from top to bottom, or left to right.

The Masonry layout allows for the user to click on the images, opening a lightbox slideshow where you can navigate through the images either using the arrow keys on your keyboard or the arrows shown on either side of the screen. Image titles and captions show when the mouse is hovering over an image and are also displayed on the slideshow underneath the image.

The Grid layout does not have a slideshow option at present. Any od number overflowing images will be centered on the last row.

There is no limit to the amount of images as the panel will adapt to the size of the browser accordingly.

• Panel settings
  • Gallery layout – You can choose between a masonry layout which retains the image aspect ratio but results in the images flowing down the page with uneven edges, or a grid layout with constrained image ratio.
  • Gallery width – You can set the gallery container to either the full width of the screen or that of the content on the page.
  • Grid layout options:
    • Maximum number of images per row – This defines how many columns of images are shown.
  • Masonry layout options:
    • Gallery orientation – You can choose to display you images vertically in a columns with the images flowing from top to bottom left to right, or horizontally from left to right, top to bottom
    • Height of images (Horizontal layout only) – You can set the height of the images, which will directly impact how many are shown per row.
    • Maximum number of images per row (Vertical layout only) – This defines how many columns of images are shown.
    • Overlay: Image title – This hides the image title when hovering over an image
    • Overlay: Image caption – This hides the image caption when hovering over an image
    • Lightbox: Image title – This hides the image title on the lightbox slideshow
    • Lightbox: Image caption – This hides the image caption on the lightbox slideshow
  • Use Flickr album – Select this option if you would like to use a Flickr album instead
• Gallery images
  • Gallery – Add the images you would like shown in the gallery. If you wish to include a caption for the image, make sure you enter these for each appropriate image within the Media Library section of the dashboard.
    The caption will be shown when the user hovers over the image
• Flickr photoset details
  • Username – Insert the username of the album owner which can be found on the users profile page under their name.g. Jim_Higham. This is required to retrieve the users album!
  • Album link – Insert the URL of the album of images you want to use. e.g https://www.flickr.com/photos/jimhigham/albums/72157703773057561

Example

Can you see more examples of the gallery panel and it’s three main layouts on our test site.