Answered

How to use Gatsby Image with images hosted in Agility?

This question is posted on behalf of a user:

How would I use the gatsby-image component (https://www.gatsbyjs.org/packages/gatsby-image/) with images stored in the Agility instance? As far as I know, it requires the images to be on my local machine.

I would like users to be able to pick and choose images from within the Agility Manager while still using the gatsby-image component to optimize them. Is this possible?

1

Comments

3 comments
  • Official comment

    You can use Gatsby Image with Agility CMS media assets, or any other remote image you may have. In order to do this, you'll need to download the images and store them locally in order for them to be queryable in GraphQL and ready for use with the `gatsby-image` component.

    You can do this by adding some code in your gatsby-node.js that looks for attachment fields on content and automatically downloads each image. 

    See this example in our starter site that already has this set up.

    What it does:

    1. Checks every Agility CMS content node being created to see if it is using an attachment field
    2. If it is, it downloads and saves the image via createRemoteFileNode 
    3. If the name of the attachment field found was `picture`, then it creates a new field for the local image called `pictureLocalImg` which is queryable via GraphQL `childImageSharp`. See this example of it being used on posts on our starter site

    This functionality may be baked into the `gatsby-source-agilitycms` plugin in the future, but for now you can simply set this up in your project.

    Comment actions Permalink
  • Would this also pick up the images stored under the Media & Documents section of the Agility Manager or would it just pick up the images that users add to Modules and Shared Content?

    0
    Comment actions Permalink
  • It would only work on images that are used in Image fields on Content/Modules. It won't go and source ALL of your images you have stored in Media & Documents - you probably wouldn't want that. This way, only images that are used are downloaded.

    The only caveat to this is if users are referencing images directly in a Rich Text Area field. If the image link is embedded in HTML, i'm not sure how you could get that to work with `gatsby-image`. All the more reason to use Image fields as much as possible.

    1
    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post