diff options
| author | Dawid Rycerz <dawid@rycerz.xyz> | 2026-01-13 19:23:21 +0100 |
|---|---|---|
| committer | Dawid Rycerz <dawid@rycerz.xyz> | 2026-01-13 19:23:21 +0100 |
| commit | 1e2f147e08e6e69a7a356f38014dab33585544c2 (patch) | |
| tree | 9fa652926107e4e72fd779635979ede7ea64daa3 /src | |
| parent | 42662ae3db2a2f2366942ab7d68f9441e03b29bb (diff) | |
Add zoom feature for images
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/BlogPost.astro | 9 | ||||
| -rw-r--r-- | src/loaders/pleroma.ts | 4 | ||||
| -rw-r--r-- | src/styles/global.css | 6 |
3 files changed, 16 insertions, 3 deletions
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 2744b8c..436efde 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -92,3 +92,12 @@ const readingTime: string = remarkPluginFrontmatter.readingTime; const observer = new IntersectionObserver(callback); observer.observe(targetHeader); </script> + +<script> + import mediumZoom from "medium-zoom"; + + mediumZoom("[data-zoomable]", { + margin: 8, + background: "rgba(0, 0, 0, 0.2)", + }); +</script> diff --git a/src/loaders/pleroma.ts b/src/loaders/pleroma.ts index 83f60c2..853c888 100644 --- a/src/loaders/pleroma.ts +++ b/src/loaders/pleroma.ts @@ -531,9 +531,7 @@ function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string { ${imageAttachments .map((attachment) => { const description = attachment.description || "Image"; - return `<a href="${attachment.url}" target="_blank" rel="noopener noreferrer" class="block overflow-hidden rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"> -<img src="${attachment.url}" alt="${description}" class="h-48 w-full object-cover" loading="lazy" /> -</a>`; + return `<img src="${attachment.url}" alt="${description}" class="h-48 w-full cursor-zoom-in rounded-lg border border-gray-200 object-cover transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable />`; }) .join("\n")} </div>`; diff --git a/src/styles/global.css b/src/styles/global.css index 5f5cdb6..798afc7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -146,3 +146,9 @@ --tw-prose-quotes: var(--color-quote); --tw-prose-th-borders: #666; } + +/* Medium-zoom overlay styles */ +.medium-zoom-overlay, +.medium-zoom-image--opened { + z-index: 999; +} |