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: 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 these presets on upload to improve accessibility, streamline searchability, and enforce asset restrictions using the following features:

To start up an upload preset:

1. Navigate to the Upload Presets tab on the Upload page of the Console Settings.
2. Click Add Upload Preset.
3. In the General tab:
   1. Enter a meaningful name for your upload preset, e.g., non_product_assets.
   2. Make sure you've selected Signed as the signing mode.
   3. Set the naming settings for public ID and display name.
      Important

      Whereas the display name is used mainly within the Media Library, the public ID is also included within asset delivery URLs. Changing the public ID at a different time risks breaking links to assets in production.
      

To apply these features in an upload preset:

1. In the Manage and Analyze tab, enable Auto transcription and Translate, and select your language.

   

2. In the Optimize and Deliver tab, select Restricted for the Access control setting.

   

3. In the Addons tab, select one or more auto-tagging add-ons.

   

4. Click Save at the top left corner.
5. Register for the add-ons you're using in the upload preset from the Add-ons page of the Console Settings.

Step 3: Assign metadata for searchability

To ensure assets are easily searchable and properly categorized, you can create structured metadata fields and configure Cloudinary to prompt users for metadata entry on every upload.

To create metadata fields:

1. Plan metadata fields: Identify which metadata fields are relevant for your non-product assets.
2. Define metadata in the Media Library:
   • Go to the Structure Metadata page in the Console.
   • 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

Cloudinary administrators 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, web administrators 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

Administrators 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 to personalizing assets.

Examples of personalization and other enhancements

• Cropping and resizing assets to a specific aspect ratio: Apply different crop and size transformations for hero assets vs. carousel assets.
  Tip

  For responsive images, create multiple named transformations for different viewport sizes.
  • Focus on specific objects: Use the Cloudinary AI Content Analysis add-on to specify a focus area (e.g., g_hat)

    For example, crop this image to focus on the hat:

Original ar_1:1,c_auto,g_hat,w_400
Focus on the hat

• Preserve the most relevant part of the image, use g_auto to keep the focus item in the crop.

c_thumb,g_auto
Thumbnail crop
c_auto,g_auto
Automatic crop

• 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.

ar_3:2,c_pad ar_3:2,b_gen_fill,c_pad

For more information, see Image resize and cropping.

• Background: Remove backgrounds or replace them with AI-generated content.
  Note

  e_background_removal yields a high percentage of good results, which is valuable for large-scale operations. However, it's important to catch any that need improvement in the Creative Approval process. For more refined results, consider using the Pexels add-on (more costly) or Final Touch.
  • Drop shadow: Apply shadows to objects in background-removed images by setting up a virtual light source.
  • Add a custom background: Underlay a new background under the background-removed image.

Original image Remove the Background
e_background_removal/e_dropshadow Replace the background
e_gen_background_replace

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

Image Overlay
l_docs:logo-semi-opaque/fl_layer_apply

• Text overlays: Overlay customized messages on your assets, such as engraved monograms, personalized gift messages, sales label or price.

Text Overlay
l_text:Arial_40:Comfort%25E2%259D%2580

• Resolution: Save at high resolution (e.g., 2000x2000 px) to support zoom functionality.
• Trimming videos and removing sound: Trim video clips and remove sound during upload if needed.

• Changing video orientation: You may need to deliver videos in different orientations based on factors such as website placement or the requesting device. However, changing orientation can risk cropping out important areas of the video. Using g_auto ensures that key content remains visible.

  Compare the following videos, where you can see the original, the first cropped one using g_auto and the second cropped one using g_auto:ball (click any video to see all three videos running simultaneously):

• Color accessibility: Provide option to view colorblind-friendly images.

  • Click Quick Edit in the Transformation Builder and entering the string e_assist_colorblind:xray or e_assist_colorblind:xray.

    For more information, see Improve visibility for colorblind users.

  Tip

  See how a colorblind individual might view your images by applying Simulate Colorblind in the Select Action section of the Transformation Builder.

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 the web administrators have 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](#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:

• 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.