Add image to publications list (#103)

CRRU-UK · Feb 11, 2025 · c159b6e · c159b6e
1 parent 3e4b75c
commit c159b6e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 8 deletions.
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
@@ -190,6 +190,7 @@ export type ContentTypeScientificPublication = {
     category: EntryFieldTypes.Symbol;
     date: EntryFieldTypes.Date;
     attachment: EntryFieldTypes.AssetLink;
+    image: EntryFieldTypes.AssetLink;
   };
 };
 

diff --git a/src/pages/research/publications.module.scss b/src/pages/research/publications.module.scss
@@ -15,6 +15,10 @@
 }
 
 .item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
   margin-bottom: math.div(variables.$global-spacing-large, 2);
   padding: math.div(variables.$global-padding-large, 2);
   border-radius: variables.$global-border-radius;
@@ -26,6 +30,18 @@
   }
 }
 
+.item .image {
+  margin-right: math.div(variables.$global-spacing-large, 2);
+  display: block;
+  width: 100px;
+  height: auto;
+
+  @include variables.breakpoint("small") {
+    width: 80px;
+    margin-right: math.div(variables.$global-spacing-small, 2);
+  }
+}
+
 .item p {
   margin-top: 0;
   font-size: 16px;

diff --git a/src/pages/research/publications.tsx b/src/pages/research/publications.tsx
@@ -4,14 +4,16 @@ import type { AssetFile } from "contentful";
 import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import Link from "next/link";
+import Image from "next/image";
 
-import type { PageData, ContentTypeScientificPublication } from "@/helpers/types";
+import type { PageData, ContentTypeScientificPublication, FlattenedImage } from "@/helpers/types";
 
 import sitemap from "@/data/sitemap.json";
 
 import getPageContent from "@/helpers/getPageContent";
 import { ContentTypes, ScientificPublicationCategories } from "@/helpers/constants";
 import { contentfulDeliveryClient } from "@/helpers/contentful";
+import { flattenImageAssetFields } from "@/helpers/flattenAssetFields";
 
 import CommonPage from "@/layout/CommonPage";
 import { Filters } from "@/components";
@@ -23,14 +25,21 @@ type PublicationDataReduced = {
   title: string;
   description: string;
   attachment: string | null;
+  image: FlattenedImage | null;
 };
 
 interface PageProps {
   pageData: PageData;
   publicationsData: Array<PublicationDataReduced>;
 }
 
-const PublicationEntry = ({ category, title, description, attachment }: PublicationDataReduced) => {
+const PublicationEntry = ({
+  category,
+  title,
+  description,
+  attachment,
+  image,
+}: PublicationDataReduced) => {
   let download = null;
 
   if (attachment) {
@@ -58,12 +67,23 @@ const PublicationEntry = ({ category, title, description, attachment }: Publicat
 
   return (
     <article key={description} className={styles.item}>
-      <span className={styles.header}>
-        <p className={styles.title}>{title}</p>
-        <span className={categoryClasses.join(" ")}>{category}</span>
-      </span>
-      <ReactMarkdown>{description}</ReactMarkdown>
-      {download}
+      {image && (
+        <Image
+          src={image.url}
+          alt={image.alt ?? "Publication cover image."}
+          width={image.width}
+          height={image.height}
+          className={styles.image}
+        />
+      )}
+      <div className={styles.wrapper}>
+        <span className={styles.header}>
+          <p className={styles.title}>{title}</p>
+          <span className={categoryClasses.join(" ")}>{category}</span>
+        </span>
+        <ReactMarkdown>{description}</ReactMarkdown>
+        {download}
+      </div>
     </article>
   );
 };
@@ -151,6 +171,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) =>
     title: item.fields.title,
     description: item.fields.description,
     attachment: (item.fields.attachment?.fields?.file as AssetFile)?.url || null,
+    image: item.fields?.image ? flattenImageAssetFields(item.fields.image) : null,
   }));
 
   return {