Posts tagged #images

📝 ✨ ~ Little helper to check on images > probe-image-size

Tue, 28 Mar 2023 00:00:00 GMT

I needed to weed out accounts with broken images for the search demo I've been working on. It doesn't look so good with random broken images when demoing.

The reason for the broken images is that it's been a while since I imported these accounts. So folks have changed their profile image, and some have left the platform. Instead of reimporting the roughly 5000 accounts I follow, I removed the ones with a broken image.

To do so, I used probe-image-size because it throws an error when the image probed is unavailable. Meaning my code would be super tidy without me writing a helper function. I've used it before to probe for an image's size, the actual use case, when doing Gatsby Image CDN stuff, as it needs to know the size of the original image, and sometimes all you have is an URL.

But back to the task at hand:

1️⃣ Get all account records
2️⃣ Probe each account profile image
3️⃣ Delete the account record if the image is unavailable

// 1️⃣ Get account records
let page = await xata.db.accounts
  .select(["id", "username", "meta.profile_image_url"])
  .getPaginated({
    pagination: {
      size: 20,
    },
  });

const deleteBrokenImage = async (record) => {
  try {
    // 2️⃣ Probe each account profile image
    await probe(record.meta.profile_image_url);
    console.log("Do not delete ", record.username);
  } catch (error) {
    // 3️⃣ Delete the account record if the image is unavailable
    await xata.db.accounts.delete(record.id);
    console.log("Deleted ", record.username);
  }
};

await Promise.all(page.records.map(deleteBrokenImage));

I've skipped pagination, so the example code will only go through the first 20 records. For the following 20 records and so forth, you'd need to do await page.nextPage().

For the complete code, look at the demo code on Github.

All the best,
Queen Raae

Queen Raae and family worked on several projects for Xata.

🧱 🖼 ~ 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.

All the best,
Queen Raae

PS: Next week, Grayson joins us to work on GatsbyImageCDN support 🎉

☁️ 📥 ~ Your plugin should support both Gatsby Image CDN and downloading images as local file nodes

Fri, 20 May 2022 00:00:00 GMT

We added back support for downloading the YouTube thumbnails as local file nodes on yesterday's apparently deceiful and spam-packed treasure hunt in the sharky waters around the Gatsby islands

We removed it in exchanging for ImageCDN on a treasure hunt with Ward of Gatsby, but as we are working on a plugin, I later realized it should support both 🤦‍♀️

The What?

Let the user of our plugin (gatsby-source-youtube-oembed) decide if they want to utilize Gatsby ImageCDN or download remote images as local file nodes.

The Why?

We don't know where our users are deploying their sites as plugin authors. As far as I know, only Netlify and Gatsby Cloud support Gatsby ImageCDN at the moment, and it's pretty clear they'll charge extra for it in the future. Also, some Gatsby users deploy to their own servers or other static hosts.

The How

We added a plugin option letting the user configure their choice:

// gatsby-node.js
exports.pluginOptionsSchema = ({ Joi }) => {
  return Joi.object({
    thumbnailMode: Joi.string().valid("none", "cdn", "download").default("cdn"),
  });
};

Then we made sure to check the plugin option in onCreateNode to decide what type of thumbnail node to make:

// gatsby-node.js
const { createRemoteFileNode } = require("gatsby-source-filesystem");

exports.onCreateNode = async (gatsbyUtils, pluginOptions) => {
  const { node, actions, createNodeId, getCache } = gatsbyUtils;
  const { createNode, createNodeField } = gatsbyUtils.actions;

  if (node.internal.type === YOUTUBE_TYPE) {
    if (pluginOptions.thumbnailMode === "cdn") {
      createNode({
        id: createNodeId(`Thumbnail >>> ${node.youTubeId}`),
        parent: node.id,
        youTubeId: node.youTubeId,
        url: node.oEmbed.thumbnail_url,
        mimeType: "image/jpeg",
        filename: node.youTubeId + ".jpg",
        height: node.oEmbed.thumbnail_height,
        width: node.oEmbed.thumbnail_width,
        internal: {
          type: "YouTubeThumbnail",
          contentDigest: node.internal.contentDigest,
        },
      });
    } else if (pluginOptions.thumbnailMode === "download") {
      const imageFile = await createRemoteFileNode({
        url: node.oEmbed.thumbnail_url,
        parentNodeId: node.id,
        getCache,
        createNode,
        createNodeId,
      });

      createNodeField({
        node: node,
        name: "thumbnailFileId",
        value: imageFile.id,
      });
    }
  }
};

