Added support for multi-size images

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 [

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>

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}

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(