From a5366a19ee655eefff4be000a67d16fbcc9445cf Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Wed, 11 Dec 2024 14:10:59 +0100
Subject: [PATCH] feature: use cdn

---
 src/app/gruppe/[slug]/page.tsx                |  9 +++-----
 .../CollapsibleImageWithText.tsx              |  1 +
 .../ImageWithText/ImageWithText.tsx           | 23 +++++++++++++++----
 src/pageComponents/Event/styles.module.scss   |  3 ++-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/gruppe/[slug]/page.tsx b/src/app/gruppe/[slug]/page.tsx
index 07ee356..e0ff915 100644
--- a/src/app/gruppe/[slug]/page.tsx
+++ b/src/app/gruppe/[slug]/page.tsx
@@ -14,6 +14,7 @@ import { Col } from '@/components/Flex/Col'
 import { Row } from '@/components/Flex/Row'
 import { RawHTML } from '@/components/RawHTML/RawHTML'
 import { Blocks } from '@/compositions/Blocks/Blocks'
+import { getPhoto } from '@/utils/dto/gallery'
 
 export default async function GroupPage({ params }: { params: Promise<{slug: string}>})  {
 
@@ -25,18 +26,14 @@ export default async function GroupPage({ params }: { params: Promise<{slug: str
   }
 
   const {id, shortDescription, photo,name, text_html, content } = groups.docs[0]
-  const media = {
-    src: typeof photo === "object" && photo ? photo.url || "" : "",
-    width: typeof photo === "object" && photo ? photo.width || 0 : 0,
-    height: typeof photo === "object" && photo ? photo.height || 0 : 0
-  }
+  const media = getPhoto("tablet", photo)
 
   const events = await fetchEvents(undefined, id)
 
   return (
     <>
 
-      {typeof photo === "object" &&
+      { media &&
         <ImageWithText
           title={name}
           backgroundColor={"soft"}
diff --git a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx
index 10f037c..7bc4d0b 100644
--- a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx
+++ b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx
@@ -72,6 +72,7 @@ export const CollapsibleImageWithText = ({backgroundColor, title, image, text, s
         text={text}
         schema={schema}
         backgroundColor={backgroundColor}
+        unoptimized={false}
         link={<MoreInformation isCollapsed={isCollapsed} onClick={() => setIsCollapsed(!isCollapsed)} />}
       />
 
diff --git a/src/compositions/ImageWithText/ImageWithText.tsx b/src/compositions/ImageWithText/ImageWithText.tsx
index c8c06b6..00ad564 100644
--- a/src/compositions/ImageWithText/ImageWithText.tsx
+++ b/src/compositions/ImageWithText/ImageWithText.tsx
@@ -13,21 +13,36 @@ type ImageWithTextProps = {
   image: StaticImageData | string,
   text: string
   link?: React.ReactNode
-  schema?: 'base' | 'contrast'
+  schema?: 'base' | 'contrast',
+  unoptimized?: boolean
 }
 
-export const ImageWithText = ({backgroundColor, title, image, text, link, schema = "base"}: ImageWithTextProps) => {
+export const ImageWithText = ({backgroundColor, title, image, text, link, schema = "base", unoptimized=true}: ImageWithTextProps) => {
   return (
     <Section backgroundColor={backgroundColor}>
       <Container>
         <Row alignItems={"center"}>
           <div className={classNames(styles.col, styles.imageCol)}>
-            <Image className={styles.image} width={800} height={800} src={image} objectFit={"cover"} alt={""} />
+            <Image
+              className={styles.image}
+              width={800}
+              height={800}
+              src={image}
+              objectFit={"cover"}
+              unoptimized={unoptimized}
+              alt={""} />
           </div>
           <div className={styles.col}>
             <Title title={title} size={"lg"} color={schema} />
 
-            <Image className={styles.imageMobile} width={500} height={500} src={image} objectFit={"cover"} alt={""} />
+            <Image
+              className={styles.imageMobile}
+              width={500}
+              height={500}
+              src={image}
+              objectFit={"cover"}
+              unoptimized={unoptimized}
+              alt={""} />
 
             <TextDiv text={text} />
 
diff --git a/src/pageComponents/Event/styles.module.scss b/src/pageComponents/Event/styles.module.scss
index cebd45c..7bdc0fc 100644
--- a/src/pageComponents/Event/styles.module.scss
+++ b/src/pageComponents/Event/styles.module.scss
@@ -33,7 +33,8 @@
   object-fit: cover;
   height: 200px;
   width: 510px;
-  border-radius: $border-radius
+  border-radius: $border-radius;
+  opacity: 0.9;
 }
 
 @media screen and (max-width: 576px) {