Cloudinary Blog

Managing Visual Media With the Cloudinary-Netlify Integration

Media Management With the Cloudinary-Netlify CMS Integration

Static sites and the JAMstack are quickly becoming a standard for developing safe and performant websites with an optimal workflow for developers. Netlify CMS (not to be confused with the company that created it, Netlify) is an open source content management solution that works especially with static site generators such as Gatsby, Hugo, etc... enabling content storage in your Git repository along with your code for easier versioning, multichannel publishing, and direct content updates in Git.

Cloudinary is integrated with Netlify CMS, meaning that you can seamlessly manage and publish media from Cloudinary within Netlify CMS. That is, you can load Cloudinary’s Media Library widget in Netlify CMS and then perform all the tasks you would normally do within the Cloudinary Media Library, for example, upload, search, tag, transform, or insert images.

Setting Up the CMS Integration

Integrating Cloudinary into Netlify CMS takes only a few configurations:

  1. Sign up for a free Cloudinary account if you don’t already have one.
  2. Add Netlify CMS to an existing site or if you don’t already have a site that uses Netlify CMS, you can create a new site from a template. Alternatively, follow the instructions to configure Cloudinary within Netlify CMS.

That’s it!

Afterwards, the Netlify CMS built in Media Library button and all image fields will use the Cloudinary Media Library to insert images. Furthermore, you can transform the image (see the illustration below for an example) from within the Media Library. Cloudinary applies such transformations as chained transformations on top of the global or field-level transformations. For details, see the configuration options.

Note
You can do a lot more with the Media Library widget, for example, upload, tag, move, or delete images. In other words, the Cloudinary-Netlify CMS integration makes available all the capabilities of Cloudinary’s Media Library within Netlify CMS.

media library media library widget

Here are some additional highlights:

  • The Cloudinary-Netlify CMS integration is available for all account tiers.
  • You can add transformations globally or per field. Global transformations apply to all images. Field-level transformations override global ones.
  • You can also define chain transformations for the global or field level. Below is an example of media library configuration in Netlify CMS that has 3 transformations chained together under ‘default_transformations’.
media_library:
  name: cloudinary
  config:
    default_transformations:
              -   - fetch_format: auto
                    quality: auto
                  - width: 300
                    crop: fill
                  - overlay: {font_family: "Verdana", font_size: 25, font_weight: "bold", text_decoration: "underline", letter_spacing: 8, text: "Hello"}
                    effect: grayscale
    cloud_name: *********
    api_key: *********

Note
Currently, only animated GIFs and images work with the Cloudinary-Netlify CMS integration. Videos will work, too, sometime in the future. Stay tuned.

Summing It Up

The Cloudinary-Netlify CMS integration brings together the best of both worlds, giving you flexibility and control over your content and media assets. No more worries about managing all that media. You can now focus on content authoring and publication with rich and optimized media.

Your turn next! In the Comments section below, tell us what you think about this integration and how it works out for you. Also, we’d love to hear about the sites you’ve built with Netlify CMS that manage and deliver images through Cloudinary.

Recent Blog Posts

An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more
Vitaly Friedman's Insights on Media Conferences

Vitaly Friedman is a die-hard devotee of beautiful content. Born in Minsk, Belarus, he studied Computer Science and Mathematics in Germany, unearthing in himself a passion for typography, writing, and design in the interim. After a six-year stint as a freelance designer and developer, he co-founded Smashing Magazine, a leading online publication on web design and development. You can follow SmashingMag on Twitter @SmashingMag.

Read more
Stylight Fashions Image-Heavy Retail Search Engine with Cloudinary

For Stylight, a fashion and design retail search engine, uptime, performance and customer experience are key to the bottom line. With tens of thousands of new images being added to its site each week, and a very small development team, the company needed an efficient way to manage and manipulate images, so they could be viewed quickly and optimally on any device used by consumers in 16 countries. As one of the earliest users of Cloudinary, Stylight sees significant performance and financial benefits related to Cloudinary’s cutting-edge solution for image optimization and delivery on multiple content delivery networks (CDNs).

Read more