From 290fa80b318e8bb5e29dfb0670976621b7faa581 Mon Sep 17 00:00:00 2001
From: DrMint <thomas.barillot@etu.u-bordeaux.fr>
Date: Sat, 19 Feb 2022 05:28:04 +0100
Subject: [PATCH] Added support for multi-size images

---
 next.config.js                             |  2 +-
 src/components/Content/ThumbnailHeader.tsx |  6 +++---
 src/pages/library/items/[slug].tsx         | 11 ++++++-----
 src/queries/helpers.ts                     | 15 ++++++++++++---
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/next.config.js b/next.config.js
index 4fd4063..f6c43d3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,7 @@ module.exports = {
     defaultLocale: "en",
   },
   images: {
-    domains: ["strapi.accords-library.com"],
+    domains: ["img.accords-library.com"],
   },
   async redirects() {
     return [
diff --git a/src/components/Content/ThumbnailHeader.tsx b/src/components/Content/ThumbnailHeader.tsx
index 898d0b6..57128e1 100644
--- a/src/components/Content/ThumbnailHeader.tsx
+++ b/src/components/Content/ThumbnailHeader.tsx
@@ -2,7 +2,7 @@ import {
   GetContentQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
-import { getAssetURL, prettySlug } from "queries/helpers";
+import { getAssetURL, ImageQuality, prettySlug } from "queries/helpers";
 import Image from "next/image";
 import Button from "components/Button";
 
@@ -30,7 +30,7 @@ export default function ThumbnailHeader(
           {content.thumbnail.data ? (
             <Image
               className=" rounded-xl"
-              src={getAssetURL(content.thumbnail.data.attributes.url)}
+              src={getAssetURL(content.thumbnail.data.attributes.url, ImageQuality.Medium)}
               alt={content.thumbnail.data.attributes.alternativeText}
               width={content.thumbnail.data.attributes.width}
               height={content.thumbnail.data.attributes.height}
@@ -39,7 +39,7 @@ export default function ThumbnailHeader(
             <div className="w-full aspect-[4/3] bg-light rounded-xl"></div>
           )}
         </div>
-        <div className="grid place-items-center">
+        <div className="grid place-items-center text-center">
           {content.titles.length > 0 ? (
             <>
               <p className="text-2xl">{content.titles[0].pre_title}</p>
diff --git a/src/pages/library/items/[slug].tsx b/src/pages/library/items/[slug].tsx
index 18e41ed..7366c88 100644
--- a/src/pages/library/items/[slug].tsx
+++ b/src/pages/library/items/[slug].tsx
@@ -23,6 +23,7 @@ import {
   prettyItemSubType,
   prettyPrice,
   prettySlug,
+  ImageQuality,
 } from "queries/helpers";
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/PanelComponents/ReturnButton";
@@ -113,7 +114,10 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
         <div className="drop-shadow-dark-xl w-full h-[50vh] mobile:h-[80vh] mb-16 ">
           {item.thumbnail.data ? (
             <Image
-              src={getAssetURL(item.thumbnail.data.attributes.url)}
+              src={getAssetURL(
+                item.thumbnail.data.attributes.url,
+                ImageQuality.Medium
+              )}
               alt={item.thumbnail.data.attributes.alternativeText}
               width={item.thumbnail.data.attributes.width}
               height={item.thumbnail.data.attributes.height}
@@ -186,10 +190,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
           ""
         )}
 
-        <InsetBox
-          id="details"
-          className="grid place-items-center"
-        >
+        <InsetBox id="details" className="grid place-items-center">
           <div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
             <h2 className="text-2xl text-center">
               {langui.library_item_details}
diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts
index 7bbfe01..a8c7171 100644
--- a/src/queries/helpers.ts
+++ b/src/queries/helpers.ts
@@ -1,11 +1,20 @@
 import {
-  GetLibraryItemQuery,
   GetLibraryItemsPreviewQuery,
   GetWebsiteInterfaceQuery,
 } from "graphql/operations-types";
 
-export function getAssetURL(url: string): string {
-  return process.env.NEXT_PUBLIC_URL_CMS + url;
+export enum ImageQuality {
+  Small = "small",
+  Medium = "medium",
+  Large = "large"
+}
+
+export function getAssetURL(url: string, quality?: ImageQuality): string {
+  if (!quality) quality = ImageQuality.Small;
+  url = url.replace(/^\/uploads/, "/" + quality);
+  url = url.replace(/.jpg$/, ".webp");
+  url = url.replace(/.png$/, ".webp");
+  return process.env.NEXT_PUBLIC_URL_IMG + url;
 }
 
 export function prettyDate(