Most HubSpot image gallery solutions give you a basic grid and call it done. If you need to present visual work with any level of craft — portfolio pieces, project photography, product shots, event galleries — the limitations show up quickly. Image Gallery Pro is a standalone HubSpot module that gives you three distinct layout modes, a full-featured lightbox, inline video support, and 33 style controls, all configurable from the HubSpot visual editor without writing code.
Available on the HubSpot Marketplace, the module works with any HubSpot theme. This article covers what it includes, how the layouts work, and what types of teams and use cases it serves.
Three Layout Modes for Different Visual Needs
Image Gallery Pro ships with three layout modes, each designed for a different type of visual presentation. You select the layout from the module settings and the grid restructures accordingly. The three modes are Bento Grid, Equal Grid, and Masonry.
Bento Grid
The Bento Grid layout creates a dynamic, editorial-feel gallery where images occupy varied amounts of space within the grid. Rather than forcing every image into an identical box, Bento arranges items in a way that creates visual rhythm and hierarchy. Larger images naturally draw attention while smaller ones fill the composition. This layout works well for portfolio presentations, case study galleries, and any situation where you want the gallery itself to feel designed rather than simply populated.
Bento grids support 2, 3, or 4 column configurations. The grid gap, border radius, and row heights are all adjustable from the Style tab, so you can control the density and spacing of the layout precisely.
Equal Grid
The Equal Grid layout gives every image the same dimensions within the grid. This produces clean, uniform rows that work well when consistency matters more than visual drama. Product catalogs, team headshots, event photo galleries, and any content where equal visual weight is important benefit from this mode.
Equal Grid includes aspect ratio control with four options: landscape at 3:2, portrait at 2:3, square at 1:1, or original aspect ratio. The aspect ratio setting applies to every image in the grid, so the gallery stays visually consistent regardless of the original dimensions of the uploaded images. Column count is configurable at 2, 3, or 4.
Masonry
The Masonry layout uses automatic dense packing to arrange images in columns without enforcing uniform row heights. Each image retains its original proportions, and the layout fills vertical space efficiently by stacking images tightly within each column. The result is a gallery that handles mixed aspect ratios gracefully without cropping or stretching.
Masonry is particularly well suited to photography portfolios, blog image collections, and any gallery where the images themselves vary in format. Tall portraits, wide landscapes, and square shots can coexist in the same gallery without visual awkwardness. Like the other layouts, Masonry supports 2, 3, or 4 column configurations.
Built-In Lightbox
Image Gallery Pro includes a full-featured lightbox that opens images in a full-screen viewer overlay. The lightbox is not a basic zoom — it is a complete viewing experience with navigation controls, keyboard shortcuts, touch support, and caption display.
When a visitor clicks an image in the gallery, the lightbox opens with a smooth transition. From there, they can navigate between images using previous and next buttons, arrow keys on desktop, or swipe gestures on mobile. An image counter shows the current position within the gallery. Pressing Escape or clicking outside the image closes the lightbox.
Videos play inline within the lightbox with native browser controls, so visitors can browse a mixed media gallery without switching between different viewing modes. The lightbox also displays captions when they are configured, keeping context visible alongside the full-size image.
The lightbox is fully stylable from the Style tab. You can set the backdrop color and opacity, button colors and hover states, caption text color, and counter color. Every visual element of the lightbox can be adjusted to match your site's design language without touching CSS.
The lightbox can be disabled entirely from the module settings if you prefer a gallery without click-to-expand behavior. When disabled, images display at their grid size only.
Video Support
Image Gallery Pro supports MP4 video alongside standard images. Each gallery item can be configured as either an image or a video. Video items include fields for an MP4 file URL, a custom poster thumbnail, and optional captions.
In the gallery grid, video items display their poster thumbnail and auto-play on hover, giving visitors an immediate preview of the content. In the lightbox, videos play with native browser controls at full size. This makes it practical to create mixed media galleries that combine photography and video without needing separate components for each media type.
The video support is particularly useful for agencies showcasing motion work, real estate companies with property walkthrough clips, event companies with highlight reels, or any business that produces both still and moving visual content. Having images and video in a single gallery module keeps the editing workflow simple and the page layout clean.
Hover Effects and Captions
Every gallery item supports an optional hover effect and caption overlay. When hover zoom is enabled, images scale up slightly as the visitor moves their cursor over them. The zoom scale and transition speed are both configurable from the Style tab, so you can set a subtle 1.05x lift or a more dramatic 1.15x zoom depending on the visual tone you want.
Captions appear as an overlay on hover, positioned over the bottom of the image with a gradient background for readability. Caption text color, font size, gradient background, and padding are all independently configurable. Captions can be enabled or disabled globally, and each gallery item has its own caption text field.
The combination of hover zoom and caption overlays adds an interactive layer to the gallery without requiring JavaScript customization. The effect is handled entirely through CSS transitions, keeping the interaction lightweight and smooth.
Up to 30 Gallery Items
Each instance of Image Gallery Pro supports up to 30 gallery items. Each item is individually configured with its media type, image or video source, optional caption text, and optional alt text for accessibility. This capacity is generous enough to handle substantial galleries — a full project portfolio, an extensive product catalog section, or a large event photo set — within a single module instance.
If you need to present more than 30 items on a single page, you can use multiple instances of the module with different configurations. Each instance operates independently, so you could have a Bento grid for featured work at the top of a page and a Masonry grid for a broader collection further down.
33 Style Controls
The Style tab in Image Gallery Pro contains 33 configurable fields organized into logical groups. This level of control means you can match the gallery precisely to your site's design system without writing custom CSS. The style groups cover:
- Container: Max width and horizontal padding control the gallery's relationship to the page layout
- Grid: Gap between items, border radius on image corners, and minimum/maximum row height for Bento mode
- Colors: Section background color with opacity control, and a loading placeholder color for images that have not yet rendered
- Hover effects: Zoom scale multiplier and transition speed in milliseconds
- Captions: Text color, font size, gradient background color, and padding
- Lightbox: Backdrop color and opacity, navigation button color, button hover color, caption text color, and image counter color — each with independent opacity controls
- Spacing: Top and bottom padding for the gallery section
- Responsive breakpoints: Custom pixel values for tablet, mobile, and small screen breakpoints
The responsive breakpoint controls deserve special attention. Rather than relying on fixed breakpoints that may not match your site's responsive behavior, Image Gallery Pro lets you define exactly when columns should collapse. If your site's tablet breakpoint is 1024px but the gallery looks better collapsing at 960px, you set that directly. This gives you precise control over how the gallery adapts across screen sizes.
Responsive Design
Image Gallery Pro is built to work across all screen sizes. The column count reduces automatically at the breakpoints you configure. On larger screens you might display 4 columns, dropping to 2 on tablets and 1 on mobile. The lightbox adapts to mobile viewports with touch-friendly navigation and appropriately sized controls.
The responsive behavior is not an afterthought applied through media query overrides. The grid layouts, lightbox navigation, hover interactions, and touch gestures are all designed to function correctly on every device type. On mobile, hover effects are replaced with touch-appropriate interactions, and the lightbox uses swipe gestures instead of arrow key navigation.
Works With Any HubSpot Theme
Image Gallery Pro is a standalone module, not a theme component. It installs into your HubSpot portal's module library and can be added to any page template through the drag-and-drop editor. There is no theme dependency, no required framework, and no conflict risk with your existing theme's styles.
The module inherits your brand colors automatically through HubSpot's theme settings integration. If you have defined primary colors and font families in your theme settings, the gallery will pick those up as defaults. You can then override any of them through the module's own style controls if the gallery needs to differ from your site's global settings.
Who Image Gallery Pro Is Built For
The module serves a range of use cases where visual content needs to be presented with quality and control:
- Creative agencies and design studios that need portfolio galleries showcasing project work across different formats and aspect ratios
- Architecture and interior design firms presenting project photography with before-and-after context, detail shots, and wide-angle views in a single gallery
- Real estate companies displaying property photo galleries with optional video walkthroughs
- E-commerce and product companies building product image galleries or lookbooks with consistent grid styling
- Event companies and venues showcasing event photography and highlight reels
- Marketing teams that need a reliable gallery component for case studies, blog posts, and landing pages without developer involvement
- Any HubSpot user who has outgrown the default image module and needs more layout options, a proper lightbox, and genuine visual control
What You Can Build
To put the module's flexibility in practical terms, here are some examples of what you can create with Image Gallery Pro:
- A Bento-style editorial gallery on your homepage with varied image sizes creating visual interest
- A clean Equal Grid product catalog with square aspect ratios and consistent spacing
- A Masonry photography portfolio that handles portrait, landscape, and square images together
- A mixed media gallery combining project photos with MP4 video clips, all browsable in a single lightbox
- A case study page with a dedicated image section showing the project from multiple angles
- A team culture page with event photos in a relaxed Masonry layout
Getting Started
Image Gallery Pro is available on the HubSpot Marketplace for $4.99. After installing the module, it appears in your HubSpot module library and can be dragged onto any page. Configuration happens entirely through HubSpot's visual editor — select your layout mode, add your gallery items, adjust your style settings, and publish.
Full product details, feature previews, and documentation are available on the Image Gallery Pro product page.
If your HubSpot site needs image galleries that go beyond a basic grid, Image Gallery Pro gives you the layout variety, lightbox experience, video support, and visual control to present your visual content the way it deserves. Three layout modes, 33 style fields, and zero code required.