Product asset workflows

This section outlines an example workflow for managing product assets. Use these recommendations as a guide and adjust the implementation as relevant to suit your company's needs.

Product asset workflows should be largely automated. Once you link Cloudinary assets with specific products, they can sync to the appropriate website components, already optimized and formatted for the ideal display.

Below is a high-level recommended workflow for product assets:

Enrich and organize on upload

Upload assets directly to Cloudinary as your central source of truth for all images and videos via the upload method, automated system triggers, or batch processing. As part of the upload, apply metadata from your product database as well as automatically generated tags and moderation, normalization, etc. Cloudinary automatically generates public IDs and delivery URLs for the uploaded assets.

Step 1: Set up folders and permissions

Creating folders

Start by organizing your product assets into a clear folder structure. This improves searchability and overall asset management, and is especially important because permissions and governance in the Media Library are enforced via folder management.

We recommend starting with a root folder like products/, and organizing by category.

Here's a sample folder structure for your product assets:

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.

Sharing folders with Media Library users

While developers on your team may have Admin user roles, you should assign Media Library user roles to content editors in your organization who work with assets within the Media Library. For more information on adding users and assigning roles, see User and group management.

Media Library users won't be able to view any content in the Media Library until you share folders with them. Once you do that, they'll be able to access the assets within the folder and its subfolders at the permission level you assign.

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: Associate an asset with its product SKU

You might be able to retrieve essential metadata, such as SKU or unique product ID, and product information embedded within the asset files themselves (e.g., EXIF, XMP). Alternatively, you could pull this information from your PIM, database, or spreadsheet containing filenames, SKUs, and other relevant details.

Depending on your use case, you can associate the asset with its product SKU within Cloudinary using:

Step 3: Set up normalization

Normalization standardizes assets during upload, ensuring they meet your specific requirements for dimensions, format, and quality. This guarantees consistency across all product assets stored in your DAM and simplifies management.

This step entails creating named transformations to normalize product assets. You'll apply them on upload using an upload preset in Step 6.

You can configure named transformations either programmatically or using the Transformation Builder. The steps below describe how to use the Transformation Builder UI, which may be more convenient in many cases.

Some common normalization actions include:

Example:

The transformation applied to the normalized image on the right removes the background, fits the subject within a 1920×1080 box without distortion, and then crops it to exactly 1920×1080 using automatic centering. This results in a transparent image with consistent dimensions, suitable for use in standardized layouts.

Original Normalized

Using the Transformation Builder

Configure named transformations using the Transformation Builder UI following these instructions:

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 normalizing product assets.

Step 4: Create metadata fields

Metadata can help system users, developers, or third-party stakeholders search for and retrieve assets for management or delivery. After you create metadata fields for your product environment, you can populate the fields by retrieving metadata from information within the uploaded files themselves or programmatically sync values between your assets and your product management platform. You can create the fields programmatically or via the Cloudinary Console UI.

To define metadata fields in the Console:

1. Go to the Structured Metadata page in the Console.
2. Configure metadata. Consider creating:
   • SKU field of type text with external ID sku_id
   • Expiration field of type date with external ID expiration_date_id
   • Visibility field of type single select with external ID visibility_id and list values Public and Private
3. The following options are available when creating and managing fields:
   • 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.

Step 5: 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 6.

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

Step 6: Use an upload preset for normalization, auto-tagging, access control, alt-text generation, and optimization

An upload preset enables you to centrally define a set of upload options, ensuring consistency and efficiency when uploading assets. It applies the options you set up in the previous steps, as well as other best practices for metadata, access control, normalization, accessibility, and optimization.

To create an upload preset to apply upload options:

• Navigate to the Upload Presets tab of the Upload Console Settings page 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 7: Upload with an upload preset and metadata field values

Upload assets to Cloudinary with the upload preset applied, use:

• The upload method of the Upload API for single asset or batch uploads.
• The migrate command of the Cloudinary CLI for batch uploads. Use this method for initiating uploads automatically from another source.
• The Media Library for manually uploading one or multiple assets, or a folder structure.

Example: Upload using the Upload method

Use the upload method to upload an asset using the product_images preset. In this example, metadata values are set for the following structured metadata fields:

• SKU (sku_id)

