diff options
Diffstat (limited to 'src/loaders/pleroma.ts')
| -rw-r--r-- | src/loaders/pleroma.ts | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/src/loaders/pleroma.ts b/src/loaders/pleroma.ts index d633aa0..766e9ee 100644 --- a/src/loaders/pleroma.ts +++ b/src/loaders/pleroma.ts @@ -531,6 +531,18 @@ function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string { if (count === 1 && imageAttachments[0]) { const attachment = imageAttachments[0]; const description = attachment.description || "Image"; + // Only wrap with figcaption if we have descriptive alt text + const hasDescriptiveAlt = + description && description.trim() && description.toLowerCase() !== "image"; + + if (hasDescriptiveAlt) { + return ` +<figure class="image-with-alt group relative mt-4 mb-4"> +<img src="${attachment.url}" alt="${description}" class="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 /> +<figcaption class="pointer-events-none absolute bottom-0 left-0 right-0 rounded-b-lg bg-black/70 px-3 py-2 text-sm text-white opacity-0 transition-opacity group-hover:opacity-100">${description}</figcaption> +</figure>`; + } + return ` <div class="mt-4 mb-4"> <img src="${attachment.url}" alt="${description}" class="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 /> @@ -542,9 +554,19 @@ function buildImageGridHtml(attachments: PleromaMediaAttachment[]): string { const images = imageAttachments .map((attachment, index) => { const description = attachment.description || "Image"; + const hasDescriptiveAlt = + description && description.trim() && description.toLowerCase() !== "image"; // For odd count, the last image spans all columns const isLastImage = index === count - 1; const spanClass = isOdd && isLastImage ? "sm:col-span-2" : ""; + + if (hasDescriptiveAlt) { + return `<figure class="image-with-alt group relative h-fit ${spanClass}"> +<img src="${attachment.url}" alt="${description}" class="w-full max-h-96 object-cover cursor-zoom-in rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600" loading="lazy" data-zoomable /> +<figcaption class="pointer-events-none absolute bottom-0 left-0 right-0 rounded-b-lg bg-black/70 px-3 py-2 text-sm text-white opacity-0 transition-opacity group-hover:opacity-100">${description}</figcaption> +</figure>`; + } + return `<img src="${attachment.url}" alt="${description}" class="w-full max-h-96 object-cover cursor-zoom-in rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600 ${spanClass}" loading="lazy" data-zoomable />`; }) .join("\n"); |