add reusable ImageFigure component

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}>
-                <Image
-                  src={imageItem.image.url}
-                  alt={imageItem.image.alt ?? ""}
-                  width={imageItem.image.width}
-                  height={imageItem.image.height}
-                  // width={0}
-                  // height={0}
-                  // sizes="20vw"
-                />
-                {imageItem.text && <figcaption>{imageItem.text}</figcaption>}
-              </figure>
+              <ImageFigure
+                key={imageItem.image.id}
+                src={imageItem.image.url}
+                alt={imageItem.image.alt ?? ""}
+                width={imageItem.image.width}
+                height={imageItem.image.height}
+                attribution={imageItem.image.attribution}
+                caption={imageItem.text}
+                sizes="100vw"
+              />
             </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 styles from "./imageWithTextBlock.module.scss";
+import { ImageFigure } from "@/components/general/Image";
 
-export const ImageWithTextBlock = ({
+export function ImageWithTextBlock({
   block,
 }: {
   block: ImageWithTextBlockType;
-}) => {
+}) {
   return (
-    <figure
-      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}
-        // height={0}
-        // sizes="20vw"
-      />
-      {block.text && <figcaption>{block.text}</figcaption>}
-    </figure>
+    <ImageFigure
+      src={block.image.url}
+      alt={block.image.alt ?? ""}
+      width={block.image.width}
+      height={block.image.height}
+      attribution={block.image.attribution}
+      caption={block.text}
+      imageFormat={block.imageFormat}
+    />
   );
-};
+}

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;
 
@@ -52,4 +52,8 @@
       text-align: left;
     }
   }
+}
+
+.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;