From 789a900bbcc8470447f5f6460c899c824c5bde7c Mon Sep 17 00:00:00 2001 From: Marine Heckler Date: Thu, 23 May 2024 17:44:08 +0200 Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20des=20images=20du=20site?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[code]/[name]/CollectiviteHeader.tsx | 4 +- .../app/outil-numerique/HeaderPlateforme.tsx | 19 ++--- packages/site/app/programme/Objectifs.tsx | 9 ++- packages/site/components/cards/BlogCard.tsx | 2 +- .../site/components/cards/TestimonialCard.tsx | 2 +- .../components/galleries/ThumbnailsList.tsx | 3 +- .../components/strapiImage/StrapiImage.tsx | 74 +++++++++++++----- packages/site/public/blurImage.png | Bin 70 -> 0 bytes packages/site/public/placeholder.png | Bin 1809 -> 0 bytes packages/site/public/placeholder.svg | 1 + 10 files changed, 74 insertions(+), 40 deletions(-) delete mode 100644 packages/site/public/blurImage.png delete mode 100644 packages/site/public/placeholder.png create mode 100644 packages/site/public/placeholder.svg diff --git a/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx b/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx index 2c14d50d486..8bf472ca41f 100644 --- a/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx +++ b/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx @@ -62,7 +62,7 @@ const CollectiviteHeader = ({ )} diff --git a/packages/site/app/outil-numerique/HeaderPlateforme.tsx b/packages/site/app/outil-numerique/HeaderPlateforme.tsx index ca8a45c165a..78cd3373668 100644 --- a/packages/site/app/outil-numerique/HeaderPlateforme.tsx +++ b/packages/site/app/outil-numerique/HeaderPlateforme.tsx @@ -61,17 +61,14 @@ const HeaderPlateforme = ({ )} -
- -
+ + ); }; diff --git a/packages/site/app/programme/Objectifs.tsx b/packages/site/app/programme/Objectifs.tsx index 9dde9464e68..4836a56f22e 100644 --- a/packages/site/app/programme/Objectifs.tsx +++ b/packages/site/app/programme/Objectifs.tsx @@ -27,9 +27,12 @@ const Objectifs = ({titre, description, contenu}: ObjectifsProps) => { textClassName="text-center small-text" image={ c.image ? ( -
- -
+ ) : undefined } /> diff --git a/packages/site/components/cards/BlogCard.tsx b/packages/site/components/cards/BlogCard.tsx index f35bd1be3f2..532feab4157 100644 --- a/packages/site/components/cards/BlogCard.tsx +++ b/packages/site/components/cards/BlogCard.tsx @@ -85,7 +85,7 @@ const BlogCard = ({ ) : ( pas d'image disponible { {!!thumbnail.image && ( )}
diff --git a/packages/site/components/strapiImage/StrapiImage.tsx b/packages/site/components/strapiImage/StrapiImage.tsx index 67962afbef9..b70dd790f70 100644 --- a/packages/site/components/strapiImage/StrapiImage.tsx +++ b/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 (
- `${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 && (

{`${attributes.caption}`}

)}
- ) : null; -} + ); +}; diff --git a/packages/site/public/blurImage.png b/packages/site/public/blurImage.png deleted file mode 100644 index a7308fb29cd8bc625e5bfc09e3c5b3e6dd917bc7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 70 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k92}1TpU9xZYBTu`}}@A1LsrbZ^k~h Q(|{5Tp00i_>zopr0PpV+yZ`_I diff --git a/packages/site/public/placeholder.png b/packages/site/public/placeholder.png deleted file mode 100644 index eb988e1f0e5ed5f4a1dca44c0a41efb9dba11665..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1809 zcmeH|=~t2o6vkgC$1Tk@*VITmHDlH==F+&68z!dZ0e2n9Wgs=fC8cCaPJ(G#9Z!~; z6^=F%woqs)G9sCl$}t5yDwv^|5Nau?ylO-9Vg8Cf-1|KDez^CZ-s$p>uOX*3n>pXHE{_s8B83uHY>P2q^duG%^rzzxgGYh-Bo z4a9ES9ZJ^VkSuqHeV6|ctl#e}bjAJR1{<)zWMv6j5^9*67oe%}r0U^<%|by-qIdeu zgSIQoOLeS*TQrmthc0a2%Po5|W)L*VxSZ;@q?gL1vzM#xunzseNeX3jtB z-me3tW>0fO6UH3)!Nkd|1pfXHYcc^DO^BmdX+u&E+xd8H;tlO`YGi^{ezVGPb&)rI z#X|COMi)x`++*0pJKf4Oub&eHvb7C;x}+=uirjCC4idLc2_{sk{(4YcpxrO~ac%~1*g*Qmnz&(8G1jZ?BrY$9gUdV@`CPpPfrgC7rE$HautfSDNQ(Mu#g0=^ z*s4NM`3xaiS!=2nj7ubF45d_BDkZTiferK8s@r z>u;Z3<(r`Ir+T|SI=CccPw}uy38K}P5eo|oqkDmE3_7|<97LR*6lSmjZ6y$Hz-Z|* zpVsrynQ-wmfv|p!3x70kRDcX5Qyx?;bv)q?vkx_gBWp`k}q62ac}$vHJ$Ju=Em_F?i5Y;H$~XHr>~sMf&kx<`xB+?SXc(0ztf zUF8w~xkx3G;(VT$tPWH8_8$``#5>x3>AF6lCp{ zdFAZo>Sq$!nKpO6%48hjaKg^uLHs)~!Yh_?PX}5|*y?ot)WCXqyncwN?n+6_TjnD! zkkp7=8~jbYjg)ZJuIr=&#WVj4^l+Z*^90Fp_eF3K=YnNUHW9Eqd?6B=B)j3un3}3YQ1n zZz%bwjGP4_qqVw72g>r4yGdFEqRwNj%-+?A;}yvJhhSlku#VZ|cJEVakGK?oec+S7 zJ2tR!wg--q=Mf3jGQ4AUytlOIS5A{~tgc9D&d`T6x+kpa^Jqb4Q$*h`lQFjrd4_{t zyD7Rb(mnnFBkf#b?sO)GS{^Rk`ZUi|Gg?9SUE^lQ#o?$nk)!DxYSl+I(^$GDYTfLL zb!4r#XP0rH+}vuUeBTD~yzs7eO-;sMZtjM`W|)o;w>p90VUAO2+4!lnG%3o%uX0$^ nui9uENf-KE{zCvPrGOSArx9@ufiK$B9}Iv8h6l93k}v%WeeNY8 diff --git a/packages/site/public/placeholder.svg b/packages/site/public/placeholder.svg new file mode 100644 index 00000000000..3ab28e41ab4 --- /dev/null +++ b/packages/site/public/placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file