Media Library

Image management can feel painfully obtuse, often eroding an otherwise straightforward content authoring experience. We built a custom media library component to make the process of finding, selecting, and managing images within a CMS easy and intuitive.

The Challenge

Images are an important part of pretty much everything on the web – whether it’s an app, a digital publication, a CRM, or a marketing site, smiling faces and Dwight Schrute memes are a common element. Not surprisingly, a lot of attention has been paid to optimizing image delivery and there are some high-powered solutions on the market. Less attention is paid to the image management experience on the admin side of an app. In fact, it’s often an after-thought. After the other after-thought.

But when content managers are dealing with images in every single transaction, image management functionality is not just a means to an end, it’s a major part of the user experience for those humans. In our minds, that means it deserves the deluxe treatment. We needed to create something that fit seamlessly into their overall workflow.

System Design

Decoupled digital asset management

When considering “images” in totality, there a number of boxes to check. First, optimization and delivery – since we’re not interested in bloated load times, those two are the top priorities. Cloudinary makes tackling both requirements easy and awesome – a flexible and well-documented upload API suitable for frontend and backend implementations, on-the-fly image manipulation with URL parameters, and rock-solid reliability and speed. It sounds like a paid endorsement but it’s not, I’m just a really big fan. In this setup, Cloudinary serves as a “headless” image repository and CDN, while all of the management logic and the UI are part of the parent application.

System Feature

Media picker input

Needless to say, we wanted to create a fluid experience for admins. Rather than making the media library a partitioned section of the dashboard (though it is that, too), we made a dedicated media picker input that can be used in any component any number of times. It’s essentially a replica of the full library but in an inline-friendly format. Users can choose from existing images, or upload new images. All assets are stored and delivered by Cloudinary, but all management of that image happens natively in the picker, including adding tags and executing search queries. As an added bonus, because we’re using an image’s unique hash as the default asset id (yet another cool feature of Cloudinary), we’re able to catch duplicate uploads and minimize unintentional bloat.

UI Elements

Intuitive design

Because of the decoupled nature of this setup, we had some latitude to really gloss up the UI features. We thought long and hard about what image management actually entails, and built a suite of tools to simplify those actions. We added an expandable selected items panel that stays docked on the bottom left corner, easy-to-access search and filtering inputs, a side panel to house the less common, but still valuable filter options, like “minimum width”, and a side panel that allows you to manage the individual asset right inside the picker.