Gallery Templates

The Gallery Templates page in ShutterPress gives you full control over how your galleries look and behave. It’s where you define global defaults for new galleries, manage performance and layout options, and set up the client experience.

You can create as many Gallery Templates as you wish and assign them to Galleries.

You’ll find the page under

ShutterPress → Gallery Templates in your WordPress dashboard.

Layout Options

The Layout Options section controls the overall appearance and structure of your galleries. These settings apply to all new galleries by default, but can be overridden on individual galleries if needed.

Gallery Layout

Choose how your images are displayed.

• Grid – Fixed rows and columns, ideal for clean, uniform layouts.
• Masonry – Dynamic layout where image heights vary naturally, perfect for mixed aspect ratios.
• Justified – Aligns image rows evenly for a polished, full-width look.

Primary Colour

Select a global accent colour used for gallery buttons, icons and other interface elements. This helps match the gallery to your site’s branding. This option will try to find defaults from the theme for you to choose from.

When you set a primary colour a darker accent colour is also set automatically for elements such as button hovers.

Pagination

Enable pagination to break large galleries into multiple pages. Useful if you prefer traditional navigation or want to limit the number of images loaded at once.

Infinite Scroll

When enabled, new images load automatically as visitors scroll. This replaces pagination for seamless browsing.

Pagination is still used automatically when multiple galleries appear on the same page or when editing in Gutenberg or Elementor.

Image Gap

Set the space between images in pixels. Increasing the gap gives a more spacious layout, while smaller values create tighter grids.

Columns

Define how many image columns are shown on different devices:

• Desktop – Number of columns on large screens.
• Tablet – Adjust for medium-sized displays.
• Mobile – Choose fewer columns for smaller screens.

Rounded Corners

Toggle to enable rounded corners for all images.

Corner Radius

Set the radius (in pixels) of the image corners. Higher values create a softer, rounded look.

Icon Options

The Icon Options section controls how gallery icons appear, their size, position and style. These icons are used for lightbox, download and other actions depending on your gallery setup.

Icon Size

Set the size of icons on different devices:

• Desktop – The main size used for larger screens.
• Tablet – Slightly smaller for medium displays.
• Mobile – Compact for small screens. Sizes are defined in pixels and scale responsively.

Show Icons

Choose when icons appear:

• Always – Icons are always visible on top of images.
• On Hover – Icons only appear when the user hovers over an image, giving a cleaner look.

Stroke Width

Adjust the thickness of icon lines. A smaller value creates finer, more subtle icons, while a higher value makes them bolder and easier to see.

Icon Position

Select where the icons appear over each image. Options include top, centre, bottom, and corner positions. The blue highlight indicates the current selection.

Download Icon

Pick which download icon style to use from the available designs. This icon is used in the gallery image and also in the lightbox.

Button Bar Options — Pro

The button bar contains your gallery’s available actions and, when proofing is enabled for the logged-in user, the proofing summary and submission button.

Sticky Button Bar keeps these controls near the top of the screen as visitors scroll through the gallery.

Enable the sticky button bar

1. Go to ShutterPress → Gallery Templates and edit the template assigned to your gallery.
2. Find Button Bar Options.
3. Turn on Sticky Button Bar.
4. Under Sticky on:, select Desktop, Tablet, and/or Mobile.
5. Click Update to save the template.

These settings apply to galleries using that template.

Choose where it stays sticky

Enable stickiness separately for each screen size. For example, you can keep the bar sticky on desktop and tablet while letting it scroll normally on mobile.

On screen sizes you haven’t selected, the bar remains in its normal position above the gallery and scrolls with the page. Turning off Sticky Button Bar, or deselecting every screen size, disables stickiness.

This setting controls the bar’s position. The buttons and proofing controls shown still depend on the gallery’s enabled features and the visitor’s access.

Check the result

Open a gallery using the template and scroll through its images. Check desktop, tablet, and mobile widths to confirm your selected behaviour.

For proofing controls, view the gallery while logged in as its assigned Proofing User.

Lightbox Options

The Lightbox Options section lets you control how images open and appear when clicked. The lightbox provides a distraction-free viewing experience where users can browse through images in an overlay.

Lightbox

Toggle the lightbox on or off. When enabled, clicking an image will open it in a full-screen overlay with navigation controls.

Background Colour

Set the colour and opacity of the lightbox background. A darker background helps images stand out, while lighter tones can blend more with your site’s design.

Icon Colour

Choose the colour used for navigation and close icons inside the lightbox. This helps ensure icons remain visible regardless of background brightness. The primary colour set earlier will be used as the hover colour for these icons.

Transition Style

Select how images transition when navigating between them:

• Fade – Gently fades images in and out for a smooth, subtle effect.
• Slide – Slides images horizontally for a dynamic, modern look.

Hover Effects

The Hover Effects section controls how gallery images react when a visitor hovers over them. These effects add movement, depth and visual feedback to make your galleries feel more interactive.

Grow Image

Enable this option to slightly enlarge images when hovered. It adds a smooth zoom-in effect that draws attention to each photo.

Float Image

Makes images lift subtly from the background when hovered, adding a sense of depth.

• Height – Adjusts how much the image floats (Low, Medium, or High).
• Shadow Colour – Choose the colour of the shadow cast beneath floating images.

Overlay Colour

Adds a semi-transparent colour layer over images on hover.

• Colour – Select any colour and adjust opacity for subtle or bold overlays.

Overlay Icon

Show an icon on top of images when hovered.

• Overlay Icon – Choose from several built-in icon designs.
• Icon Colour – Define the icon colour to match your gallery’s style.
• Icon Size – Set icon size separately for desktop, tablet and mobile.

Show Image Title

Displays the image title over the image on hover.

Show Image Caption

Displays the image caption on hover, below or alongside the title depending on layout.

Custom CSS

The Custom CSS section allows you to add your own CSS directly to a gallery template. This gives full control over styling and layout beyond the built-in options.

Use this field to enter any additional CSS rules you’d like to apply. The styles entered here are automatically scoped to the gallery using the .sp-gallery class, meaning they will only affect the current gallery template and won’t interfere with other site elements.

For example:

sp-gallery-item img {
  border: 2px solid #ffffff;
  transition: transform 0.3s ease;
}

.sp-gallery-item img:hover {
  transform: scale(1.05);
}

Tips

• Keep your CSS minimal to maintain performance.
• You can use browser developer tools to inspect gallery elements before styling.
• To reset, simply clear the field and save the template.