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

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 free Explore the demo

Adding Image Caption and Attribution to API.js

Sanity– build remarkable experiences at scale

Was this answer helpful?