Skip to content
✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now
Get help on Slack

Adding Image Caption and Attribution to API.js

11 replies
Last updated: Nov 9, 2021
Hi, after adding image caption and attribution to the studio/schemas/post.js:
{
    name: 'mainImage',
    title: 'Main image',
    description: 'Image for displaying on the POST PAGE',
    type: 'image',
    options: {
        hotspot: true
    },
    fields: [
        {
            name: 'caption',
            type: 'string',
            title: 'Caption',
            options: {
                isHighlighted: true            }
        },
        {
            name: 'attribution',
            type: 'string',
            title: 'Attribution',
        }
    ]
},
What do i need to do next to display this on the front end?
Nov 8, 2021, 3:46 AM
Hey
user X
what do you mean by front page? Do you mean in the studio or on your actual front end website?
Nov 8, 2021, 8:56 AM
Hi
user S
, I meant the front end.
Nov 8, 2021, 4:36 PM
You'll need to query for that field, then add it to your component. It's very similar to that issue we worked through before.
Nov 8, 2021, 6:09 PM
So i need to put ‘caption’ and ‘attribution’ in the template/lib/api.js?
Nov 8, 2021, 6:14 PM
And make sure that you're passing that data to a component on your frontend.
Nov 8, 2021, 6:21 PM
i added ‘caption’ to the template/lib/api.js like this:

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  caption,
  attribution,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  'author': author->{name, 'picture': image.asset->url},
`;
and in the components/cover-image.js i added:


import cn from 'classnames';
import Link from 'next/link';
import { imageBuilder } from '../../lib/sanity';
import styles from './cover-image.module.scss';

export default function CoverImage({ title, caption, url, imageObject, slug }) {
  const image = (
    <img
      width={1020}
      height={654}
      alt={`Cover Image for ${title}`}
      className={cn('drop-shadow-sm', {
        'hover:drop-shadow-sm transition-shadow duration-200': slug,
      })}
      src={imageBuilder(imageObject).width(980).height(654).url()}
    />
  );

  return (
    <figure className='article-teaser default grid-col-12 skin-default'>
      {slug ? (
        <Link as={`/posts/${slug}`} href='/posts/[slug]'>
          <a aria-label={title}>{image}</a>
        </Link>
      ) : (
        image
      )}
      <figcaption className={styles.image_figcaption}>
        <div className={styles.caption_container}>
          <a>{caption}</a>
        </div>
      </figcaption>
    </figure>
  );
}
is it something i'm missing? Can't see the caption.
Nov 8, 2021, 10:57 PM
i added ‘caption’ to the template/lib/api.js like this:
Nov 8, 2021, 10:57 PM
Caption is under 
mainImage
. So you likely need to add:
mainImage {
  caption, 
  attritbution
}
Nov 8, 2021, 11:43 PM
Then you would need to access 
mainImage.caption
and 
mainImage.attribution
in your components.
Nov 8, 2021, 11:44 PM
Like this?

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  mainImage {
  caption, 
  attribution
}
  'author': author->{name, 'picture': image.asset->url},
`;

Nov 9, 2021, 1:05 AM
Like this?

const postFields = `
  _id,
  name,
  title,
  excerpt,
  displayTitle,
  displayExcerpt,
  'date': publishedAt,
  'slug': slug.current,
  'coverImage': mainImage, 
  mainImage {
  caption, 
  attribution
}
  'author': author->{name, 'picture': image.asset->url},
`;

Nov 9, 2021, 1:05 AM

Sanity– build remarkable experiences at scale

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

Get started for freeExplore the demo

Was this answer helpful?