WIP: Image avec Crédits

frontend/src/app/[locale]/about/about.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { useTranslations } from 'next-intl';
 import {
   CtaWithImage,
   EditoCard,
   LargeTextImage,
   MembersBlock,
   PartnersBlock,
-  Title,
   TestimoniesCarousel,
+  Title,
 } from '@/components';
 import { IMembers } from '@/lib/types';
+import { useTranslations } from 'next-intl';
 import { AboutPageData } from './page';
 
 function transformTestimonials(
@@ -21,6 +21,7 @@ function transformTestimonials(
     author: testimonial.author,
     content: testimonial.quote,
     image: testimonial.avatar?.url,
+    imageCredit: testimonial.avatar?.caption ?? null,
   }));
 }
 
@@ -41,6 +42,7 @@ function transformMember(
     name: member.name,
     role: member.role,
     image: member.avatar?.url,
+    imageCredit: member.avatar?.caption ?? null,
     linkedin: member.linkedin,
   };
 }
@@ -131,6 +133,7 @@ export default function AboutPage({ data }: AboutProps) {
               rotation: -3.7,
               className: 'relative sm:left-[182px] md:-top-4',
             }}
+            imageCredit={data.cta_left?.image?.caption}
           />
         </div>
 
@@ -145,6 +148,7 @@ export default function AboutPage({ data }: AboutProps) {
             className: 'sm:left-6',
           }}
           image={data.cta_right?.image.url ?? ''}
