= {\n \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\",\n};\nconst esc = (s: string) => s.replace(/[&<>\"']/g, (c) => escMap[c]);\n\nconst dateFmt = new Intl.DateTimeFormat(\"de-DE\", {\n year: \"numeric\", month: \"short\", day: \"numeric\",\n});\n\nexport function buildCaption(\n meta: PhotoMeta | undefined | null,\n fallbackTitle?: string,\n): string | undefined {\n if (!meta && !fallbackTitle) return undefined;\n const parts: string[] = [];\n\n const title = meta?.iptc?.title ?? fallbackTitle;\n if (title) parts.push(`${esc(title)}
`);\n if (meta?.iptc?.description)\n parts.push(`${esc(meta.iptc.description)}
`);\n\n const tech = formatCameraLine(meta);\n if (tech) parts.push(`${esc(tech)}
`);\n\n const metaLine: string[] = [];\n if (meta?.dateTaken) metaLine.push(esc(dateFmt.format(meta.dateTaken)));\n if (meta?.gps) {\n const { latitude: lat, longitude: lon } = meta.gps;\n const url = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}#map=14/${lat}/${lon}`;\n metaLine.push(\n `${lat.toFixed(4)}, ${lon.toFixed(4)}`,\n );\n }\n if (metaLine.length)\n parts.push(`${metaLine.join(\" · \")}
`);\n\n const chips: string[] = [];\n for (const path of meta?.iptc?.keywordsHierarchy?.slice(0, 6) ?? []) {\n if (path.length)\n chips.push(`${path.map(esc).join(\" › \")}`);\n }\n for (const k of meta?.iptc?.keywords?.slice(0, 6) ?? []) {\n chips.push(`${esc(k)}`);\n }\n if (chips.length)\n parts.push(`${chips.join(\"\")}
`);\n\n return parts.length ? parts.join(\"\") : undefined;\n}\n```\n\nThe class names `.ajg-title`, `.ajg-tech`, `.ajg-meta`, `.ajg-keywords`, `.ajg-keyword` are pre-styled by the `` and `` components.\n\n### Massive virtualized gallery with year/month filtering\n\nServer-side filter via URL search params, paginated API endpoint:\n\n```astro\n---\n// src/pages/gallery.astro\nimport { getCollection } from \"astro:content\";\nimport JustifiedGalleryVirtual from \"@altner/astro-justified-gallery-layout/JustifiedGalleryVirtual.astro\";\nimport Lightbox from \"@altner/astro-justified-gallery-layout/Lightbox.astro\";\n\nconst year = Astro.url.searchParams.get(\"year\") ?? \"\";\nconst month = Astro.url.searchParams.get(\"month\") ?? \"\";\n\n// Compute the endpoint URL with filter params; the component appends offset/limit.\nconst u = new URLSearchParams();\nif (year) u.set(\"year\", year);\nif (month) u.set(\"month\", month);\nconst endpoint = `/api/gallery.json${u.toString() ? `?${u}` : \"\"}`;\n---\n\n\n\n```\n\n```ts\n// src/pages/api/gallery.json.ts\nimport type { APIRoute } from \"astro\";\nimport { getCollection } from \"astro:content\";\nimport { getImage } from \"astro:assets\";\n\nexport const GET: APIRoute = async ({ url }) => {\n const offset = Math.max(0, +(url.searchParams.get(\"offset\") ?? 0));\n const limit = Math.min(200, +(url.searchParams.get(\"limit\") ?? 50));\n const year = url.searchParams.get(\"year\");\n const month = url.searchParams.get(\"month\");\n\n const all = await getCollection(\"photos\");\n const filtered = all.filter((p) => {\n const d = p.data.meta?.dateTaken;\n if (!year && !month) return true;\n if (!d) return false;\n const y = String(d.getFullYear());\n const m = String(d.getMonth() + 1).padStart(2, \"0\");\n return (!year || y === year) && (!month || m === month);\n });\n\n const items = await Promise.all(\n filtered.slice(offset, offset + limit).map(async (entry) => {\n const opt = await getImage({\n src: entry.data.src,\n widths: [400, 800, 1600],\n formats: [\"webp\"],\n });\n return {\n src: opt.src,\n srcset: opt.srcSet?.attribute,\n sizes: \"(max-width: 800px) 50vw, 25vw\",\n w: entry.data.src.width,\n h: entry.data.src.height,\n alt: entry.data.alt ?? \"\",\n preview: entry.data.preview, // LQIP from the loader\n };\n }),\n );\n\n return Response.json({ items, total: filtered.length });\n};\n```\n\nThis setup runs in Astro SSR mode (`output: \"server\"`) and scales to tens of thousands of photos because the initial HTML is constant-size and the client only keeps a sliding window of items in the DOM.\n\n### Static gallery without a content collection\n\nYou don't need the loader at all — just `import.meta.glob`:\n\n```astro\n---\nimport JustifiedGallery from \"@altner/astro-justified-gallery-layout/JustifiedGallery.astro\";\nimport type { ImageMetadata } from \"astro\";\n\nconst modules = import.meta.glob<{ default: ImageMetadata }>(\n \"../assets/photos/*.{jpg,jpeg,png,webp,avif}\",\n { eager: true },\n);\nconst images = Object.values(modules).map((m) => ({ src: m.default }));\n---\n\n\n```\n\nNo EXIF, no LQIP, no captions — but minimum setup.\n\n## Comparison vs. flickr/justified-layout\n\n| | This package (core) | flickr/justified-layout |\n|---|---|---|\n| Size | ~120 LOC, ~1kB min+gz | ~30kB minified |\n| Module format | ESM only | UMD (Node-style) |\n| Dependencies | 0 | several |\n| TypeScript types | Bundled | DefinitelyTyped, often stale |\n| Astro component | Bundled | — |\n| Last release | Active | 2018 |\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-f322ab4cb9180d7fbcfc46cb5d7e860d"}