Edit Image Gallery

Name

Also known as (comma separated)

Brief definition Collection of images presented for browsing.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "columns", "type": "number", "label": "Columns", "default": 3, "min": 2, "max": 4, "step": 1 }, { "id": "gap", "type": "number", "label": "Gap", "default": 8, "min": 0, "max": 16, "step": 1 }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 8, "min": 0, "max": 16, "step": 1 }, { "id": "captions", "type": "toggle", "label": "Show captions", "default": false } ]

Templates (JSON object keyed by format) { "html": "<ul class=\"img-gallery\" style=\"grid-template-columns:repeat({{columns}}, 1fr);gap:{{gap}}px;\">\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23A8E6C1'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 1: pale circle on mint\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Meadow, no. 1</span>{{/if}}\n </li>\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 2: pale circle on sky blue\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Harbour, no. 2</span>{{/if}}\n </li>\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23F5C2E0'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 3: pale circle on blush pink\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Orchard, no. 3</span>{{/if}}\n </li>\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23D9C8F0'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 4: pale circle on lavender\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Studio, no. 4</span>{{/if}}\n </li>\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23E8A020'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 5: pale circle on gold\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Kiln, no. 5</span>{{/if}}\n </li>\n <li class=\"img-gallery__item\" style=\"border-radius:{{radius}}px;\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23241430'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23D9C8F0'/%3E%3C/svg%3E\" alt=\"Gallery photo 6: lavender circle on ink\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"img-gallery__cap\">Nightfall, no. 6</span>{{/if}}\n </li>\n</ul>\n<style>\n.img-gallery { display: grid; list-style: none; margin: 0; padding: 0; max-width: 400px; }\n.img-gallery__item { position: relative; overflow: hidden; background: #FAF7F2; }\n.img-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }\n.img-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; background: #241430cc; color: #FAF7F2; font: 500 10px/1.3 system-ui, sans-serif; }\n</style>", "tailwind": "<ul class=\"img-gallery-tw grid list-none m-0 p-0 max-w-[400px]\" style=\"grid-template-columns:repeat({{columns}}, 1fr);gap:{{gap}}px;\">\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23A8E6C1'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 1: pale circle on mint\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Meadow, no. 1</span>{{/if}}\n </li>\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23BFD9F2'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 2: pale circle on sky blue\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Harbour, no. 2</span>{{/if}}\n </li>\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23F5C2E0'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 3: pale circle on blush pink\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Orchard, no. 3</span>{{/if}}\n </li>\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23D9C8F0'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 4: pale circle on lavender\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Studio, no. 4</span>{{/if}}\n </li>\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23E8A020'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23FAF7F2'/%3E%3C/svg%3E\" alt=\"Gallery photo 5: pale circle on gold\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Kiln, no. 5</span>{{/if}}\n </li>\n <li class=\"relative overflow-hidden bg-[#FAF7F2]\" style=\"border-radius:{{radius}}px;\">\n <img class=\"block w-full h-full object-cover\" style=\"aspect-ratio:1/1;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%23241430'/%3E%3Ccircle cx='150' cy='150' r='60' fill='%23D9C8F0'/%3E%3C/svg%3E\" alt=\"Gallery photo 6: lavender circle on ink\" loading=\"lazy\" width=\"300\" height=\"300\" />\n {{#if captions}}<span class=\"absolute left-0 right-0 bottom-0 px-1.5 py-1 bg-[#241430]/80 text-[#FAF7F2] text-[10px] font-medium\">Nightfall, no. 6</span>{{/if}}\n </li>\n</ul>", "react": "export function ImageGallery({\n columns = {{columns}},\n gap = {{gap}},\n radius = {{radius}},\n captions = {{captions}},\n}) {\n const photos = [\n { fill: \"#A8E6C1\", alt: \"Gallery photo 1: pale circle on mint\", cap: \"Meadow, no. 1\" },\n { fill: \"#BFD9F2\", alt: \"Gallery photo 2: pale circle on sky blue\", cap: \"Harbour, no. 2\" },\n { fill: \"#F5C2E0\", alt: \"Gallery photo 3: pale circle on blush pink\", cap: \"Orchard, no. 3\" },\n { fill: \"#D9C8F0\", alt: \"Gallery photo 4: pale circle on lavender\", cap: \"Studio, no. 4\" },\n { fill: \"#E8A020\", alt: \"Gallery photo 5: pale circle on gold\", cap: \"Kiln, no. 5\" },\n { fill: \"#241430\", dot: \"#D9C8F0\", alt: \"Gallery photo 6: lavender circle on ink\", cap: \"Nightfall, no. 6\" },\n ];\n return (\n <ul style={{ display: \"grid\", listStyle: \"none\", margin: 0, padding: 0, maxWidth: 400,\n gridTemplateColumns: `repeat(${columns}, 1fr)`, gap }}>\n {photos.map((p) => (\n <li key={p.cap} style={{ position: \"relative\", overflow: \"hidden\", background: \"#FAF7F2\", borderRadius: radius }}>\n <svg viewBox=\"0 0 300 300\" width=\"100%\" height=\"100%\" style={{ display: \"block\", aspectRatio: \"1 / 1\" }} role=\"img\" aria-label={p.alt}>\n <rect width=\"300\" height=\"300\" fill={p.fill} />\n <circle cx=\"150\" cy=\"150\" r=\"60\" fill={p.dot ?? \"#FAF7F2\"} />\n </svg>\n {captions && (\n <span style={{ position: \"absolute\", left: 0, right: 0, bottom: 0, padding: \"4px 6px\",\n background: \"#241430cc\", color: \"#FAF7F2\", font: \"500 10px/1.3 system-ui, sans-serif\" }}>\n {p.cap}\n </span>\n )}\n </li>\n ))}\n </ul>\n );\n}" }