{"id":21999,"date":"2020-01-16T16:02:39","date_gmt":"2020-01-16T16:02:39","guid":{"rendered":"http:\/\/introducing_cloudinary_s_gatsby_plugins"},"modified":"2022-02-24T23:29:49","modified_gmt":"2022-02-24T23:29:49","slug":"introducing_cloudinary_s_gatsby_plugins","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins","title":{"rendered":"Introducing Cloudinary\u2019s Gatsby Plugins"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Wouldn\u2019t 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\u2019s now a reality: I\u2019m excited to introduce two Gatsby plugins on Cloudinary: <a href=\"https:\/\/www.npmjs.com\/package\/gatsby-source-cloudinary\">Gatsby-Source-Cloudinary<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/gatsby-transformer-cloudinary\">Gatsby-Transformer-Cloudinary<\/a>.<\/p>\n<p>Here\u2019s the background. Given that the rise of <a href=\"https:\/\/cloudinary.com\/blog\/developer_experience_for_a_modern_web_jamstack_delivers\">JAMstack<\/a> has empowered engineers to efficiently build fast, scalable, secure, and easily-deployed apps, <a href=\"https:\/\/www.gatsbyjs.org\/\">Gatsby<\/a> 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.<\/p>\n<p>Because concurrent media delivery is paramount 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.<\/p>\n<h2>Gatsby-Source-Cloudinary<\/h2>\n<p>Gatsby-Source-Cloudinary is a <a href=\"https:\/\/www.gatsbyjs.org\/docs\/what-is-a-plugin\/\">source plugin<\/a> 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.<\/p>\n<h2>Gatsby-Transformer-Cloudinary<\/h2>\n<p>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 <code>gatsby-image<\/code>. You can then apply Cloudinary transformations within GraphQL queries, which return the transformed images on build.<\/p>\n<h2>Steps for Getting Started<\/h2>\n<p>To start using Cloudinary\u2019s two Gatsby plugins, follow these steps:<\/p>\n<ol>\n<li>\n<a href=\"https:\/\/cloudinary.com\/users\/register\/free\/\">Create a free account on Cloudinary<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/www.gatsbyjs.org\/tutorial\/\">Create a Gatsby project<\/a> with one of the Gatsby starters.<\/li>\n<li>Configure either of the Gatsby plugins in <code>gatsby-config.js<\/code>.<\/li>\n<li>Refer to the documentation for the <a href=\"https:\/\/github.com\/Chuloo\/gatsby-source-cloudinary\">source plugin<\/a> and the <a href=\"https:\/\/github.com\/cloudinary-devs\/gatsby-transformer-cloudinary\">transformer plugin<\/a> for the procedures on how to query Cloudinary images and to upload and transform uploaded images, respectively.<\/li>\n<\/ol>\n<h2>The Next Horizon<\/h2>\n<p>Cloudinary\u2019s Gatsby plugins were built and maintained by the community. Watch this <a href=\"https:\/\/www.learnwithjason.dev\/build-a-gatsby-transformer-plugin-for-cloudinary\">Learn With Jason video<\/a> for details on how to build the transformer plugin.<\/p>\n<p>We\u2019ll 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.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22000,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,165,227,303],"class_list":["post-21999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-transformation","tag-performance-optimization","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Announcing two new Gatsby plugins from Cloudinary<\/title>\n<meta name=\"description\" content=\"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Cloudinary\u2019s Gatsby Plugins\" \/>\n<meta property=\"og:description\" content=\"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-16T16:02:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T23:29:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Introducing Cloudinary\u2019s Gatsby Plugins\",\"datePublished\":\"2020-01-16T16:02:39+00:00\",\"dateModified\":\"2022-02-24T23:29:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Transformation\",\"Performance Optimization\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\",\"url\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\",\"name\":\"Announcing two new Gatsby plugins from Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA\",\"datePublished\":\"2020-01-16T16:02:39+00:00\",\"dateModified\":\"2022-02-24T23:29:49+00:00\",\"description\":\"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing Cloudinary\u2019s Gatsby Plugins\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing two new Gatsby plugins from Cloudinary","description":"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins","og_locale":"en_US","og_type":"article","og_title":"Introducing Cloudinary\u2019s Gatsby Plugins","og_description":"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.","og_url":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins","og_site_name":"Cloudinary Blog","article_published_time":"2020-01-16T16:02:39+00:00","article_modified_time":"2022-02-24T23:29:49+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins"},"author":{"name":"","@id":""},"headline":"Introducing Cloudinary\u2019s Gatsby Plugins","datePublished":"2020-01-16T16:02:39+00:00","dateModified":"2022-02-24T23:29:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","keywords":["Asset Management","Image Transformation","Performance Optimization","Video"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins","url":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins","name":"Announcing two new Gatsby plugins from Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","datePublished":"2020-01-16T16:02:39+00:00","dateModified":"2022-02-24T23:29:49+00:00","description":"By taking advantage of Cloudinary\u2019s new Gatsby-Source-Cloudinary and Gatsby-Transformer-Cloudinary plugins, you can store media assets in a CDN and optimally serve them with on-the-fly transformations.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_s_gatsby_plugins#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing Cloudinary\u2019s Gatsby Plugins"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720592\/Web_Assets\/blog\/Gatsby-Plugin_22000131c7\/Gatsby-Plugin_22000131c7.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21999"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21999\/revisions"}],"predecessor-version":[{"id":25713,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21999\/revisions\/25713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22000"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}