Media
Gallery
Grid, masonry, justified, carousel and more, with a lightbox.
Live demo
See it in action
Design
Grid
Uniform, responsive tiles on a CSS grid.
Design
Masonry
Staggered columns of varying heights.
Design
Justified rows
Flickr-style rows that fill the width exactly.
Design
Metro / Bento
A mixed-size bento grid — some tiles span two cells.
Design
Cards
Rounded cards, each with a caption panel below.
Design
Polaroid scatter
Tilted, polaroid-style photos.
Design
Honeycomb
Hexagonal, tessellated tiles.
Design
Spotlight
One large image beside a rail of the rest.
Design
Showcase
A main image with a thumbnail grid.
Design
Stack / banners
Full-width stacked banner images.
Design
Image accordion
Horizontal panels that expand on hover.
Design
Flip cards
Cards that flip to reveal a caption.
Design
Carousel slider
A swipeable slider — arrows, dots and drag.
Design
Slideshow / fade
A crossfading, full-width slideshow.
Design
Thumbnail slider
A main slider synced to a row of thumbnails.
Design
Coverflow
A 3D coverflow — the centered image is in focus.
Design
Filmstrip
A horizontally-scrolling strip of images.
Design
Marquee / ticker
Continuously scrolling rows (pauses on reduced-motion).
Style
Corners
Tile corner radius, set on the Style tab. Ignored when an Image Style preset is applied — the preset owns the corners.
Square
The default — the tiles keep the photo’s own edges.
Rounded (6px)
A soft 6px radius on every tile.
Rounded large (12px)
A 12px radius, for a softer, card-like grid.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section class="fw-flexbox fw-flex fw-contained fw-collapse">
<div class="fw-gallery design-grid">
<div class="fw-gallery__grid" style="--gal-cols:3;--gal-cols-t:2;--gal-cols-m:1;--gal-gap:var(--gap-3, 1rem);--gal-ratio:4 / 3;">
<figure class="fw-gallery__item">
<a class="fw-gallery__media rounded-0 fw-gallery--zoom" href="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-8ba4cd51097a.jpg" data-fw-lightbox="fw-gal-1"><img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-8ba4cd51097a.jpg" alt="UnysonPlus demo image" loading="lazy" decoding="async" class="fw-gallery__img" width="640" height="480" sizes="(max-width: 640px) 100vw, 640px" /></a>
</figure>
<figure class="fw-gallery__item">
<a class="fw-gallery__media rounded-0 fw-gallery--zoom" href="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-5399afe9bb21.jpg" data-fw-lightbox="fw-gal-1"><img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-5399afe9bb21.jpg" alt="UnysonPlus demo image" loading="lazy" decoding="async" class="fw-gallery__img" width="640" height="480" sizes="(max-width: 640px) 100vw, 640px" /></a>
</figure>
<figure class="fw-gallery__item">
<a class="fw-gallery__media rounded-0 fw-gallery--zoom" href="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-1d1c476eb07f.jpg" data-fw-lightbox="fw-gal-1"><img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-1d1c476eb07f.jpg" alt="UnysonPlus demo image" loading="lazy" decoding="async" class="fw-gallery__img" width="640" height="480" sizes="(max-width: 640px) 100vw, 640px" /></a>
</figure>
</div>
</div>
</section>To learn more about the Gallery shortcode, please check out the online manual here.