From fb10548d612dc22156d705400d5c1b1aa14962ac Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sun, 15 Mar 2026 22:03:21 +0100
Subject: [PATCH] display kind 20 alt text

---
 src/components/Image/index.tsx             |  1 +
 src/components/ImageGallery/index.tsx      | 11 +++++++----
 src/components/ImageWithLightbox/index.tsx | 11 +++++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index a39d9d23..6cb4fa2a 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -128,6 +128,7 @@ export default function Image({
         <img
           src={imageUrl}
           alt={finalAlt}
+          title={finalAlt || undefined}
           decoding="async"
           loading="lazy"
           draggable={false}
diff --git a/src/components/ImageGallery/index.tsx b/src/components/ImageGallery/index.tsx
index d8aa17b9..fae861fd 100644
--- a/src/components/ImageGallery/index.tsx
+++ b/src/components/ImageGallery/index.tsx
@@ -7,7 +7,9 @@ import { TImetaInfo } from '@/types'
 import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import Lightbox from 'yet-another-react-lightbox'
+import Captions from 'yet-another-react-lightbox/plugins/captions'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
+import 'yet-another-react-lightbox/plugins/captions.css'
 import Image from '../Image'
 import ImageWithLightbox from '../ImageWithLightbox'
 
@@ -110,14 +112,15 @@ export default function ImageGallery({
             <Lightbox
               index={index}
               slides={(() => {
-                const slides = images.map(({ url, alt }) => ({ 
-                  src: url, 
-                  alt: alt || url 
+                const slides = images.map(({ url, alt }) => ({
+                  src: url,
+                  alt: alt || url,
+                  title: alt || undefined
                 }))
                 logger.debug('[ImageGallery] Lightbox slides:', { index, slidesCount: slides.length, slides })
                 return slides
               })()}
-              plugins={[Zoom]}
+              plugins={[Zoom, Captions]}
               open={index >= 0}
               close={() => setIndex(-1)}
               controller={{
diff --git a/src/components/ImageWithLightbox/index.tsx b/src/components/ImageWithLightbox/index.tsx
index 1fc787ab..7d512a8d 100644
--- a/src/components/ImageWithLightbox/index.tsx
+++ b/src/components/ImageWithLightbox/index.tsx
@@ -7,7 +7,9 @@ import { useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Lightbox from 'yet-another-react-lightbox'
+import Captions from 'yet-another-react-lightbox/plugins/captions'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
+import 'yet-another-react-lightbox/plugins/captions.css'
 import Image from '../Image'
 
 export default function ImageWithLightbox({
@@ -73,11 +75,12 @@ export default function ImageWithLightbox({
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox
               index={index}
-              slides={[{ 
-                src: image.url, 
-                alt: image.alt || image.url 
+              slides={[{
+                src: image.url,
+                alt: image.alt || image.url,
+                title: image.alt || undefined
               }]}
-              plugins={[Zoom]}
+              plugins={[Zoom, Captions]}
               open={index >= 0}
               close={() => setIndex(-1)}
               controller={{