Mise à jour des images du site

packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx

@@ -62,7 +62,7 @@ const CollectiviteHeader = ({
               <StrapiImage
                 data={couvertureDefaut}
                 className="object-cover object-center h-full w-full"
-                containerClassName="h-full w-full object-cover object-center hover:opacity-10 transition-opacity duration-500 relative z-10"
+                containerClassName="h-full w-full object-cover object-center hover:opacity-10 transition-opacity duration-500 relative z-10 bg-primary-2"
                 containerStyle={{
                   WebkitTransition:
                     'opacity 500ms cubic-bezier(0.4, 0, 0.2, 1)',
@@ -82,7 +82,7 @@ const CollectiviteHeader = ({
                   WebkitTransition:
                     'opacity 500ms cubic-bezier(0.4, 0, 0.2, 1)',
                 }}
-                className="hover:opacity-10 transition-opacity duration-500"
+                className="hover:opacity-10 transition-opacity duration-500 bg-primary-2"
               />
             )}
           </div>

packages/site/app/outil-numerique/HeaderPlateforme.tsx

@@ -61,17 +61,14 @@ const HeaderPlateforme = ({
           </>
         )}
       </div>
-      <div
-        style={{boxShadow: '0px 4px 50px 0px #0000000D'}}
-        className="md:w-4/5 h-fit mt-8 rounded-t-[30px] overflow-hidden border-t border-l border-r border-primary-4 mx-auto"
-      >
-        <StrapiImage
-          data={couverture}
-          className="w-auto mx-auto"
-          containerClassName="w-full min-w-[350px]"
-          displayCaption={false}
-        />
-      </div>
+
+      <StrapiImage
+        data={couverture}
+        className="max-h-[560px] w-full object-cover object-center"
+        containerClassName="max-h-[560px] min-w-[350px] md:w-4/5 w-fit mx-auto mt-8 rounded-t-[30px] overflow-hidden border-t border-l border-r border-primary-4"
+        containerStyle={{boxShadow: '0px 4px 50px 0px #0000000D'}}
+        displayCaption={false}
+      />
     </Section>
   );
 };

packages/site/app/programme/Objectifs.tsx

@@ -27,9 +27,12 @@ const Objectifs = ({titre, description, contenu}: ObjectifsProps) => {
               textClassName="text-center small-text"
               image={
                 c.image ? (
-                  <div className="bg-[#FEF4F2] rounded-lg h-[116px] flex justify-center items-center">
-                    <StrapiImage data={c.image} displayCaption={false} />
-                  </div>
+                  <StrapiImage
+                    data={c.image}
+                    displayCaption={false}
+                    containerClassName="bg-[#FEF4F2] rounded-lg h-[116px] flex justify-center items-center"
+                    className="max-w-[70%] max-h-[70%]"
+                  />
                 ) : undefined
               }
             />

packages/site/components/cards/BlogCard.tsx

@@ -85,7 +85,7 @@ const BlogCard = ({
           ) : (
             <Image
               className="fr-responsive-image w-full"
-              src="/placeholder.png"
+              src="/placeholder.svg"
               alt="pas d'image disponible"
               width={354}
               height={201}

packages/site/components/cards/TestimonialCard.tsx

@@ -31,7 +31,7 @@ const TestimonialCard = ({
       ) : (
         <Image
           className="w-[185px] h-[185px] object-cover rounded-full block"
-          src="/placeholder.png"
+          src="/placeholder.svg"
           alt="pas d'image disponible"
           width={354}
           height={201}

packages/site/components/galleries/ThumbnailsList.tsx

@@ -20,7 +20,8 @@ const ThumbnailsList = ({thumbnails}: ThumbnailsListProps) => {
           {!!thumbnail.image && (
             <StrapiImage
               data={thumbnail.image}
-              containerClassName="bg-white p-10 rounded-full w-[196px]"
+              containerClassName="bg-white rounded-full w-[196px]"
+              className="w-[196px] h-[196px] min-w-[196px] min-h-[196px] p-10 object-cover rounded-full"
             />
           )}
           <h6 className="text-primary-9 text-center text-base md:text-lg leading-5 mb-0 max-md:max-w-[300px] md:w-[250px]">

packages/site/components/strapiImage/StrapiImage.tsx

@@ -2,14 +2,34 @@
 
 /* eslint-disable @next/next/no-img-element */
 import classNames from 'classnames';
-import {CSSProperties, useState} from 'react';
-import Image from 'next/image';
+import {CSSProperties, useEffect, useState} from 'react';
 import {StrapiItem} from 'src/strapi/StrapiItem';
 
-const baseURL = process.env.NEXT_PUBLIC_STRAPI_URL;
+const imagePlaceholder = '/placeholder.svg';
 
 type Size = 'large' | 'medium' | 'small' | 'thumbnail';
 
+type Format = {[size: string]: {url: string}};
+
+const addBaseURL = (url: string) => {
+  const baseURL = process.env.NEXT_PUBLIC_STRAPI_URL;
+
+  if (url.startsWith('http')) return url;
+  if (url.startsWith('/')) return `${baseURL}${url}`;
+  return `${baseURL}/${url}`;
+};
+
+const getImageSrc = (
+  size: Size | undefined,
+  formats: Format,
+  url: string | undefined,
+) => {
+  if (url) {
+    const tempURL = size && formats?.size ? `${formats[size].url}` : url;
+    return addBaseURL(tempURL);
+  } else return imagePlaceholder;
+};
+
 type StrapiImageProps = {
   data: StrapiItem;
   size?: Size;
@@ -19,40 +39,52 @@ type StrapiImageProps = {
   displayCaption?: boolean;
 };
 
-export function StrapiImage({
+export const StrapiImage = ({
   data,
   size,
   className,
   containerClassName,
   containerStyle,
   displayCaption = false,
-}: StrapiImageProps) {
-  const [error, setError] = useState(false);
-
+}: StrapiImageProps) => {
   const attributes = data.attributes;
 
-  const url =
-    size && attributes.formats?.size
-      ? `${attributes.formats[size].url}`
-      : `${attributes.url}`;
+  const [src, setSrc] = useState(imagePlaceholder);
+
+  const formats = Object.keys(attributes.formats ?? {})
+    .map(srcKey => ({
+      url: addBaseURL(`${attributes.formats[srcKey].url}`),
+      width: attributes.formats[srcKey].width as unknown as number,
+    }))
+    .sort((a, b) => a.width - b.width);
+
+  useEffect(() => {
+    setSrc(
+      getImageSrc(
+        size,
+        attributes.formats as unknown as Format,
+        attributes.url as unknown as string,
+      ),
+    );
+  }, [size, attributes]);
 
-  return !error ? (
+  return (
     <div className={containerClassName} style={containerStyle}>
-      <Image
+      <img
         className={classNames('block', className)}
-        src={url.startsWith('http') ? url : `${baseURL}/${url}`}
+        src={src}
+        srcSet={`${
+          formats.length ? `${formats.map(f => `${f.url} ${f.width}w`)},` : ''
+        } ${src} ${attributes.width}w`}
         alt={`${attributes.alternativeText ?? ''}`}
-        width={attributes.width as unknown as number}
-        height={attributes.height as unknown as number}
-        placeholder="blur"
-        blurDataURL="/blurImage.png"
-        onErrorCapture={() => setError(true)}
+        onError={() => setSrc(imagePlaceholder)}
       />
+
       {displayCaption && !!attributes.caption && (
         <p className="!text-sm text-[#666] mt-2 mb-0 w-full text-center">
           {`${attributes.caption}`}
         </p>
       )}
     </div>
-  ) : null;
-}
+  );
+};