Non-product asset workflows

This section provides an example workflow for managing non-product assets, also known as editorial, content, or brand assets. Use these recommendations as a foundation and adapt the implementation to fit your company’s needs.

Unlike product assets, non-product assets—such as hero images, marketing videos, social media content, and promotional materials—are often curated to shape the overall experience. These assets typically require manual selection, approval, and refinement. As an administrator, you may handle setup and automation, while content editors focus on editing and selecting assets for the website and other delivery channels.

Uploading non-product assets

Handle setup tasks such as creating folders, configuring auto-tagging, managing accessibility settings, and enforcing access restrictions. Meanwhile, content editors manually upload assets via the Media Library within Cloudinary’s Assets (DAM) product. Contributors select and upload images and videos for storytelling, branding, and marketing, adding metadata as needed.

In this section, you'll learn how to set up and upload non-product assets in the Media Library.

Step 1: Create folder structure

You can organize folders based on content type—such as website hero images, social media visuals, promotional videos, and PDFs—to improve searchability, enforce access control, and streamline asset management. A well-structured folder system helps users quickly locate assets and ensures permissions are assigned correctly.

To create a folder:

1. Click the Folders tab at the top of the Media Library to navigate to that page.
2. Click the Create a Folder icon at the top left corner.
3. To create a subfolder, navigate to the parent folder first.

To share a folder:

1. Select Share from the options drop-down next to the current folder path at the top of the Media Library.

   

2. Select the users and/or user groups you want to share the folder with, as well as the permission level for each.

For more information, see Folder management.

Step 2: Register for add-ons

In order to enable some upload preset options, you first need to register for Cloudinary's add-ons. You'll then activate the selected add-ons using upload preset options in Step 3.

Here are some of the add-ons you may want to apply:

Step 3: Use an upload preset for auto-tagging, accessibility, and access restrictions

You can create upload presets, which centrally define a set of asset upload options. Users can apply the options by applying the presets on upload to improve accessibility, streamline searchability, and enforce asset restrictions.

To create an upload preset to apply upload options:

• Navigate to the Upload Presets tab on the Upload page of the Console Settings and click Add Upload Preset.
• Use the table below to apply recommended upload preset options, see how they align with best practices, and learn how to implement them.

• Remember to click Save at the top left corner.

Step 3: Assign metadata for searchability

To ensure assets are easily searchable and properly categorized, identify which metadata fields are relevant for your non-product assets and then create structured metadata field. Configure Cloudinary to prompt users for metadata entry on every upload.

To define metadata in the Media Library:

