Gallery
A gallery widget is a multi-image grid — a small, self-contained photo wall you can drop into a portfolio, a profile page, a link-in-bio layout, or a Notion / Obsidian board. Unlike the single-image image-embed widget, Gallery takes an array of images (each with optional alt text, a caption, and a click-through link) and arranges them in one of four layouts: a responsive grid of thumbnails, a varied-height masonry wall, a featured carousel with dot indicators, or a horizontal-scroll filmstrip. Every image covers its cell, honors the widget's corner radius and gap, and the whole thing stays theme-aware so it reads cleanly on a cream page or a dark colored panel.
Gallery is the image-forward block for showing several pictures at once. You give it a list of image URLs — paste direct links ending in .jpg / .png / .webp, or short data: images — and optionally an alt string, a caption, and an href per image. Pick a layout: 'grid' lays the images out as even square thumbnails (two columns at small embed widths, so tiles never shrink to postage stamps); 'masonry' packs them into columns at their natural heights for a Pinterest-style wall; 'carousel' shows one large featured image with a row of dot indicators beneath it (the featured image is static — no JavaScript interactivity, which keeps it reliable inside restrictive iframe hosts); and 'filmstrip' is a single horizontal-scroll row of square tiles. Images crop to fill their cells with object-fit: cover, and they all share the widget's corner radius and a configurable gap. Captions, when shown, render in the muted color below each tile. Because the surface stays transparent and every color comes from the universal style controls, the same gallery reads correctly on a cream background or a forest-green color zone. If an image carries an href, the tile becomes a link that opens in a new tab with rel="noopener noreferrer".
Questions, answered.
What are the four layouts?
Grid (even square thumbnails, two columns on narrow embeds), masonry (varied-height tiles packed into columns), carousel (one large featured image with dot indicators), and filmstrip (a horizontal scroll row of square tiles). Pick one in the inspector — each is tuned to a sensible cell aspect.
How do I add my own images?
Each image takes a direct URL — a link ending in .jpg, .png, .webp, .gif, or .avif (or a small inline data: image). Add a caption, alt text, and an optional click-through link per image in the inspector. URLs that aren't safe image links are dropped silently rather than rendered.
Can I make the images clickable?
Yes. Give an image an href and its tile becomes a link that opens in a new tab (target _blank, rel noopener noreferrer). Leave href empty and the tile is just a picture. Mix linked and unlinked images freely in the same gallery.
Why doesn't the carousel scroll on its own?
The carousel intentionally shows a single static featured image with dot indicators rather than auto-advancing. Auto-playing sliders are unreliable inside the locked-down iframes that hosts like Notion and Obsidian use, and they fight the user for attention. If you want every image visible at once, use the grid or masonry layout instead.
Will it look right on a colored background?
Yes. The gallery never paints its own background — it stays transparent and inherits text, accent, and muted colors from the style controls. Captions use the muted color, the active carousel dot uses the accent color, and the tile frames pick up the border color. Set them to read on cream or on a dark panel; the grid adapts either way.
How many images can I add, and what about caption length?
There's no hard cap, but keep galleries tight — embedded widgets are centered to about 420px wide and content that overflows the cell is clipped. Four to six images reads best in grid and masonry; the filmstrip can hold more since it scrolls horizontally. Keep captions to a short phrase so they don't push a tile past its frame.
Is this widget free?
Yes. WidgetCraft widgets are free to embed and customize. No signup required, no per-render fees.