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

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more