and we recheck it to customize the schema according to the chosen mode:

// gatsby-node.js
const {
  addRemoteFilePolyfillInterface,
} = require("gatsby-plugin-utils/polyfill-remote-file");

exports.createSchemaCustomization = (gatsbyUtils, pluginOptions) => {
  const { actions, schema } = gatsbyUtils;

  if (pluginOptions.thumbnailMode === "cdn") {
    const YouTubeType = `
      type YouTube implements Node {
        thumbnail: YouTubeThumbnail @link(from: "youTubeId" by: "youTubeId")
      }
    `;

    const YouTubeThumbnailType = addRemoteFilePolyfillInterface(
      schema.buildObjectType({
        name: `YouTubeThumbnail`,
        fields: {
          youTubeId: "String!",
        },
        interfaces: [`Node`, `RemoteFile`],
      }),
      {
        schema,
        actions,
      }
    );

    actions.createTypes([YouTubeType, YouTubeThumbnailType]);
  } else if (pluginOptions.thumbnailMode === "download") {
    const YouTubeType = `
      type YouTube implements Node {
        thumbnail: File @link(from: "fields.thumbnailFileId" by: "id")
      }
    `;
    actions.createTypes(YouTubeType);
  }
};

We should also update our docs, of course, with examples of how to get hold of the thumbnail image data in both modes, but that is for a later work session.

To see a full diff check out the Pull Request on Github.

All the best,
Queen Raae

🖼 ☁️ ~ Gatsby ImageCDN on Netlify

Tue, 05 Apr 2022 00:00:00 GMT

The POW! web app is hosted on Netlify, and so is the soon to be released version of the marketing site.

However, after upgrading to the latest version of @raae/gatsby-source-youtube-oembed, with support for Gatsby ImageCDN, my sourced YouTube Thumbnails went blank...

Turns out support for Gatsby ImageCDN is not on by default; you need to set the environment variable GATSBY_CLOUD_IMAGE_CDN set to true.

After doing so and triggering a "Clear cache and deploy site," the YouTube Thumbnails came back, and all was good!

All the best,
Queen Raae

PS: Interested in learning how to add Gatsby ImageCDN support to your plugin? Check out How to add support for Gatsby ImageCDN in your source plugin 🖼 ☁️

🖼 ☁️ ~ How to add support for Gatsby ImageCDN in your source plugin

Fri, 25 Mar 2022 00:00:00 GMT

On yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands, the great and powerful Ward Peeters helped us add Gatsby ImageCDN support to the YouTube oEmbed plugin.

It was his third time on the show; if you missed the other two, have fun catching up:

Why add Gatsby ImageCDN support?

Ward said it best:

Faster builds (both local and in the cloud)
Better performance in the browser compared to a CDN on a different domain

Adding support for Gatsby ImageCDN still lets you deploy to other services like Netlify. Build time there will be faster, in the same way, it's faster locally, by only downloading the images in use by the site. The "old way" createRemoteFileNode would eagerly download all images.

How to add Gatsby ImageCDN support?

We'll need to replace the use of createRemoteFileNode with creating our own RemoteFile nodes.

Many CMSs already have their own asset node type they can extend with RemoteFile, but for our plugin, we first need to create a new node type that extends RemoteFile:

// gatsby-node.js
const {
  addRemoteFilePolyfillInterface,
} = require("gatsby-plugin-utils/polyfill-remote-file");

