πŸ‘€ See Sanity in action: Watch product demo now β†’

Does anybody know how to show image caption in the BlockContent?

3 replies
Last updated: Nov 17, 2020
Hi!Does anybody know how to show image caption in the BlockContent?

I've added image caption field in the admin panel

{
     type: 'image',
     options: {hotspot: true},
     fields: [
       {
         name: 'caption',
         type: 'string',
         title: 'Caption',
         options: {
           isHighlighted: true
         }
       },
       {
         name: 'attribution',
         type: 'string',
         title: 'Attribution',
       }
    ]
}
And in the network I see

body {
 ...
 3: {
  assets: {...}
  caption: "here is the caption"
  _key: "..."
  _type: "image"
But how to display it on the page?
How to pass it into BlockContent on the from-end?
Nov 17, 2020, 1:19 PM
You need to use a serializer, more info here
Nov 17, 2020, 1:23 PM
Something like that
import React from "react"

const serializers = {
  types: {
    mainImage: ({ node }) => {
       if (!node || !node.asset || !node.asset._ref) {
     return null
  }
     return <img ... />
    }
  }
}

export default serializers
Nov 17, 2020, 1:27 PM
Thomas, thanks a lot! It's what I was looking for))
Nov 17, 2020, 2:50 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in