• Expiration date (expiration_date_id, set to 2 months from today)

• Visibility (visibility_id)

Retrieved the SKU from your database or PIM using the get_sku() function. Assign the SKU value to the metadata field, and include the SKU in the public ID as a prefix, followed by a generated suffix.

Example: Batch upload with the CLI

Batch upload using the migrate command:

1. Create an upload mapping to transfer assets from your source domain https://your-source-domain.com/media/uploads/ to Cloudinary’s product_assets folder

2. Run this command to migrate all the assets listed in the `url_file.txt` to the `product_assets` folder in your Cloudinary product environment, showing verbose output. The `product_assets` upload preset, which has the same name as the upload mapping, gets applied automatically:

2. You can update metadata programmatically using the explicit method.

Example: Upload using Media Library

Upload assets via the Media Library, applying upload preset options and adding metadata:

• Default upload preset: You can set up Media Library Upload Preset Defaults for your images and videos. Select an upload preset that will apply to all uploads performed from the Media Library, whether the upload is done by dragging and dropping into the Media Library or via the Upload Widget by clicking the Upload button.

• Upload preset selection: For flexibility in selecting upload presets, you can click Upload to launch the Upload Widget, then select an Upload Preset in the Advanced section and select the appropriate preset from the Upload Preset drop-down.

• Require metadata on upload: In the Upload page of the Preferences, select Always for the Request metadata on upload. When that setting is enabled, Cloudinary prompts filling in metadata field values before finalizing the upload.

Sync assets with your product data

After uploading your assets to Cloudinary, ensure they're linked to the other elements within your tech stack. Use product-identifying details (like SKU or product ID) in the asset's public ID or metadata for seamless integration.

Sync assets using a PIM integration

For businesses utilizing a PIM (Product Information Management) system, product information often exists in the PIM before adding assets to Cloudinary. Cloudinary serves as the central source of truth, allowing PIM systems to pull asset data, such as public IDs and delivery URLs directly from Cloudinary.

Key benefits of PIM integration:

• Automatic syncing: Cloudinary delivery URLs or public IDs are stored in the PIM, enabling seamless product publishing with Cloudinary assets.

• Consistent metadata: Cloudinary retrieves and syncs product metadata from the PIM to ensure consistency.

• Bi-directional updates: Changes in the PIM automatically update in Cloudinary, and vice versa, ensuring the latest assets are always used.

Akeneo and Syndigo are examples of Cloudinary-integrated PIMs. See Integrations for a complete list.

Sync assets without a PIM integration

If you don’t use a PIM and instead manage product information through a database or spreadsheet, you can create a custom connector between Cloudinary and your system.

Essential components of a custom integration

Additional considerations for integration

• Make sure your connector is robust and handles all possible scenarios, such as asset deletion. Sync deletions from Cloudinary to your PIM or database.

• Here's an example of a personalized flow that can help you manage metadata sync between Cloudinary and your system.

  • Use a structured metadata field called Status.
  • Set a value for the Status field dynamically:
    • If all of the asset's required metadata is import successfully from your PIM or database to Cloudinary, set the Status field to Metadata complete.
    • If any required fields are missing, set Status to Requires data.
  • Create a saved search in Cloudinary to quickly find assets whose Status field's value is Requires data to manually complete the missing fields more easily.

Sample app: Syncing without a PIM integration

This PHP sample app adds products to a database and displays them in a product catalog with normalized images and videos. Videos undergo asynchronous moderation and are processed via webhook upon approval.

While this example provides a strong foundation, a real-world implementation would require modifying the process to retrieve assets and metadata programmatically instead of relying on user input, as well as enabling bulk uploads for efficiency.

Customize and optimize on delivery

Whether you've stored the original asset in your product environment or a normalized version, when delivering product assets to your website, you may need to adjust, customize, and optimize them. For example, you might need to adjust the size or aspect ratio based on whether the asset appears on a Product Detail Page (PDP) or Product Listing Page (PLP). Or, you might want to overlay a sale badge or other promotional elements.

Create named transformations programmatically or using the Transformation Builder. We recommend using named transformations over direct transformations as they shorten URLs for better SEO, are easy to reuse, and are simpler to apply when given meaningful names.

Once you've created a named transformation, you can:

• Apply it directly to transform an asset. For example, the following example applies the clothing_sale named transformation to the woman-in-shirt image, applying the sales tag:

  

• Associate it with frontend components. Matching assets to product SKUs automatically places images and videos in the right spot on your website. Linking named transformations to frontend components ensures each asset gets processed to fit design requirements.

For more information about creating named transformations to customize assets on delivery, see Customize and optimize on delivery.

Deliver product assets to your e-commerce website

Once you've organized assets in Cloudinary and linked them to your products, delivering them to your e-commerce website becomes an automated process. Whether using a pre-built integration or a custom implementation, you can use Cloudinary to dynamically optimize and serve product images and videos based on product data and display requirements.

In both cases, you can use the Product Gallery Widget to deliver product assets dynamically on Product Detail Pages (PDPs). The Product Gallery Widget provides an interactive viewer that enhances product display with automatic image retrieval, video support, and 360° spin sets.

Using an integrated front end

If you’re using an e-commerce platform or a composable, headless front end with built-in Cloudinary integration, follow the platform’s configuration and setup instructions to display your assets efficiently.

The examples below highlight a few popular integration options, but Cloudinary supports a growing number of platforms. To explore all available integrations, see the Integrations page.

• E-commerce platform integrations

  • Shopify: Utilize Cloudinary’s MediaFlows integration for seamless product asset delivery and rendering on Shopify stores, ensuring assets display as expected.
  • Salesforce Commerce Cloud: Automate asset delivery using Salesforce Commerce Cloud Cartridges, ensuring efficient Cloudinary asset handling within your storefront.

• Composable storefront integrations

  • commercetools: Dynamically manage product assets for headless e-commerce experiences, providing flexibility in asset delivery.
  • Salesforce Commerce Cloud Headless Cartridge: Enable Cloudinary image and video management through Salesforce’s headless commerce for seamless API-driven asset delivery.

Example walkthrough

This fully functional demo below showcases the commercetools extension, offering insights into setting up a storefront and displaying product assets effectively.

PLP with
responsive images

Using a standalone front end

If your platforms don't include a ready-made Cloudinary integration, you'll need to implement your own solution to render your Cloudinary assets on your front-end.

Use Cloudinary's SDKs to seamlessly integrate assets (and optionally the Product Gallery Widget) into headless front-end applications (such as React, React Native, Android, etc.). Dynamically assign assets to website components using product-match workflows.

Step 1: Schedule publishing

Automatically initiate the process of publishing assets using MediaFlows or cron jobs, ensuring your assets are always up-to-date on your website without manual intervention.

Here's an example MediaFlow that sends an HTTPS request to update your front-end with any new or updated Cloudinary assets any on a schedule, such as once a day:

Step 2: Optimize and transform assets according to website location

Use named transformations to dynamically modify product images based on their display location (e.g., PDPs, PLPs) while ensuring optimal format and quality. Once created, a named transformation can be applied repeatedly on delivery without additional setup.

Here's an example of programmatically creating and applying a named transformation (pdp_product_images) that applies cropping, resizing, format conversion, and quality adjustments:

Step 3: Search, retrieve, and render product assets

To display the correct assets on your website, retrieve each asset by its SKU (or another product identifier). You can store the SKU as part of the public ID or within the asset’s structured metadata, as described above in [put the section name/link here]. This approach ensures each asset matches the correct product and display location, such as PDPs or PLPs.

The following example creates a delivery URL for an asset using the SKU stored in the metadata field. It applies the pdp_product_images named transformation to optimize the image for a PDP:

Enhancing product asset display with the Product Gallery Widget

Cloudinary’s Product Gallery Widget is a ready-to-use, interactive viewer that simplifies product asset presentation. It requires only JavaScript, making it easy to integrate into any web framework while eliminating the need for custom gallery development.

Benefits:

• Seamless integration: Embed a responsive, media-rich product gallery.
• Automatic asset population: Retrieves product images and videos based on tags.
• Customizable layouts: Adjust styles, transitions, and navigation.
• 360° spin sets: Enable interactive product exploration with rotational image sets.

Implementation:

• For integrated front-ends, check your integration's documentation for specific instructions on embedding the Product Gallery Widget.

• For custom front-ends, include the remote JavaScript file and initialize the widget with:

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.