Cloudinary Blog

Introducing Cloudinary’s Gatsby Plugins

Announcing two new Gatsby plugins from Cloudinary

Wouldn’t it be cool to have the powers of Gatsby rendering performant pages and serving optimized and transformed media files from Cloudinary on the same site? That’s now a reality: I’m excited to introduce two Gatsby plugins on Cloudinary: Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary.

Here’s the background. Given that the rise of JAMstack has empowered engineers to efficiently build fast, scalable, secure, and easily-deployed apps, Gatsby further enables the development of websites with the React and JAMstack architecture. To do that, Gatsby simply takes data from multiple data sources and builds interactive webpages, which you can, in turn, deploy to content delivery networks (CDNs) as static HTML, CSS, and JavaScript files.

Because concurrent media delivery is parament for delivering performant web pages, you can accomplish that with the Gatsby plugins by storing media assets in a CDN and optimally serving them with on-the-fly transformations. The plugins bring you the best of both worlds: optimized media delivery along with high-performing web and mobile apps.

Webinar
How to Optimize for Page Load Speed

Gatsby-Source-Cloudinary

Gatsby-Source-Cloudinary is a source plugin that fetches stored images at build time from Cloudinary to a Gatsby-powered site. The plugin creates in GraphQL file nodes that you can query on your app. That means your images need not live locally on your project anymore and are served optimally from Cloudinary.

Gatsby-Transformer-Cloudinary

The Gatsby-Transformer-Cloudinary plugin uploads your locally-stored images to Cloudinary, returns their data, and transforms those images into file nodes in Gatsby, rendering their formats compatible and usable with gatsby-image. You can then apply Cloudinary transformations within GraphQL queries, which return the transformed images on build.

Steps for Getting Started

To start using Cloudinary’s two Gatsby plugins, follow these steps:

  1. Create a free account on Cloudinary.
  2. Create a Gatsby project with one of the Gatsby starters.
  3. Configure either of the Gatsby plugins in gatsby-config.js.
  4. Refer to the documentation for the source plugin and the transformer plugin for the procedures on how to query Cloudinary images and to upload and transform uploaded images, respectively.

The Next Horizon

Cloudinary’s Gatsby plugins were built and maintained by the community. Watch this Learn With Jason video for details on how to build the transformer plugin.

We’ll continue to work on improving the development experience for building apps with the Gatsby plugins through bug fixes and the creation of new features that ship on Gatsby or Cloudinary. If you spot a bug, do send us a pull request or open an issue. In particular, watch this space for a series of blog posts on use cases that will demonstrate how to leverage the two Gatsby plugins for your app.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter

Recent Blog Posts

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more
How to Build an Enhanced Gravatar Service, Part 1

The advent of web development since 25 years ago has given birth to an abundance of online services that help developers build apps efficiently and smoothly. Gravatar is a shining example of such a service. Built by WordPress, Gravatar generates globally recognized avatars. Fun fact: 80 percent of Gravatar users first came across that service when reading a WordPress blog.

Read more