1. Go to the Structure Metadata page in the Console.
2. Configure the following metadata options:
   • Field types: Text, number, date, single-selection, and multiple-selection lists.
   • Mandatory fields: Define required fields to ensure consistent metadata entry. (Make sure you set a realistic number of mandatory fields so your users don't get overwhelmed.)
   • Default values: Assign default values to mandatory fields to prevent upload failures.
   • List values: Specify predefined values for single- and multiple-selection fields.
   • Metadata rules: Set conditional rules (e.g., State field appears only if Country is US).

     

     For more information, see Structured metadata.

To enforce metadata on upload:

You can configure Cloudinary to require metadata entry on every upload.

1. Navigate to the Upload page of the Media Library Preferences.
2. Under Request structured metadata on upload, select Always.

   For additional configuration options, see Media Library Preferences.

   For more information, see Structured metadata on upload.

Step 4: Manual upload via the Media Library

Content editors can manually upload assets while applying auto-tagging, automatic alt text generation, and video transcription and translation during the upload process.

To upload assets in the Media Library:

1. Navigate to the target folder:
   • Open the Media Library and click the Folders tab.
   • Browse to the folder where you want to upload assets.
2. Open the Upload Widget:
   • Click Upload to launch the Upload Widget.
3. Select an Upload Preset:
   • In the Advanced section, select the appropriate preset from the Upload Preset drop-down.
   • This ensures that transformations and metadata rules you configured get applied to the upload.

     

4. Upload the assets:
   • Browse your file system, or drag and drop the assets into the Upload Widget.
   • If assigning a specific public ID, upload assets one at a time and enter the public ID in the Advanced section.
5. Enter metadata before upload completion:
   • Cloudinary prompts you to fill in metadata field values before finalizing the upload.
   • Complete the metadata form for each asset

     

Managing creative approval

Ensure brand consistency and quality control by using a structured approval process for non-product assets before distribution. Cloudinary's creative approval workflow streamlines proofing, collaboration, and final approval.

Cloudinary's approval process consists of:

• Approval flows: Configurable multi-step workflows that define the review stages assets must pass through before approval.

• Proofs: A collection of assets assigned to an approval flow for structured review and approval.

To enforce approvals, create a proof, apply an approval flow, and iterate on assets until final approval.

Key benefits

• Streamlined approvals: Assign specific reviewers and enforce stage-based approval sequences.

• Integrated editing and retouching: Apply transformations and enhancements during the approval process.

• Structured proofing: Ensure thorough review before distribution.

Step 1: Create an approval flow

You can create approval flows by:

1. Navigating to the Approval flows page of the Console.
2. Clicking Create a New Flow.
3. Configuring the flow:
   • Name the flow and stages appropriately.
   • Assign reviewers (viewers, collaborators, or designated approval reviewers) from account users or external stakeholders.
   • Set approval requirements (e.g., all reviewers or just one must approve assets to progress).
   • Define multiple stages as needed.

Step 2: Start a proof with an approval flow

Users with appropriate permissions can start proofs by:

1. Clicking Start Proof on the Proofs page, in an asset’s context menu, or in the asset toolbar (for multiple selections).
2. In the Start Proof modal:
   • Add multiple assets to the proof.
   • Provide a Brief or description.
   • Assign an approval flow.
3. Once initiated, the approval flow sequence gets enforced, requiring approvals before moving to the next stage.
4. For final approval, all required stages need to complete.

Step 3: Review proofs

1. Open a proof from an email notification or the Proofs page.

   

2. Use commenting tools to provide feedback, tagging stakeholders as needed.

3. Mark each asset with:

   • Approved
   • Approved with changes
   • Changes required
   • Not relevant

4. If Changes required, the proof owner receives a notification and must:

   1. Edit and replace the asset in the Media Library by selecting Replace from the (3-dots) option menu on the asset card.
   2. Restart the proof process by selecting Create a New Version in the 3-dots menu for the specific proof on the Proofs page.

5. Once a proof is Approved, assets are ready for use. Set Access Control to Public from the Preview Pane if necessary.

   

For more information, see Creative approval flows and Proofs.

Setting up optimization and customization

To ensure optimal asset delivery, you can configure transformations within the CMS and associate them with the appropriate components. These transformations are then applied to specific assets to fit the component visual requirements.

Step 1: Add optimization to a named transformation

1. Open the Cloudinary Console.
2. From the Programmable Media product, click Transformation Center, then New Transformation.
   Note

   You can use sample assets or select your own in the Transformation Builder to preview how transformations look when applied.
3. Apply f_auto for automatic format optimization.
   • Click Quick Edit, enter f_auto, and click Apply.
4. Apply q_auto for optimal compression.
   • Select Delivery -> Quality in the Select Action section.
   • Choose a compression level: Auto, Auto Best, Auto Good, Auto Eco, Auto Low, or a numerical value (higher numbers apply less compression with higher quality; low numbers apply more compression with lower quality).

Considerations when applying quality

q_auto applies compression at the optimal level to make your asset as light as possible without compromising on visual quality. However, any level of compression presents some trade-off between quality and asset size. So:

• If keeping your website light is the highest priority: Select a more aggressive compression level.
• If you need to maintain extremely high quality for a certain image, such as a hero image that's displayed on high resolution viewports: Use the least aggressive compression algorithm, or even none at all.

Here is an example of a photograph encoded using various automatic quality parameter values and the resulting file sizes:

Original (569KB) q_auto:best (65.9KB) q_auto:good (56.9KB) q_auto:eco (45.0KB) q_auto:low:sensitive (39.6KB) q_auto:low (35.0KB)

Step 2: Add personalization and other enhancements to a named transformation

You can configure transformations for different content types, such as hero images and carousels, as well as specialized areas within the website.

1. Open the Cloudinary Console.
2. From the Programmable Media product, click Transformation Center, then New Transformation.
   Note

   You can use sample assets or select your own in the Transformation Builder to preview how transformations look when applied.
3. Configure transformations via Select Action or Quick Edit, where you can enter any transformation string.
   Tip

   Look up any transformation and find its string in the Transformation URL API reference.

Video Tutorial: Creating named transformations

Watch a short video that shows how to create named transformations in the Transformation Builder for optimizing and customizing assets.

Examples of customization and personalization

Cropping and resizing assets

Apply different crop and size transformations, depending on where you're delivering the asset, for example hero assets vs. carousel assets.

Here's an example:

Original Hero image Carousel image

• Carousel image: Uses c_auto,g_auto to keep the focus item in the crop.

• Hero image: Uses c_pad,b_gen_fill.
  • If you don't want to lose any of the image:
  • Use pad to add space to the shorter side.
  • To maintain a natural look, use gen_fill, which expands the image and naturally fills the shorter side with AI-generated content.
    

Focus on specific objects

Use the Cloudinary AI Content Analysis add-on to specify a focus area.

Here's an example:

Original Focus on the box Focus on the ring

• Focus on the box: Uses c_crop,g_auto:box

• Focus on the ring: Uses c_crop,g_auto:ring

Background and drop shadow

You can remove backgrounds or replace them with AI-generated content using the e_backround_removal and e_gen_background_replace transformations. You can also add a drop shadow effect.

Here's an example:

Original image Remove the Background Replace the background

• Remove background: Apply shadows to objects in background-removed images by setting up a virtual light source using e_background_removal/e_dropshadow:

• Replace background: Generate a new background using e_gen_background_replace.

Image overlays

Apply another image in your product environment as an overlay for branding, personalization, or watermarking.

Here's an example:

• Add a logo overlay scaled down to 50% of its original width and made into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the brightness effect. The transformed image is then placed as a layer in the top-right corner of the base image and video (l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east):

Text overlays

Overlay customized messages on your assets, such as engraved monograms, personalized gift messages, sales labels, or prices.

Here's an example:

• Add a text overlay with white text and apply it to the top right corner of an image, expanded using generative aI to an aspect ratio of 3:4 and a width of 1365 px.

Trimming videos and removing sound

Trim video clips and remove the sound, if needed.

Here's an example:

• Trim the video: Uses eo_15 to end the video after 15 seconds.

• Remove the sound: Uses ac_none.

Changing video orientation

Deliver videos in different orientations while keeping key content visible using g_auto. This allows for scalable video cropping, ensuring your videos remain intact without requiring manual adjustments or specialized tools.

Here's an example:

• The original windy_sundress video:

• Resized for mobile: Uses a crop mode of fill to expand the image to fill the bounding box, and g_auto to automatically follow the main object in the video throughout. Crop to a width of 720 px and height of 1280 px.

• Resized for tablets: Uses an aspect ratio of 1:1 and a crop mode of fill to expand the image to fill the bounding box. Set the width to 1080 px, and use g_auto to automatically follow the main object in the video throughout.

Color accessibility

Provide an option to view colorblind-friendly images.

• Click Quick Edit in the Transformation Builder and enter the string e_assist_colorblind:xray or e_assist_colorblind:xray.
  
• For more information, see Improve visibility for colorblind users.
  

Step 3: Save the named transformation and set it as a template

Once finalized, save the named transformation and enable it as a template for use in the Media Library.

1. Save the transformation with a meaningful name.
2. From the Programmable Media navigation menu, click Manage Transformations.
3. Find the named transformation, open the (3-dots) option menu, and enable it for images or videos.

Delivering assets to websites with Cloudinary

When delivering assets from Cloudinary, your approach depends on whether you’re using an integrated CMS, a custom CMS integration, or a standalone front-end. Each scenario has different methods for inserting and optimizing assets while ensuring a seamless content workflow.

The table below outlines the key differences between these three approaches and how Cloudinary fits into each:

In the following sections, we’ll walk through how to delivery assets with Cloudinary for each of these methods.

Delivering assets through an integrated CMS

Once you've set up the transformations for optimization and personalization for the various types of content, the content editors handle asset insertion within the CMS.

Insert a personalized asset

If your CMS integrates with Cloudinary, you can access the Media Library directly from your CMS interface, making it easy to insert assets into website content.

1. When adding an image or video to your CMS, select the Cloudinary Media Library to browse available assets.

2. Use the Assets tab to locate the content you want to insert. Search methods available from the Advanced Search drop-down:

   • Global search (available from all Media Library pages): Enter free-text to search the entire Media Library, including asset names and tags.

     

   • Advanced search: Set the criteria for your search by clicking on the filters displayed at the top of the Advanced Search section, and selecting the relevant values within each filter.

     

   • Query builder: Construct complex searches with AND/OR rules using structured search expressions.

     

   • Visual search: Enter a description to find images based on visual content rather than metadata.

     

   • Saved searches: Select a saved search from the Advanced Search drop-down to revisit a previous search.

3. Double click the asset you want to insert to open the manage page.

4. Find the template you want to use for delivery and click Insert.

   

Building a custom CMS integration for asset delivery

If your CMS doesn’t have a built-in Cloudinary integration, you can embed the Media Library Widget to access Cloudinary's Media Library directly from your CMS interface. This allows seamless asset management without switching between platforms.

To integrate Cloudinary into your tech stack, embed the Media Library Widget within your CMS.

Example implementation

The following code sandbox demonstrates how to integrate the Media Library Widget in HTML without using an iframe:

This code is also available in GitHub.

Once this integration is complete, follow the instructions in Delivering assets through an integrated CMS to insert your assets.

Delivering assets to a standalone front-end

If you use a front-end that's not integrated with Cloudinary, you can use programmatically integrate Cloudinary functionalities using one of our back-end SDKs.

Step 1: Find the assets

• Search API method: Query assets using a Lucene-like expression syntax for precise filtering and retrieval.

  Example: Find images tagged with 'hero_image', uploaded within the last day, and exceeding 1 MB in size. In the response, sort the results by public_id in descending order, and limit the returned results to 30 assets:

• The resources endpoint of the Admin API: Retrieve the asset's secure delivery URL using the asset's public ID.

• Admin API visual search method: Locate images based on visual similarity rather than text-based metadata.

  Example: Execute a visual search for 'footwear':

• Here's a sample response containing some of the returned fields:

Step 2: Customize and deliver

Once you've selected the asset to fit into the component, apply the named transformation to it.

1. HTML structure: Create the HTML structure for your asset, hero_image in this example:

2. Applying the named transformation: Generate the delivery URL for the docs/wines image with the hero_image named transformation applied:

   

3. Save the result of this API call in the variable delivery_url.

4. Inject it the delivery_url into the HTML code.

5. To make the image responsive, create named transformations for mobile and tablets, as well and use srcset in your HTML structure.

Other delivery channels

Besides delivering non-product images on your website, you can also deliver to the following channels:

• Social media: Optimize images for different platform size and format requirements.

• Third-party stakeholders: Ensure compliance with background color or file format constraints and protect your assets by watermarking.

• Email campaigns: Maintain quality within file size and resolution limitations.

• Market places: Adhere to specific format, background, metadata, and naming rules.

For more information, see Multi-channed content delivery.