Bloqra Media & Gallery Blocks — Masonry, Filterable Gallery, Video Popup, Lottie

Galleries, video, animation, and interactive imagery — all built to stay fast.

Masonry Gallery

A Pinterest-style masonry layout that keeps every photo at its natural aspect ratio — no cropping, and no JavaScript (the layout is pure CSS).

Managed exactly like the core Gallery block: the same media placeholder, toolbar “Add” button, List View item management, columns, resolution, and link-destination controls (including the core lightbox).
Gallery caption, image gap via the native block-gap control, automatic two-column collapse on phones.
Converts to and from the core Gallery block, both ways.

A portfolio-style gallery with category filter buttons.

Assign one or more categories per image; the filter bar is generated from them automatically and can never go stale.
Grid (with aspect-ratio control) or masonry layout; show counts on the filter buttons; “All” label customizable.
Filter bar styles: Pills, Underline, Solid.
Pagination: none, a Load more button, or infinite scroll — images beyond the first page aren’t downloaded until revealed.
Lightbox with prev/next navigation; same core-Gallery-style management (List View, resolution, link destination) as the Masonry Gallery.
Converts to and from the core Gallery and the Masonry Gallery.

A thumbnail with a play button that opens the video in a lightbox — YouTube, Vimeo, or self-hosted files.

The video only loads when played — the page carries just an image until then, keeping it fast.
YouTube embeds use the privacy-enhanced youtube-nocookie.com domain; YouTube thumbnails are fetched automatically if you don’t set a custom one.
The lightbox is a native dialog: Esc closes it, focus is trapped, backdrop click closes, and closing always stops the audio.
Without JavaScript, the thumbnail is a plain link to the video — never a dead button.
Thumbnail aspect-ratio options, custom thumbnail with alt text, play-button style (solid/outline), size, and colors.

Play a Lottie JSON animation with the bundled lightweight renderer — no CDN, no external requests.

Triggers: autoplay, play when visible, hover, click to toggle, or scrubbed by scroll position.
Loop, speed (0.25×–3×), and width controls; optional accessible label.
Nothing loads — not even the animation JSON — until the block approaches the viewport.
Reduced-motion visitors see the first frame instead of the animation.
Upload .json Lottie files straight to the Media Library (Bloqra enables this), or paste a URL.

Pin interactive points onto an image — product features, maps, floor plans, anatomy charts.

Drag markers into position directly on the image in the editor.
Each hotspot shows a tooltip with a title, text, and an optional link, positioned top/bottom/left/right.
Tooltips open on hover, keyboard focus, and touch — with zero front-end JavaScript; the markers are real buttons and CSS does the rest.
Marker styles: dot or auto-numbered (numbers stay correct when you reorder), with an optional icon per hotspot and a pulse animation (removed for reduced-motion visitors).
Marker size, marker and tooltip colors; hotspots are managed in List View, named by their titles.