Wexley's Gallery Page creates a sophisticated grid of images and videos, making it a great way to show the range of your work on a single page. When visitors click on an image, it opens in a lightbox slideshow, allowing them to click through all the images on the page. The demo content's Portfolio homepage is a Gallery Page.
For general information about adding images and videos, visit Using the Gallery Page.
Note: All instructions for images in this guide also apply to videos.
How the Gallery Page displays depends on how you view it.
- Images display in a grid. The adaptive layout adjusts to the size of your images, creating a mosaic effect if your images have different aspect ratios.
- When you click an image in the grid, it displays in a lightbox slideshow.
- If images in a row are too wide to display side-by-side, they'll stack vertically.
- On reduced-width browsers, the Gallery Page grid switches to a slideshow view. (This is what you'll usually see in Device View.)
- On mobile devices, images stack vertically. The lightbox is disabled on mobile.
Styling the grid
Use the tweaks in the Gallery Styles section of the Style Editor to style the grid:
- Check Index Fullwidth to display the grid at the full width of the site, minus the Outside Padding.
- If you uncheck Index Fullwidth, the grid follows the Site Alignment (left, right, center).
- When not set to full width, use the Index Item Size tweak to adjust the size of the images in the grid.
- Index Item Padding adjusts the space between images. Reduce this to 0px to make the images touch.
You may need to save and refresh the page to see these changes.
Note: If your Index Item Padding is set to less than 5 pixels and you're seeing irregular spacing, increase the padding amount, or uncheck Index Fullwidth.
Image titles can display with a color overlay on hover for each image in the grid.
- Check the Enable Thumbnail Hover tweak to show the titles.
- Thumb Hover Bg changes the color overlay. Use the opacity slider to adjust the transparency.
- Thumb Hover Color adjusts the title text color.
- Thumb Hover Title adjusts the title text font and size.
Image titles don't display in the lightbox or on mobile. Image descriptions never display.
Tip: We recommend adding titles to your images even if you disable them on hover, as image titles can be indexed as alt text.
When you click an image in the grid, it opens in a lightbox slideshow. Use the Gallery Controls tweak to style the navigation elements (tiny thumbnails, bullets, numbers, simple prev/next, or hidden).
Note: Lightbox is disabled on mobile.
Deeplink URLs are individual URLs assigned to each image, so that you can send visitors directly to any image within a Gallery. You can customize the deeplink URL for each image.
When you send a visitor to a deeplink URL in Wexley, the image opens in the slideshow lightbox.
Deeplink URLs don't work on mobile in Wexley.
- The Gallery Page supports a page header.
- Wexley doesn't support clickthrough URLs.
- For general information about styling your site, visit Structure and style.
Tip: To create different gallery layouts, create a Regular Page and modify it with a Gallery Block.
Learn about the Blog Page.