exports.createSchemaCustomization = ({ actions, schema }) => {
  actions.createTypes([
    addRemoteFilePolyfillInterface(
      schema.buildObjectType({
        name: `YouTubeThumbnail`,
        fields: {
          youTubeId: "String!",
        },
        interfaces: [`Node`, `RemoteFile`],
      }),
      {
        schema,
        actions,
      }
    ),
  ]);
};

addRemoteFilePolyfillInterface makes sure the plugin works even if the Gatsby site is on a lower version than 4. To make sure it works on older versions even in develop, you want to add polyfillImageServiceDevRoutes:

// gatsby-node.js
const {
  polyfillImageServiceDevRoutes,
} = require("gatsby-plugin-utils/polyfill-remote-file");

exports.onCreateDevServer = ({ app }) => {
  polyfillImageServiceDevRoutes(app);
};

Then we are ready to replace our usage of createRemoteFileNode in onCreateNode 🎉

exports.onCreateNode = async (gatsbyUtils) => {
  const { node, actions, reporter, createNodeId } = gatsbyUtils;
  const { createNodeField, createNode } = actions;

  if (node.internal.type === `YouTube`) {
    const youTubeThumbnailNodeId = createNodeId(
      `you-tube-thumbnail-${node.youTubeId}`
    );

    createNode({
      id: youTubeThumbnailNodeId,
      parent: node.id,
      youTubeId: node.youTubeId,
      url: node.oEmbed.thumbnail_url,
      mimeType: "image/jpeg",
      filename: node.youTubeId + ".jpg",
      height: node.oEmbed.thumbnail_height,
      width: node.oEmbed.thumbnail_width,
      internal: {
        type: `YouTubeThumbnail`,
        contentDigest: node.internal.contentDigest,
      },
    });

    createNodeField({
      node,
      name: `thumbnailFileId`,
      value: youTubeThumbnailNodeId,
    });

    reporter.info(
      `Created YouTubeThumbnail Node for ${node.youTubeId} thumbnail`
    );
  }
};

The last step for us is to update the YouTube Node's schema customization to use the new node type YouTubeThumbnail instead of File:

// gatsby-node.js
actions.createTypes([
  `
    type YouTube implements Node {
      thumbnail: YouTubeThumbnail @link(from: "youTubeId" by: "youTubeId")
    }
  `,
]);

Check out the Pull Request on GitHub for the complete diff!

All the best,
Queen Raae

🖼 📥 ~ Source remote images the right way with Gatsby v4

Thu, 17 Feb 2022 00:00:00 GMT

Gatsby v4 has been out for a while, and with v4 came a much stricter approach to creating and modifying nodes.

However there seems to be quite a bit of outdated documentation, as I experienced when looking into createResolvers.

An examples shows creating remote file nodes as part of a custom resolver. It worked for me locally but failed on Gatsby Cloud, and I found out it is no longer supported.

There are also examples using the ___NODE Convention for linking nodes that will be deprecated in v5.

In Gatsby Version 4:

Combined, we get the following recommended way of sourcing remote images:

exports.onCreateNode = async (gatsbyUtils) => {
  const { node, actions, reporter, createNodeId, getCache } = gatsbyUtils;
  const { createNodeField, createNode } = actions;

  if (node.internal.type === `YouTube`) {
    const imageFile = await createRemoteFileNode({
      // The url of the remote file
      url: node.oEmbed.thumbnail_url,
      parentNodeId: node.id,
      getCache,
      createNode,
      createNodeId,
    });

    createNodeField({
      node,
      name: `thumbnailFileId`,
      value: imageFile.id,
    });

    reporter.info(`Created YouTube File Node for ${node.youTubeId} thumbnail`);
  }
};

exports.createSchemaCustomization = ({ actions }) => {
  actions.createTypes(`
    type YouTube implements Node {
      thumbnail: File @link(from: "fields.thumbnailFileId")
    }
  `);
};

Example lifted from @raae/gatsby-source-youtube-oembed.

All the best,
Queen Raae