From abf980d99749098e03f59e96a9f4b88d304e1edb Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Tue, 7 Jan 2025 14:50:00 +0100 Subject: [PATCH 1/9] fix: added condition to set the listing image caption --- .../Blocks/Listing/Commons/ListingImage.jsx | 12 ++++++++++-- .../Blocks/Listing/CompleteBlockLinksTemplate.jsx | 1 - 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index 1b2a84bf5..5b9196be5 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -26,8 +26,16 @@ const ListingImage = ({ sizes, ...imageProps, }; - if (showTitleAttr) - commonImageProps = { ...commonImageProps, title: item.title }; + if (showTitleAttr) { + commonImageProps = { + ...commonImageProps, + title: item.hasPreviewImage + ? item.preview_caption || item.title + : item.image_field + ? item.image_caption || item.title + : '', + }; + } // photogallery needs to check for null image // https://stackoverflow.com/questions/33136399/is-there-a-way-to-tell-if-reactelement-renders-null diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx index 504086ad3..3ea9b2199 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx @@ -60,7 +60,6 @@ const CompleteBlockLinksTemplate = (props) => { item, className: '', sizes: '60px', - showTitleAttr: false, alt: item.title, }); From 022d68591ad158df0a15967b059fef05c75eca8e Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Thu, 9 Jan 2025 15:44:27 +0100 Subject: [PATCH 2/9] fix: new condition to show alt and title attr inside ListingImage --- .../CardWithImage/CardWithImageDefault.jsx | 4 ++- .../Blocks/Listing/Commons/ListingImage.jsx | 26 ++++++++++++++----- .../Listing/CompleteBlockLinksTemplate.jsx | 1 - .../Listing/ContentInEvidenceTemplate.jsx | 1 - .../Blocks/Listing/GridGalleryTemplate.jsx | 1 - .../Blocks/Listing/InEvidenceTemplate.jsx | 1 - .../ItaliaTheme/Cards/CardPersona.jsx | 1 - 7 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx index f7102c275..8a8d5c5e9 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -61,7 +61,9 @@ const CardWithImageDefault = (props) => { : getEventRecurrenceMore(item, isEditMode); const listingText = show_description ? : null; - const image = ListingImage({ item, showTitleAttr: false }); + const image = ListingImage({ + item, + }); const showImage = (index < imagesToShow || always_show_image) && image != null; diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index 5b9196be5..23dedf58f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -9,16 +9,30 @@ const ListingImage = ({ showDefault = false, className = 'listing-image', responsive = true, - showTitleAttr = true, + showTitleAttr = !!( + (item.hasPreviewImage && item.preview_caption) || + (item.image_field && item.image_caption) + ), // show title only if the listing image have an image and caption sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px', noWrapLink = false, ...imageProps }) => { const Image = config.getComponent({ name: 'Image' }).component; + + const imageCaption = item.hasPreviewImage + ? item.preview_caption + ? item.preview_caption + : '' + : item.image_field + ? item.image_caption + ? item.image_caption + : '' + : ''; + let commonImageProps = { item, 'aria-hidden': imageProps.alt || item.title ? false : true, - alt: imageProps.alt ?? item.title ?? '', + alt: imageCaption, role: imageProps.alt || item.title ? '' : 'presentation', className, loading, @@ -26,14 +40,12 @@ const ListingImage = ({ sizes, ...imageProps, }; + + // show title attribute if preview_caption or image_caption is present for the alt text if (showTitleAttr) { commonImageProps = { ...commonImageProps, - title: item.hasPreviewImage - ? item.preview_caption || item.title - : item.image_field - ? item.image_caption || item.title - : '', + title: imageCaption, }; } // photogallery needs to check for null image diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx index 3ea9b2199..240a15e47 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx @@ -60,7 +60,6 @@ const CompleteBlockLinksTemplate = (props) => { item, className: '', sizes: '60px', - alt: item.title, }); const BlockExtraTags = getComponentWithFallback({ diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx index 25b003800..bb7c99487 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx @@ -71,7 +71,6 @@ const ContentInEvidenceTemplate = (props) => { className: 'item-image', loading: 'eager', sizes: '(max-width:425px) 400px, (max-width:767px) 520px, 650px', - showTitleAttr: false, }); const icon = getItemIcon(item); const BlockExtraTags = getComponentWithFallback({ diff --git a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx index 0b311f313..1e21911ad 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate.jsx @@ -58,7 +58,6 @@ const GridGalleryTemplate = ({ let image = ListingImage({ item, className: '', - showTitleAttr: false, }); let scale = null; if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) { diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx index eb8ca7882..866276ad5 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx @@ -90,7 +90,6 @@ const InEvidenceTemplate = (props) => { const image = ListingImage({ item, sizes: '(max-width:320px) 200px, 300px', - showTitleAttr: false, }); const category = getCategory(item, show_type, show_section, props); const topics = show_topics ? item.tassonomia_argomenti : null; diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx index ac09a27b3..922ce71d2 100644 --- a/src/components/ItaliaTheme/Cards/CardPersona.jsx +++ b/src/components/ItaliaTheme/Cards/CardPersona.jsx @@ -23,7 +23,6 @@ export const CardPersona = ({ const image = ListingImage({ item, sizes: '130px', - showTitleAttr: false, }); const hasImage = image !== null && showImage; From 7d84ca3c114a004e7511162833fd4729241b582e Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Thu, 9 Jan 2025 15:54:25 +0100 Subject: [PATCH 3/9] chore: release.md --- RELEASE.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/RELEASE.md b/RELEASE.md index 6a35b8f6b..bff27a0ee 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -41,6 +41,22 @@ - ... --> +## Versione X.X.X (dd/mm/yyyy) + +### Migliorie + +- ... + +### Novità + +- ... + +### Fix + +- Aggiunta una nuova condizione per la corretta compilazione dell’attributo alt nelle immagini dei blocchi listing. Ora il campo alt utilizza correttamente i testi delle didascalie delle immagini di anteprima o testata se impostati. +- Aggiunta una nuova condizione per la corretta compilazione dell’attributo title nelle immagini dei blocchi listing. Ora il campo title viene valorizzato solo se esiste una didascalia associata all’immagine di anteprima o testata. +- Rimosso l’attributo showTitleAttr dai tipi di card nei blocchi listing: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, e in evidenza. Questo attributo ora viene settato dentro a ListingImage. + ## Versione 11.26.1 (27/12/2024) ### Fix From 2d4b49d728345e7073adc6489698449748a5fee6 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Fri, 10 Jan 2025 15:04:40 +0100 Subject: [PATCH 4/9] fix: condition changed --- .../Blocks/Listing/Commons/ListingImage.jsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index 23dedf58f..e02b916c1 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -19,20 +19,17 @@ const ListingImage = ({ }) => { const Image = config.getComponent({ name: 'Image' }).component; - const imageCaption = item.hasPreviewImage - ? item.preview_caption + const imageCaption = + item.hasPreviewImage && item.preview_caption ? item.preview_caption - : '' - : item.image_field - ? item.image_caption + : item.image_field && item.image_caption ? item.image_caption - : '' - : ''; + : null; let commonImageProps = { item, 'aria-hidden': imageProps.alt || item.title ? false : true, - alt: imageCaption, + alt: imageProps.alt ?? imageCaption ?? '', role: imageProps.alt || item.title ? '' : 'presentation', className, loading, @@ -45,7 +42,7 @@ const ListingImage = ({ if (showTitleAttr) { commonImageProps = { ...commonImageProps, - title: imageCaption, + title: item.title, }; } // photogallery needs to check for null image From cd45a647623b30e776f25b1495a115b421451d02 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Fri, 24 Jan 2025 14:38:18 +0100 Subject: [PATCH 5/9] fix: showTitleAttr declared inside ListingImage --- .../Blocks/Listing/Commons/ListingImage.jsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index e02b916c1..e71fed59f 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -9,16 +9,17 @@ const ListingImage = ({ showDefault = false, className = 'listing-image', responsive = true, - showTitleAttr = !!( - (item.hasPreviewImage && item.preview_caption) || - (item.image_field && item.image_caption) - ), // show title only if the listing image have an image and caption sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px', noWrapLink = false, ...imageProps }) => { const Image = config.getComponent({ name: 'Image' }).component; + const showTitleAttr = !!( + (item.hasPreviewImage && item.preview_caption) || + (item.image_field && item.image_caption) + ); + const imageCaption = item.hasPreviewImage && item.preview_caption ? item.preview_caption @@ -26,6 +27,8 @@ const ListingImage = ({ ? item.image_caption : null; + console.log('imageCaption', imageCaption); + let commonImageProps = { item, 'aria-hidden': imageProps.alt || item.title ? false : true, @@ -42,7 +45,7 @@ const ListingImage = ({ if (showTitleAttr) { commonImageProps = { ...commonImageProps, - title: item.title, + title: imageCaption, }; } // photogallery needs to check for null image From 7f76e32fb3ceca2be773bb3e29a9f6f9ed27b20b Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Fri, 24 Jan 2025 14:40:07 +0100 Subject: [PATCH 6/9] fix: file cleaned --- .../ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index e71fed59f..db0bb48bd 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -27,8 +27,6 @@ const ListingImage = ({ ? item.image_caption : null; - console.log('imageCaption', imageCaption); - let commonImageProps = { item, 'aria-hidden': imageProps.alt || item.title ? false : true, From 670c2b67d4d60311d75da087a5f5afe022e0fb95 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Fri, 24 Jan 2025 14:41:54 +0100 Subject: [PATCH 7/9] chore: comments --- .../ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx index db0bb48bd..340cfb044 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx @@ -15,11 +15,13 @@ const ListingImage = ({ }) => { const Image = config.getComponent({ name: 'Image' }).component; + //Verifies if the item has a preview image or an header image const showTitleAttr = !!( (item.hasPreviewImage && item.preview_caption) || (item.image_field && item.image_caption) ); + //Verifies with caption to show as alt and title text const imageCaption = item.hasPreviewImage && item.preview_caption ? item.preview_caption From 4e82560ab7ef0184cb0c3128a9b0ec8dfb263988 Mon Sep 17 00:00:00 2001 From: Wagner Trezub <60133113+Wagner3UB@users.noreply.github.com> Date: Mon, 27 Jan 2025 10:09:53 +0100 Subject: [PATCH 8/9] Update RELEASE.md Co-authored-by: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com> --- RELEASE.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/RELEASE.md b/RELEASE.md index 01c410681..8234716a5 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -53,9 +53,9 @@ ### Fix -- Aggiunta una nuova condizione per la corretta compilazione dell’attributo alt nelle immagini dei blocchi listing. Ora il campo alt utilizza correttamente i testi delle didascalie delle immagini di anteprima o testata se impostati. -- Aggiunta una nuova condizione per la corretta compilazione dell’attributo title nelle immagini dei blocchi listing. Ora il campo title viene valorizzato solo se esiste una didascalia associata all’immagine di anteprima o testata. -- Rimosso l’attributo showTitleAttr dai tipi di card nei blocchi listing: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, e in evidenza. Questo attributo ora viene settato dentro a ListingImage. +- Aggiunta una nuova condizione per la corretta compilazione dell’attributo **alt** e **title** nelle immagini dei blocchi listing. Ora questi attributi utilizzano correttamente i testi delle didascalie dell'immagine di anteprima o testata se impostati. L'attributo **title** viene valorizzato solo se esiste una didascalia associata all’immagine. + +- Rimosso l’attributo **showTitleAttr** dal componente _ListingImage_ utilizzato nei template del blocco listing: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, e in evidenza. Ora gli attributi **title** e **alt** vengono calcolati e impostati direttamente dal componente _ListingImage_. ## Versione 11.26.3 (15/01/2025) ### Fix From b7c81db9297a8c3bee2e697641a64b9882bfb556 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Fri, 7 Feb 2025 14:39:43 +0100 Subject: [PATCH 9/9] fix: image_filed removed as condition to show title/alt --- .../Listing/CardWithImage/CardWithImageDefault.jsx | 2 +- .../Blocks/Listing/Commons/ListingImage.jsx | 11 ++--------- .../Blocks/Listing/CompleteBlockLinksTemplate.jsx | 1 - .../Blocks/Listing/ContentInEvidenceTemplate.jsx | 1 - .../ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx | 1 - src/components/ItaliaTheme/Cards/CardPersona.jsx | 2 +- 6 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx index 4a1c3ea21..9bed6ad1c 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx @@ -106,7 +106,7 @@ const CardWithImageDefault = (props) => { })} >
- + {item['@type'] === 'Event' && ( { item={item} className="" sizes="60px" - showTitleAttr={false} alt={item.title} />
diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx index 4f00d9663..d3113e317 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx @@ -86,7 +86,6 @@ const ContentInEvidenceTemplate = (props) => { className="item-image" loading="eager" sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px" - showTitleAttr={false} /> )} diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx index 9d5d31b4b..7f049588d 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx @@ -114,7 +114,6 @@ const InEvidenceTemplate = (props) => { {item['@type'] === 'Event' && ( diff --git a/src/components/ItaliaTheme/Cards/CardPersona.jsx b/src/components/ItaliaTheme/Cards/CardPersona.jsx index 6dc8fafe8..7c9b1c926 100644 --- a/src/components/ItaliaTheme/Cards/CardPersona.jsx +++ b/src/components/ItaliaTheme/Cards/CardPersona.jsx @@ -54,7 +54,7 @@ export const CardPersona = ({ {hasImage && (
- +
)}