Using getAsset within an array of objects (getting preview-templates to work w/Gatsby images)

Netlify CMS
,
1

I have a collection that has slideshowImages. This is an object that contains the image and the description string that I use for its alt tag.

(If it helps, here is the markdown for this file collection.)

This set-up works wonderfully for the actual page that pulls it in through GraphQL.

However, I messed something up in my preview template and I get the pure strings from the markdown instead of the actual Gatsby Image object. This causes a bug in my preview display that says it can’t find “fluid”.

I can see that the boilerplate seems to call getAsset here to avoid this problem. But I’m not sure how to use this Immutable.js feature within the realm of this returned object.

Mapping over that attribute like so…

      <PageTemplate
        slideshowImages={data.slideshowImages.map(img => (
          {
            ...img,
            src: {...getAsset(img.src)}
          })
        )}
        sections={data.sections}
        contactCopy={data.contactCopy}
        sponsorImages={data.sponsorImages}
      />

also did NOT do the trick. I’m not sure how to handle getAsset within an array of objects.

Could anyone help me understand why these Immutable functions are only necessary within the templates and how to overcome the issue I’m having?

2

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

3

The issue is that the Netlify CMS doesn’t have the same context that GatsbyImage requires (i.e. childImageSharp etc.). getAsset(image) will return an object with a url field.

To cover both cases, I am using a custom Image component as a workaround:

import { GatsbyImage, getImage } from "gatsby-plugin-image"

function Image({ image, alt, ...rest }) {
  if (image.url) {
    // this is an image coming from Netlify CMS
    return <img src={image.url} {...rest} alt={alt} />
  } else {
    // this should be an image processed by gatsby-plugin-image
    const imageRef = getImage(image)
    return <GatsbyImage image={imageRef} alt={alt} {...rest} />
  }
}

The preview template could look like this:

const IndexPagePreview = ({ entry, getAsset }) => {
  const data = entry.getIn(['data']).toJS()

  if (data) {
    return (
      <IndexPageTemplate
        heading={data.heading}
        image={getAsset(data.image)}
      />
    )
  } else {
    return <div>Loading...</div>
  }
}

You can use Image in the IndexPageTemplate just like this:

<Image
  className="h-56"
  image={image}
  alt=""
/>
2 Likes
4

hey @theredwillow - does @jimmybutton 's solution work for your use case!