Get help on Discord

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?
AI Update

To display image captions from Portable Text (BlockContent) on your front-end, you need to create a custom serializer/component for the image type when rendering your content.

Based on your schema, you already have the caption data available in your query. Now you need to tell your rendering library how to display it. Here's how:

Using @portabletext/react (modern approach)

import { PortableText } from '@portabletext/react'

const components = {
  types: {
    image: ({value}) => {
      return (
        <figure>
          <img 
            src={value.asset.url} 
            alt={value.caption || ''} 
          />
          {value.caption && (
            <figcaption>{value.caption}</figcaption>
          )}
          {value.attribution && (
            <cite>{value.attribution}</cite>
          )}
        </figure>
      )
    }
  }
}

// Then use it:
<PortableText value={yourContent} components={components} />

Using @sanity/block-content-to-react (legacy)

import BlockContent from '@sanity/block-content-to-react'

const serializers = {
  types: {
    image: (props) => {
      return (
        <figure>
          <img 
            src={props.node.asset.url} 
            alt={props.node.caption || ''} 
          />
          {props.node.caption && (
            <figcaption>{props.node.caption}</figcaption>
          )}
        </figure>
      )
    }
  }
}

// Then use it:
<BlockContent blocks={yourContent} serializers={serializers} />

Important: Query the image asset

Make sure your GROQ query includes the image asset URL:

*[_type == "yourType"] {
  body[]{
    ...,
    _type == "image" => {
      ...,
      asset->
    }
  }
}

The key difference between the modern and legacy approach is that @portabletext/react uses value while @sanity/block-content-to-react uses node to access the image data.

For more details, check out the official guide on customizing Portable Text and the @portabletext/react documentation.

You need to use a serializer, more info here
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
Thomas, thanks a lot! It's what I was looking for))

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?