+          imageCredit={data.cta_right?.image.caption ?? null}
           className="w-full lg:w-[770px] overflow-hidden md:overflow-visible"
           contentClassName="relative lg:top-24"
           cta={{
@@ -166,6 +170,7 @@ export default function AboutPage({ data }: AboutProps) {
       <EditoCard
         title={data.map_cta?.title}
         image={data.map_cta?.image.url}
+        imageCredit={data.map_cta?.image.caption ?? null}
         ctaText={data.map_cta?.cta.text}
         ctaLink={data.map_cta?.cta.link}
         className="my-lg"
@@ -181,6 +186,7 @@ export default function AboutPage({ data }: AboutProps) {
         title={data.volunteer_cta?.title}
         content={data.volunteer_cta?.content}
         image={data.volunteer_cta?.image.url}
+        imageCredit={data.volunteer_cta?.image.caption ?? null}
         ctaText={data.volunteer_cta.cta.text}
         ctaLink={data.volunteer_cta.cta.link}
         className="my-lg"

frontend/src/app/[locale]/blog/[slug]/article.tsx

@@ -17,11 +17,12 @@ function estimateReadingTime(content: string): string {
 
 export default function ArticlePage({ blog }: BlogPageProps) {
   const heroBlock = {
-    image: blog.thumbnail?.formats?.large?.url ?? '/images/dataforgood.svg',
-    title: blog.title,
-    introduction: blog.description,
-    date: new Date(blog.published_date).toLocaleDateString(undefined, { dateStyle: "long" }),
-    readTime: estimateReadingTime(blog.content),
+    image: blog.thumbnail?.url ?? '/images/dataforgood.svg',
+    imageCredit: blog.thumbnail?.caption ?? null,
+    title: blog.title || '',
+    introduction: blog.description || '',
+    date: new Date(blog.published_date || '').toLocaleDateString(undefined, { dateStyle: "long" }),
+    readTime: estimateReadingTime(blog.content || ''),
     author: {
       name: blog.author?.name ?? 'DataForGood',
       link: ""

frontend/src/app/[locale]/blog/blog.tsx

@@ -19,6 +19,7 @@ function transformBlogsData(resources: NonNullable<BlogsPageData>) {
       rawDate: resource.published_date,
       date: new Date(resource.published_date).toLocaleString(undefined, {dateStyle: 'medium'}),
       image: element.thumbnail?.url ?? "/images/dataforgood.svg",
+      imageCredit: element.thumbnail?.caption ?? null,
       link: isBlog ? `/blog/${element.slug}` : element.article_link,
       subInfos: element.tags ? element.tags.map(tag => tag.name) : [],
       tags: [new Date(element.published_date).toLocaleDateString(undefined, {dateStyle: 'long'}), element.media_name],

frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx

@@ -34,6 +34,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
       <ThematicHeroBlock
         title={t('title')}
         image={data.thematic?.banner_image?.url || ''}
+        imageCredit={data.thematic?.banner_image?.caption ?? null}
         className="my-lg"
       />
 
@@ -42,6 +43,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote || ''}
         image={data.thematic?.image_1?.url || ''}
+        imageCredit={data.thematic?.image_1?.caption ?? null}
         imagePosition="left"
         imageTextRotation={-6}
         className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote2 || ''}
         image={data.thematic?.image_2?.url || ''}
+        imageCredit={data.thematic?.image_2?.caption ?? null}
         className="my-lg container"
         contentClassName="lead"
       >

frontend/src/app/[locale]/democracy/democracy.tsx

@@ -34,6 +34,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <ThematicHeroBlock
         title={t('title')}
         image={data.thematic?.banner_image?.url || ''}
+        imageCredit={data.thematic?.banner_image?.caption ?? null}
         className="my-lg"
       />
 
@@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote || ''}
         image={data.thematic?.image_1?.url || ''}
+        imageCredit={data.thematic?.image_1?.caption ?? null}
         imagePosition="left"
         imageTextRotation={-6}
         className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote2 || ''}
         image={data.thematic?.image_2?.url || ''}
+        imageCredit={data.thematic?.image_2?.caption ?? null}
         className="my-lg container"
         contentClassName="lead"
       >

frontend/src/app/[locale]/home.tsx

@@ -14,6 +14,7 @@ export default function Homepage({ data }: HomepageProps) {
 
   const heroData = {
     image: data.hero?.image?.url,
+    imageCredit: data.hero?.image?.caption ?? null,
     title: {
       level: 1 as TitleProps['level'],
       variant: "big" as TitleProps['variant'],
@@ -36,6 +37,7 @@ export default function Homepage({ data }: HomepageProps) {
   const projects = data.featured_projects?.map(project => ({
     id: (project.id ?? "" ).toString(),
     src: project.thumbnail?.url || '',
+    credit: project.thumbnail?.caption ?? null,
     title: project.title || '',
     alt: project.title || '',
     description: project.short_description || '',
@@ -56,6 +58,7 @@ export default function Homepage({ data }: HomepageProps) {
     title: event.name || '',
     date: new Date(event.date || '').toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric' }),
     image: event.image?.url,
+    imageCredit: event.image?.caption ?? null,
     tag: [t('events.tag')],
     link: event.link || '',
   })).filter(event => event.title && event.link) ?? [];
@@ -69,6 +72,7 @@ export default function Homepage({ data }: HomepageProps) {
       author: isBlog ? ( (resource.blog?.author as { name: string })?.name || t('resources.defaultAuthor')) : (resource.press_release as { media_name: string })?.media_name || '',
       talk: isBlog ? (resource.blog as { title: string })?.title || '' : (resource.press_release as { title: string })?.title || '',
       image: isBlog ? resource.blog?.thumbnail?.url || '' : resource.press_release?.thumbnail?.url || '',
+      imageCredit: isBlog ? (resource.blog?.thumbnail?.caption ?? null) : (resource.press_release?.thumbnail?.caption ?? null),
       ctaText: isBlog ? t('resources.articleCtaText') : t('resources.pressCtaText'),
       ctaLink: isBlog ? `/articles/${resource.blog?.slug || ''}` : (resource.press_release as { article_link: string })?.article_link || '',
     }
@@ -87,6 +91,7 @@ export default function Homepage({ data }: HomepageProps) {
     talk: thematic.short_description || '',
     talkOffset: 10,
     image: thematic.thumbnail?.url || '',
+    imageCredit: thematic.thumbnail?.caption ?? null,
     ctaText: thematic.cta_text,
     ctaLink: thematic.cta_link,
   })).filter(thematic => thematic.talk) ?? [];

frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx

@@ -58,7 +58,8 @@ function getSlides(project: ProjectPageData) {
     id: index + 1,
     description: image.caption,
     image: image.url,
-    altImage: image.alternativeText
+    altImage: image.alternativeText,
+    credit: image.caption
   })) || [];
 }
 
@@ -119,6 +120,7 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) {
     <>
       {project.title && <ProjectHeroBlock
         image={project.thumbnail?.url}
+        imageCredit={project.thumbnail?.caption ?? null}
         title={project.title}
         introduction={project.short_description}
         className='my-lg'

frontend/src/app/[locale]/projects/projects.tsx

@@ -24,6 +24,7 @@ function transformThematicsData(thematics: ProjectListPageData["thematics"]) {
     talk: thematic.short_description,
     talkOffset: 10,
     image: thematic.thumbnail?.url || '',
+    imageCredit: thematic.thumbnail?.caption ?? null,
     ctaText: thematic.cta_text,
     ctaLink: thematic.cta_link,
   })) || [];
@@ -92,27 +93,28 @@ export default function ProjectsPage({ data }: ProjectListProps) {
           {data.introduction}
         </Title>
 
-        <CtaWithImage
-          title={{
-            children: data.introduction_cta?.title,
-            rotation: -4,
-          }}
-          content={{
-            text: data.introduction_cta?.content ?? '',
-            rotation: 1.5,
-            className: 'sm:left-6',
-          }}
-          image={data.introduction_cta?.image.url ?? ''}
-          imageClassName="object-fill"
-          className="overflow-hidden md:overflow-visible md:w-[400px]"
-          contentClassName="relative md:top-24"
-          cta={{
-            text: data.introduction_cta?.cta.text,
-            link: data.introduction_cta?.cta.link,
-            rotation: 0.7,
-            className: 'relative sm:left-48 -top-2',
-          }}
-        />
+          <CtaWithImage
+            title={{
+              children: data.introduction_cta?.title,
+              rotation: -4,
+            }}
+            content={{
+              text: data.introduction_cta?.content ?? '',
+              rotation: 1.5,
+              className: 'sm:left-6',
+            }}
+            image={data.introduction_cta?.image.url ?? ''}
+            imageCredit={data.introduction_cta?.image.caption ?? null}
+            imageClassName="object-fill"
+            className="overflow-hidden md:overflow-visible md:w-[400px]"
+            contentClassName="relative md:top-24"
+            cta={{
+              text: data.introduction_cta?.cta.text,
+              link: data.introduction_cta?.cta.link,
+              rotation: 0.7,
+              className: 'relative sm:left-48 -top-2',
+            }}
+          />
       </div>
 
       <ThematicsBlock

frontend/src/app/[locale]/social-justice/social.tsx

@@ -34,6 +34,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <ThematicHeroBlock
         title={t('title')}
         image={data.thematic?.banner_image?.url || ''}
+        imageCredit={data.thematic?.banner_image?.caption ?? null}
         className="my-lg"
       />
 
@@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote || ''}
         image={data.thematic?.image_1?.url || ''}
+        imageCredit={data.thematic?.image_1?.caption ?? null}
         imagePosition="left"
         imageTextRotation={-6}
         className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
       <EditoCard
         imageText={data.thematic?.quote2 || ''}
         image={data.thematic?.image_2?.url || ''}
+        imageCredit={data.thematic?.image_2?.caption ?? null}
         className="my-lg container"
         contentClassName="lead"
       >

frontend/src/components/molecules/BaseCard/BaseCard.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Image from 'next/image';
+import ImageWithCredit from '@/components/molecules/ImageWithCredit';
 import { Tag, Title } from '@/components/atoms';
 import Link from 'next/link';
 
@@ -8,6 +9,7 @@ export type BaseCardProps = {
   title: string;
   tags?: string[];
   image?: string;
+  imageCredit?: string | null;
   link: string;
   subInfos: string[];
   className?: string;
@@ -18,11 +20,11 @@ const BaseCard: React.FC<BaseCardProps> = ({
   title,
   tags,
   image,
+  imageCredit,
   link,
   subInfos,
   className,
   isBlank = false,
-  ...props
 }) => {
   if (!title || !link) {
     return null;
@@ -38,7 +40,6 @@ const BaseCard: React.FC<BaseCardProps> = ({
       rel={isBlank ? 'noreferrer' : undefined}
       href={link}
       aria-label={title}
-      {...props}
     >
       <div className="relative flex flex-col z-1 bg-white h-full">
         <div className="flex flex-col justify-between flex-1 min-h-64 px-6 py-7 gap-y-2">
@@ -64,7 +65,7 @@ const BaseCard: React.FC<BaseCardProps> = ({
         </div>}
         <div className="w-full h-[216px] relative">
           <div className="absolute top-0 left-0 w-full h-full bg-black/10" />
-          {image && <Image loading="lazy" src={image} alt="" width={400} height={200} className="w-full h-[216px] object-contain" />}
+          {image && <ImageWithCredit loading="lazy" src={image} alt="" credit={imageCredit} width={400} height={200} className="w-full h-[216px] object-contain" />}
         </div>
       </div>
     </Link>

frontend/src/components/molecules/CtaWithImage/CtaWithImage.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import Image from 'next/image';
+import ImageWithCredit from '@/components/molecules/ImageWithCredit';
 import { Button, Title, TitleProps, TiltedTitle, TiltedTitleProps } from '@/components';
 
 export type CtaWithImageProps = {
@@ -10,6 +10,7 @@ export type CtaWithImageProps = {
     className?: string;
   };
   image?: string;
+  imageCredit?: string | null;
   imageClassName?: string;
   imagePosition?: "left" | "right";
   cta: {
@@ -26,12 +27,12 @@ const CtaWithImage: React.FC<CtaWithImageProps> = ({
   title,
   content,
   image = "/images/default-image.svg",
+  imageCredit,
   imageClassName,
   imagePosition = "right",
   cta,
   className,
   contentClassName,
-  ...props
 }) => {
   if (!cta) {
     return null;
@@ -44,7 +45,6 @@ const CtaWithImage: React.FC<CtaWithImageProps> = ({
         'relative flex flex-col justify-center items-start min-h-96 md:min-h-[770px]',
         className,
       )}
-      {...props}
     >
       <div className={contentClassName}>
         <TiltedTitle level="p" variant={title.variant ?? 'medium'} rotation={title.rotation ?? -4} className={clsx("drop-shadow-3 drop-shadow-black before:-z-1 z-2", title.className)}>
@@ -59,7 +59,7 @@ const CtaWithImage: React.FC<CtaWithImageProps> = ({
           {cta.text}
         </Button>
       </div>
-      <Image src={image} alt="" width={770} height={770} className={clsx("absolute -z-1 top-0 bottom-0 my-auto w-96 h-96 sm:w-[770px] sm:h-[770px] max-w-none", imageClassName, imagePosition === "left" ? "right-0" : "left-24")} />
+      <ImageWithCredit src={image} alt="" credit={imageCredit} width={770} height={770} className={clsx("absolute -z-1 top-0 bottom-0 my-auto w-96 h-96 sm:w-[770px] sm:h-[770px] max-w-none", imageClassName, imagePosition === "left" ? "right-0" : "left-24")} />
     </div>
   );
 };