Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: added condition to set the listing image caption #851

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
15 changes: 15 additions & 0 deletions RELEASE.md
Original file line number Diff line number Diff line change
@@ -41,6 +41,21 @@
- ...
-->

## Versione X.X.X (dd/mm/yyyy)

### Migliorie

- ...

### Novità

- ...

### Fix

- 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.5 (06/02/2025)

### Migliorie
Original file line number Diff line number Diff line change
@@ -106,7 +106,7 @@ const CardWithImageDefault = (props) => {
})}
>
<div className="img-responsive img-responsive-panoramic">
<ListingImage item={item} showTitleAttr={false} />
<ListingImage item={item} />
{item['@type'] === 'Event' && (
<CardCalendar
start={item.start}
21 changes: 17 additions & 4 deletions src/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage.jsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@ const ListingImage = ({
showDefault = false,
className = 'listing-image',
responsive = true,
showTitleAttr = true,
sizes = '(max-width:320px) 200px, (max-width:425px) 300px, (max-width:767px) 500px, 410px',
noWrapLink = false,
...imageProps
@@ -46,19 +45,33 @@ const ListingImage = ({
} else return null;
}
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);

//Verifies with caption to show as alt and title text
const imageCaption =
item.hasPreviewImage && item.preview_caption ? item.preview_caption : null;

let commonImageProps = {
item,
'aria-hidden': imageProps.alt || item.title ? false : true,
alt: imageProps.alt ?? item.title ?? '',
alt: imageProps.alt ?? imageCaption ?? '',
role: imageProps.alt || item.title ? '' : 'presentation',
className,
loading,
responsive,
sizes,
...imageProps,
};
if (showTitleAttr)
commonImageProps = { ...commonImageProps, title: item.title };

// show title attribute if preview_caption or image_caption is present for the alt text
if (showTitleAttr) {
commonImageProps = {
...commonImageProps,
title: imageCaption,
};
}
Wagner3UB marked this conversation as resolved.
Show resolved Hide resolved

return (
<ListingImageWrapper item={item} noWrapLink={noWrapLink}>
Original file line number Diff line number Diff line change
@@ -86,7 +86,6 @@ const CompleteBlockLinksTemplate = (props) => {
item={item}
className=""
sizes="60px"
showTitleAttr={false}
alt={item.title}
/>
</div>
Original file line number Diff line number Diff line change
@@ -86,7 +86,6 @@ const ContentInEvidenceTemplate = (props) => {
className="item-image"
loading="eager"
sizes="(max-width:425px) 400px, (max-width:767px) 520px, 650px"
showTitleAttr={false}
/>
</Col>
)}
Original file line number Diff line number Diff line change
@@ -55,9 +55,10 @@ const GridGalleryTemplate = ({
)}
<div className="grid-gallery-grid">
{items.map((item, index) => {
let image = (
<ListingImage item={item} className="" showTitleAttr={false} />
);
let image = ListingImage({
item,
className: '',
});
let scale = null;
let hasImage = contentHasImage(item);
if (index % 7 === 0 || index % 7 === 6 || index % 7 === 3) {
Original file line number Diff line number Diff line change
@@ -114,7 +114,6 @@ const InEvidenceTemplate = (props) => {
<ListingImage
item={item}
sizes="(max-width:320px) 200px, 300px"
showTitleAttr={false}
/>
{item['@type'] === 'Event' && (
<CardCalendar start={item.start} end={item.end} />
2 changes: 1 addition & 1 deletion src/components/ItaliaTheme/Cards/CardPersona.jsx
Original file line number Diff line number Diff line change
@@ -54,7 +54,7 @@ export const CardPersona = ({
</CardBody>
{hasImage && (
<div className="card-image card-image-rounded">
<ListingImage item={item} sizes="130px" showTitleAttr={false} />
<ListingImage item={item} sizes="130px" />
</div>
)}
</div>