From f38a0cb8446201cd6c937d96da33b58b4427c78f Mon Sep 17 00:00:00 2001
From: Dawid Rycerz <dawid@rycerz.xyz>
Date: Tue, 13 Jan 2026 20:21:16 +0100
Subject: Add alt texts rendering

---
 src/loaders/pleroma.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

(limited to 'src/loaders/pleroma.ts')

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");
-- 
cgit v1.2.3