feature: use cdn

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 = {
+  const media = getPhoto("tablet", photo)
-    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 events = await fetchEvents(undefined, id)
 
   return (
     <>
 
-      {typeof photo === "object" &&
+      { media &&
         <ImageWithText
           title={name}
           backgroundColor={"soft"}

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)} />}
       />
 

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} />
 

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) {