From 2a1a33eaba1520b2adc1d2b4fa168e593a129168 Mon Sep 17 00:00:00 2001 From: Mainul Hassan Date: Tue, 18 Feb 2025 00:29:14 +0600 Subject: [PATCH 1/2] Fix lightbox showing 'Placeholder' instead of image ALT text --- src/js/coblocks-lightbox.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/coblocks-lightbox.js b/src/js/coblocks-lightbox.js index 505bf98b254..130e6e62376 100644 --- a/src/js/coblocks-lightbox.js +++ b/src/js/coblocks-lightbox.js @@ -154,6 +154,8 @@ img.attributes.src.value; } + imagePreloader[ `img-${ imgIndex }` ][ 'data-alt' ] = img.attributes.alt?.value || ''; + imagePreloader[ `img-${ imgIndex }` ][ 'data-caption' ] = ( images[ imgIndex ] && images[ imgIndex ].nextElementSibling ) ? getImageCaption( images[ imgIndex ] ) : ''; @@ -177,6 +179,7 @@ openLightbox(); wrapperBackground.style.backgroundImage = `url(${ imagePreloader[ `img-${ index }` ].src })`; image.src = imagePreloader[ `img-${ index }` ].src; + image.alt = imagePreloader[ `img-${ index }` ][ 'data-alt' ]; caption.innerHTML = imagePreloader[ `img-${ index }` ][ 'data-caption' ]; counter.textContent = `${ ( index + 1 ) } / ${ images.length }`; } From 155c982701e1cc40319c36e4fed8958a2f8a553e Mon Sep 17 00:00:00 2001 From: Mainul Hassan Date: Tue, 18 Feb 2025 12:26:40 +0600 Subject: [PATCH 2/2] Fix lightbox to use image alt attribute instead of data-alt --- src/js/coblocks-lightbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/coblocks-lightbox.js b/src/js/coblocks-lightbox.js index 130e6e62376..8e6ddb4c70f 100644 --- a/src/js/coblocks-lightbox.js +++ b/src/js/coblocks-lightbox.js @@ -154,7 +154,7 @@ img.attributes.src.value; } - imagePreloader[ `img-${ imgIndex }` ][ 'data-alt' ] = img.attributes.alt?.value || ''; + imagePreloader[ `img-${ imgIndex }` ].alt = img.attributes.alt?.value || ''; imagePreloader[ `img-${ imgIndex }` ][ 'data-caption' ] = ( images[ imgIndex ] && images[ imgIndex ].nextElementSibling ) @@ -179,7 +179,7 @@ openLightbox(); wrapperBackground.style.backgroundImage = `url(${ imagePreloader[ `img-${ index }` ].src })`; image.src = imagePreloader[ `img-${ index }` ].src; - image.alt = imagePreloader[ `img-${ index }` ][ 'data-alt' ]; + image.alt = imagePreloader[ `img-${ index }` ].alt; caption.innerHTML = imagePreloader[ `img-${ index }` ][ 'data-caption' ]; counter.textContent = `${ ( index + 1 ) } / ${ images.length }`; }