Add credits, captions, alt-text to images (main and image gallery)

[troughc]

Provide ability for users to add a credit, alt text and caption to an image - both the main image and in the image gallery.
Please note that a sentence is also missing below the 'Additional images' title (see the figma for the sentence - it is the same sentence that is used under 'Main image')

Link to Figma:
https://www.figma.com/design/DBnSSMT9Etfm6guDKKSp8O/Culture-Creates---Footlight-Calendar?node-id=11196-144932&t=m8c72TjXYYiFKI2j-1

[sahalali]

Estimate: 6 Hrs

1. Update the image model to include imageCredit
2. Update API requests and responses to include imageCredit.
3. Open-API response needs to be updated, which needs to be reviewed by @saumier.

[sahalali]

@AbhishekPAnil Please add the UI estimates.

[AbhishekPAnil]

Frontend tasks : 25H

1. Add the options modal to the image footer. -3
2. Shift the crop/delete image logic to the options inside the modal. -5
3. Add the modal to add image credit. -6
4. Add the logic to show the just added credits inside the image footer.-3
5. update api integration to post the image credits.-3
6. Update api integration to show the initial image credits.-3
7. Update the footer to show image credit.-2

[troughc]

@saumier please see @sahalali comment above where you need to review:
Open-API response needs to be updated, which needs to be reviewed by @saumier.

Also, at the top is a link to the figma. Please assign back tome when you are done.

[troughc]

@sahalali, @saumier has seen the figma. I have asked Stephanie to add another option for alt-text but I don't think it will impact the estimate. Let's add this ticket to the next sprint if possible.
cc @troughc

[saumier]

@sahalali @troughc Here is the agreed upon JSON-LD discussed with LaVitrine and CAPACOA. It can also have additional properties like "thumbmail" and "width", "height" but I am only showing the new ones related to image credit and alt-text.

{
  "@type": "ImageObject",
  "description": "Alt text if available",
  "creditText": "photo credit if available",
  "url": "image url"
}

[saumier]

@sahalali @dev-aravind Here is the updated Artsdata JSON-LD following discussion and feedback from the Artsdata Group run by CAPACOA. This is the same as the JSON-LD above but with additional properties that are all optional. Here is the discussion in Github if anyone wants to follow the thread.

"image":
{
  "@type": "ImageObject",
  "url": "--URL officiel de l'image : Official image URL--",
  "copyrightNotice": "--licence et attribution au propriétaire du droit d'auteur : license and attribution to the copyright owner--",
  "usageInfo": "--lien vers les directives concernant la réutilisation des images d'événements : link to suggested guidelines for reusing event images--",
  "author": {
       "@type": "Person",
      "name": "--Nom du photographe ou créateur d'image : Name of photographer or image creator--"
                     },
  "disambiguatingDescription": "--description sous forme de formule, telle que « Image de NOM DE L'ÉVÉNEMENT, provenant de NOM DE DOMAINE DU SITE WEB » : formulaic description, such as 'Image of EVENT NAME, sourced from WEBSITE DOMAIN NAME'--",
  "creditText": "--credit photo complet, y compris le nom du photographe, de la compagnie de production et des interprètes représentés sur la scène : full photo credit, including the name of the photographer, production company and performers represented onstage --",
  "caption": "--explication d'une ligne de ce que l'image représente : one-line explanation of what the image represents--",
  "description": "--Alt texte, si disponible : Alt text, if available--"
}

For CMS I propose we continue to include "thumbnailUrl", "width" and "height" to "ImageObject" like we currently do when exporting the event details JSON-LD for inclusion on customers websites.

CMS proposal:

"image":
{
  "@type": "ImageObject",
  "url": "image url",
  "description": "Alt text if available",
  "creditText": "optional photo credit entered into CMS",
  "caption": "optional one-line caption to be displayed on the webpage to accompany the image. Not the same as 'description'.",
  "thumbnailUrl": "thumbnail image url",
  "width":"width of the full image represented by 'url' (not 'thumbnailUrl')",
  "height":"height of the full image represented by 'url' (not 'thumbnailUrl')"
}

[sahalali]

@AbhishekPAnil The backed changes are up in staging

[troughc]

@sahalali I added the milestone 2025.1 to this ticket. Let me know if you have any concerns.