feat(vth): add card images to thema and content pages

frameless · Oct 4, 2023 · ffb6e9e · ffb6e9e
1 parent e8fcb39
commit ffb6e9e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -50,14 +50,14 @@ const Home = async ({ params: { locale } }: { params: any }) => {
         {themas &&
           themas.map((thema: any) => {
             const { title, description, slug, previewImage: imageData } = thema.attributes;
-            const previewImage = imageData?.data?.attributes?.url;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 key={`thema-${slug}`}
                 title={title}
                 description={description}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 link={{ href: `/themas/${slug}` }}
               />
             );

diff --git a/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
@@ -44,11 +44,12 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
       <Grid className={'utrecht-grid__full-width'}>
         {child_themas.data[0] &&
           child_themas.data.map((thema: any) => {
-            const { title, description, slug: childSlug, previewImage } = thema.attributes;
+            const { title, description, slug: childSlug, previewImage: imageData } = thema.attributes;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 title={title}
                 description={description}
                 key={`thema-${childSlug}`}
@@ -59,14 +60,15 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
         {child_contents.data[0] &&
           child_contents.data &&
           child_contents.data.map((content: any) => {
-            const { title, description, slug: contentSlug, previewImage } = content.attributes;
+            const { title, description, slug: contentSlug, previewImage: imageData } = content.attributes;
+            const imageUrl = imageData?.data?.attributes?.url;
             return (
               <Card
                 className={'utrecht-grid__one-third'}
                 title={title}
                 description={description}
                 key={`thema-${contentSlug}`}
-                image={{ url: previewImage && buildImgURL(previewImage), alt: '' }}
+                image={{ url: imageUrl && buildImgURL(imageUrl), alt: '' }}
                 link={{ href: `/themas/${themaSlug}/content/${contentSlug}` }}
               />
             );

diff --git a/apps/vth-frontend/src/components/Card/index.style.css b/apps/vth-frontend/src/components/Card/index.style.css
@@ -3,6 +3,10 @@
   max-width: 312px;
 }
 
+.utrecht-card__image {
+  object-fit: cover;
+}
+
 .utrecht-card__content {
   padding-block-end: 1rem;
   padding-block-start: 0;