feat: show image blocks on generic pages

Author: jtfairbank

gatsby-node.ts

@@ -6,13 +6,13 @@ import {
   createFundraiserSchemaCustomization,
   createFundraisersFromMarkdown,
 } from './gatsby/fundraisers/transformers'
+import { createBlockPhotoResolvers } from './gatsby/generic-pages/resolvers'
 import { sourceNeedsAssessments } from './gatsby/needs-assessment/sourceNeedsAssessmentData'
 import {
   createPhotoResolvers,
   createPhotoSchemaCustomization,
 } from './gatsby/photos/photos'
 import transformers from './gatsby/transform-nodes'
-
 /*
 Customize the GraqphQL Schema
 ================================================================================
@@ -59,6 +59,7 @@ export const createResolvers: GatsbyNode['createResolvers'] = (args) => {
   resolvers.resolveSubregionFields(args)
   resolvers.resolveTeamMemberFields(args)
   createPhotoResolvers(args)
+  createBlockPhotoResolvers(args)
 }
 
 /*

gatsby/generic-pages/content-blocks.ts

@@ -22,12 +22,14 @@ export const schema = `
   }
 
   type DABlockImage implements Node {
-    asset: String!
+    relativePath: String!
+    alt: String!
+    image: ImageSharp!
+
     caption: String
     attribution: String!
     dateUploaded: Date
     date: Date
-    altText: String!
     tags: [String!]!
 
     alignmentPhoto: String
@@ -152,21 +154,22 @@ export const deriveImageBlockNode: DeriveBlockFn = (
   parentId,
   { createNodeId, createContentDigest },
 ) => {
-  const altText = getStringProperty(block, 'altText')
+  const alt = getStringProperty(block, 'altText')
   return {
-    asset: getStringProperty(block, 'asset'),
+    relativePath: getStringProperty(block, 'asset'),
+    alt: alt,
+
     caption: getStringProperty(block, 'caption'),
     attribution: getStringProperty(block, 'attribution'),
     dateUploaded: getDateProperty(block, 'dateUploaded'),
     date: block?.date ? getDateProperty(block, 'date') : undefined,
-    altText: altText,
     tags: getArrayProperty(block, 'tags'),
 
     alignmentPhoto: getStringProperty(block, 'alignmentPhoto'),
     alignmentCaption: getStringProperty(block, 'alignmentCaption'),
 
     // Gatsby Fields
-    id: createNodeId(`DABlockImage - ${altText}`),
+    id: createNodeId(`DABlockImage - ${alt}`),
     parent: parentId,
     children: [],
     internal: {

gatsby/generic-pages/resolvers.ts

@@ -0,0 +1,11 @@
+import { CreateResolversArgs } from 'gatsby'
+import { imageSharpResolver } from '../create-resolvers'
+
+export const createBlockPhotoResolvers = (args: CreateResolversArgs) => {
+  const { createResolvers, getNode } = args
+  createResolvers({
+    DABlockImage: {
+      image: imageSharpResolver(getNode, 'relativePath'),
+    },
+  })
+}

src/components/section/blocks/BlockImage.tsx

@@ -1,3 +1,4 @@
+import { GatsbyImage } from 'gatsby-plugin-image'
 import { FC } from 'react'
 import { BlockImage as BlockImageType } from '../../../types/generic-page.d'
 
@@ -7,5 +8,13 @@ type BlockImageProps = {
 }
 
 export const BlockImage: FC<BlockImageProps> = ({ block, className }) => {
-  return <div className={`${className}`}>image</div>
+  return (
+    <div className={`${className}`}>
+      <GatsbyImage
+        className="w-full"
+        alt={block.alt}
+        image={block.image.gatsbyImageData}
+      />
+    </div>
+  )
 }

src/pages/{DAPageGeneric.slug}.tsx

@@ -81,12 +81,19 @@ export const query = graphql`
                 type
               }
 
-              asset
+              image {
+                gatsbyImageData(
+                  width: 640
+                  aspectRatio: 1.2
+                  transformOptions: { fit: COVER }
+                )
+              }
+              alt
+
               caption
               attribution
               dateUploaded
               date
-              altText
               tags
 
               alignmentPhoto

src/types/generic-page.d.ts

@@ -1,4 +1,5 @@
 import { Node, NodeInput } from 'gatsby'
+import { GatsbyImage } from 'gatsby-plugin-image'
 import { LinksList, UpdatesList } from './list.d'
 
 /*
@@ -190,7 +191,15 @@ export interface BlockImage {
   /**
    * relative path to media file
    */
-  asset: string
+  relativePath: string
+  /**
+   * Alternative text
+   */
+  alt: string
+  /**
+   * Image process by sharp
+   */
+  image: GatsbyImage
 
   caption?: string
 
@@ -201,7 +210,6 @@ export interface BlockImage {
 
   dateUploaded?: Date
   date?: Date
-  altText: string
   tags: string[]
 
   alignmentPhoto?: 'Left' | 'Center' | 'Right'

src/types/generic-page.test-helpers.ts

@@ -478,11 +478,12 @@ export const getBlockImageData = (props?: Record<string, any>) => {
     ...props,
 
     asset: '',
+    alt: 'A Fake Image',
+
     caption: 'An Image Block',
     attribution: 'Distribute Aid',
     dateUploaded: new Date(2020, 9, 8),
     date: new Date(2020, 9, 8),
-    altText: 'A Fake Image',
     tags: ['a tag'],
 
     alignmentPhoto: 'Left',
@@ -498,12 +499,14 @@ export const getBlockImageNodeInput = (props?: Record<string, any>) => {
     parent: 'parent-id',
     children: [],
 
-    asset: '',
+    relativePath: '',
+    alt: 'A Fake Image',
+    image: undefined,
+
     caption: 'An Image Block',
     attribution: 'Distribute Aid',
     dateUploaded: new Date(2020, 9, 8),
     date: new Date(2020, 9, 8),
-    altText: 'A Fake Image',
     tags: ['a tag'],
 
     alignmentPhoto: 'Left',
@@ -526,12 +529,15 @@ export const getBlockImageNode = (props?: Record<string, any>) => {
     parent: 'parent-id',
     children: [],
 
+    relativePath: '',
+    alt: 'A Fake Image',
+    image: undefined,
+
     asset: '',
     caption: 'An Image Block',
     attribution: 'Distribute Aid',
     dateUploaded: new Date(2020, 9, 8),
     date: new Date(2020, 9, 8),
-    altText: 'A Fake Image',
     tags: ['a tag'],
 
     alignmentPhoto: 'Left',