🧑‍💻 ✨ ~ "What a legend" — coding and chatting with Grayson Hicks of Gatsby

Fri, 17 Jun 2022 00:00:00 GMT

We had a blast yesterday coding and chatting with Grayson Hicks of Gatsby on our unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands. And it seems we were not the only ones 👇

We worked on Gatsby ImageCDN support for Grayson's gatsby-plugin-remote-images.

Read Skip handling remote images yourself; there is a plugin for that! to learn more about why this plugin is da 💣
Read Your plugin should support both Gatsby Image CDN and downloading images as local file nodes for the why, what and how!
Review the code in this Draft PR

All the best,
Queen Raae

🧱 🖼 ~ Skip handling remote images yourself; there is a plugin for that!

Fri, 10 Jun 2022 00:00:00 GMT

On yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands, we played around with remote images again.

You get a genuinely atomic build by sourcing remote images into your Gatsby Data Layer as File nodes. Pointing to a URL you do not control on the world wide web is not a super robust solution.

The What?

Make use of gatsby-plugin-remote-images by Grayson Hicks, Staff Software Engineer at Gatsby in our web-scraping ScrapingBee demo.

Or, more broadly, utilizing the Gatsby Plugin Ecosystem.

The Why?

So we do not have to go through the motions of creating remote file nodes ourselves!

Or, more broadly, let's not do it all in one plugin. Many plugins, for instance, create remote filed nodes, then realize the need to add an option to disable such functionality. Maybe the images should rather be uploaded to Cloudinary... Offloading the functionality to gatsby-plugin-remote-images such an option is no longer needed.

The How

Install the plugin:

yarn add gatsby-plugin-remote-images

and add it to your Gatsby configuration:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-remote-images`,
      options: {
        nodeType: "CrowdcastWebinar",
        imagePath: "coverSrc",
        name: "cover",
      },
    },
  ],
};

This will create a file node for the remote image found at coverSrc on a CrowdcastWebinar node and make it available on cover.

Take a look at yesterday's Pull Request for the complete picture.

There are some nifty options if the structure of your nodes is not as straightforward as for CrowdcastWebinar. Check out the gatsby-plugin-remote-images docs for those and more.

If you would like to use the file with the Gatsby Image component, make sure you follow the gatsby-plugin-image instructions as well.