Easy Asset Access with the Cloudinary Media Library Browser Extension

By  on  

Readers of my blog will know that I've been banging the Cloudinary drum for years. Their awesome media capabilities allow users to optimally deliver images, video, and audio in any format and to any device. Performance, customization, flexibility, optimized delivery... Cloudinary makes media better for everyone.

Another aspect of Cloudinary that I like? Their commitment to developing tools to make using their service as convenient as possible. The latest tool is the Media Library browser extension, a simple extension that gives its users access to their media in from within any tab -- no need to go to the Cloudinary website itself!

If you haven't tried Cloudinary, here's the basic premise: you upload your assets to Cloudinary (via manual drag and drop or using their numerous APIs), then reference the URL provides you for the asset wherever you'd like to use it. You can even modify the URL with predefined parameters to deliver the image in a certain format, certain size, etc.

After installing the extension and providing your credentials, you can right-click any input or WYSIWYG editor to get the Media Library context menu item to insert an image or image URL:

After selecting one of the "Insert" items, you'll see the Media Library modal display, allowing you to select the media of your choice, right from within the current page!

No need open Cloudinary in a new tab to find the images you want to work with, making interacting with Cloudinary much easier! While selecting your image, you can also apply transforms and size adjustments. You can also use fully functioning search and upload images on the spot.

When I saw that Cloudinary created their own extension, I was super excited. Sure they have a WordPress plugin to make using assets in my blog easy, but being able to reference my assets from anywhere is such a convenience!

If you haven't tried Cloudinary yet, you're really missing out. Want to learn more about the great features and usages of Cloudinary? Check out my dozens of previous Cloudinary tutorials!

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!