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

Image-Editing Basics and a Tutorial for Automation With AI

You likely find yourself continually editing images for enhancement by eliminating flaws and tweaking the overall presentation, typically with software tools. Examples of basic editing are straightening, cleaning, and cropping images, as well as adjusting the contrast, exposure, and white balance. With advanced software like Cloudinary, you can automate not only editing tasks, such as quality adjustment and encoding, but also delivery.

Read more
Tips for Retaining Audience Through Engaging Videos

Measuring the level of interest your videos generate helps you produce compelling content. The measurement and optimization approach must, however, address the various aspects of each video, including the A/B test hypothesis and iterations. A high engagement rate spells effective videos; a low engagement rate calls for content improvement.

Read more
Forbes Cloud 100: When the Stars Align

In 2017, when Cloudinary first made the Forbes Cloud 100 as a ‘Rising Star,’ it was an incredibly proud moment for the company. In 2018 we graduated from Rising Star status to be acknowledged as part of the incredible Cloud 100, the top 100 SaaS companies in the world. Today marks our third consecutive year on this prestigious list.

Read more
A Cloudinary-Enhanced Student-ID App

I’m an instructional designer on Cloudinary’s Solutions and Training team. As the COVID-19 pandemic emerged in March, like other global organizations, we pivoted to set up virtual courses. As much as we looked forward to resuming in-person classes in the future, we switched gear to focus on the virtual way of learning.

Read more
Image Formats: Getting it Right

Image formats, which are standards for digital images, can be uncompressed, compressed, raster based, or vector based. You determine the DNA of your images with the formats you adopt, each of which offering different capabilities. For example, rasters generate images with pixels; vectors, with vectors or proportional formulas. PNGs can display logos without background; JPEGs always come with backgrounds. This article explains the main properties of the various image formats, including their basic concepts and pros and cons.

Read more