add reusable ImageFigure component

web/src/app/aktuelt/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
-import Image from "@/components/general/Image";
+import { ImageFigure } from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
 import { formatDate, formatExtendedDateTime } from "@/lib/date";
@@ -56,18 +56,14 @@ export default async function Page({ params }: { params: { slug: string } }) {
         </p>
         <h1 className="news-title">{news.title}</h1>
         {featuredImage && (
-          <figure key={featuredImage.id}>
+          <ImageFigure
-            <Image
             src={featuredImage.url}
             alt={featuredImage.alt ?? ""}
             width={featuredImage.width}
             height={featuredImage.height}
+            attribution={featuredImage.attribution}
             sizes="100vw"
           />
-            {featuredImage.attribution && (
-              <figcaption>{featuredImage.attribution}</figcaption>
-            )}
-          </figure>
         )}
       </section>
       <section className="pageContent">

web/src/app/foreninger/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import Icon from "@/components/general/Icon";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
 import Link from "next/link";

web/src/app/lokaler/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import { getClient } from "@/app/client";
 import { Blocks } from "@/components/blocks/Blocks";
 import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql } from "@/gql";

web/src/components/associations/AssociationItem.tsx

@@ -1,7 +1,7 @@
 import { AssociationFragment } from "@/gql/graphql";
 import styles from "./associationItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 
 export const AssociationItem = ({
   association,

web/src/components/blocks/FeaturedBlock.tsx

@@ -1,6 +1,6 @@
 import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import styles from "./featuredBlock.module.scss";
 
 // the 'text' field has been aliased to 'featuredBlockText' and i'm

web/src/components/blocks/HorizontalRuleBlock.tsx

@@ -1,5 +1,5 @@
 import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import styles from "./horizontalRuleBlock.module.scss";
 
 export const HorizontalRuleBlock = ({

web/src/components/blocks/ImageSliderBlock.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
+import { ImageFigure } from "@/components/general/Image";
 import styles from "./imageSliderBlock.module.scss";
 
 // import swiper modules & styles
@@ -31,18 +31,16 @@ export const ImageSliderBlock = ({
         {block.images &&
           block.images.map((imageItem: any, index: number) => (
             <SwiperSlide key={index}>
-              <figure key={imageItem.image.id}>
+              <ImageFigure
-                <Image
+                key={imageItem.image.id}
                 src={imageItem.image.url}
                 alt={imageItem.image.alt ?? ""}
                 width={imageItem.image.width}
                 height={imageItem.image.height}
-                  // width={0}
+                attribution={imageItem.image.attribution}
-                  // height={0}
+                caption={imageItem.text}
-                  // sizes="20vw"
+                sizes="100vw"
               />
-                {imageItem.text && <figcaption>{imageItem.text}</figcaption>}
-              </figure>
             </SwiperSlide>
           ))}
       </Swiper>

web/src/components/blocks/ImageWithTextBlock.tsx

@@ -1,26 +1,20 @@
 import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
-import Image from "../general/Image";
+import { ImageFigure } from "@/components/general/Image";
-import styles from "./imageWithTextBlock.module.scss";
 
-export const ImageWithTextBlock = ({
+export function ImageWithTextBlock({
   block,
 }: {
   block: ImageWithTextBlockType;
-}) => {
+}) {
   return (
-    <figure
+    <ImageFigure
-      className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
-    >
-      <Image
       src={block.image.url}
       alt={block.image.alt ?? ""}
       width={block.image.width}
       height={block.image.height}
-        // width={0}
+      attribution={block.image.attribution}
-        // height={0}
+      caption={block.text}
-        // sizes="20vw"
+      imageFormat={block.imageFormat}
     />
-      {block.text && <figcaption>{block.text}</figcaption>}
-    </figure>
   );
-};
+}

web/src/components/events/EventHeader.tsx

@@ -1,6 +1,6 @@
 import { EventFragment } from "@/lib/event";
 import styles from "./eventHeader.module.scss";
-import Image from "@/components/general/Image";
+import { Image } from "@/components/general/Image";
 import Link from "next/link";
 import { OrganizerList } from "./OrganizerList";
 import Icon from "../general/Icon";
@@ -17,6 +17,8 @@ function formatPrice(price: number): string {
 }
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
+  // TODO: where should we show image attribution for the featured image?
+
   const featuredImage: any = event.featuredImage;
 
   return (

web/src/components/events/EventItem.tsx

@@ -2,7 +2,7 @@
 
 import styles from "./eventItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import {
   SingularEvent,
   EventFragment,

web/src/components/general/Image.tsx

@@ -1,7 +1,25 @@
 import NextImage, { ImageProps as NextImageProps } from "next/image";
+import styles from "./image.module.scss";
 
-type ImageProps = NextImageProps;
+type ImageProps = NextImageProps & {
+  attribution?: string | null;
+  caption?: string | null;
+  imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
+};
 
-export default function Image(props: ImageProps) {
+export function ImageFigure(props: ImageProps) {
+  const { attribution, caption, imageFormat, ...nextImageProps } = props;
+  return (
+    <figure
+      className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
+    >
+      <NextImage {...nextImageProps} />
+      {attribution && <div className={styles.attribution}>{attribution}</div>}
+      {caption && <figcaption>{caption}</figcaption>}
+    </figure>
+  );
+}
+
+export function Image(props: NextImageProps) {
   return <NextImage {...props} />;
 }

web/src/components/general/image.module.scss

@@ -1,4 +1,4 @@
-.imageWithTextBlock {
+.image {
   width: 100%;
   margin: 0;
 
@@ -53,3 +53,7 @@
     }
   }
 }
+
+.attribution {
+  border: 1px dotted mediumpurple;
+}

web/src/components/news/NewsItem.tsx

@@ -1,5 +1,5 @@
 import styles from "./newsItem.module.scss";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import { NewsFragment } from "@/lib/news";
 import { formatDate } from "@/lib/date";
 import Link from "next/link";

web/src/components/venues/VenueInfo.tsx

@@ -1,7 +1,7 @@
 import { VenueFragment } from "@/gql/graphql";
 import styles from "./venueInfo.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 import Icon from "../general/Icon";
 
 export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {

web/src/components/venues/VenueItem.tsx

@@ -1,7 +1,7 @@
 import { VenueFragment } from "@/gql/graphql";
 import styles from "./venueItem.module.scss";
 import Link from "next/link";
-import Image from "../general/Image";
+import { Image } from "@/components/general/Image";
 
 export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
   const featuredImage: any = venue.featuredImage;