Get help on Discord

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