More Products

Magento (Adobe Commerce) Extension

Last updated: Jan-30-2024

Note
The Cloudinary extension is supported only for Magento 2. Magento 1 was deprecated as of June 2020 and, as a result, the Cloudinary extension for Magento 1 is no longer available.

Overview

The Cloudinary Magento (Adobe Commerce) extension links your Magento website to a product environment in your Cloudinary account, allowing your teams to manage and automatically serve all your product, category, and content management system (CMS) images directly from Cloudinary. You can apply transformations to change the visual appearance or resize to support multiple devices, and deliver your assets in the optimal format and quality via the most advanced Content Delivery Networks (CDNs). The Cloudinary Magento (Adobe Commerce) extension includes full support for Magento Page Builder functionality, making it easy to build your site content and use your Cloudinary media.

Get started

Before you install the extension, make sure you have a Cloudinary account. You can start by signing up for a Free plan. When your requirements grow, you can upgrade to a plan that best fits your needs.

Once you have your Cloudinary account, download and install the extension from the Magento (Adobe Commerce) Marketplace.

Setup

After you download and install the extension, follow these steps to configure the extension for the first time and connect it to your Cloudinary environment:

  1. In the Magento Admin Panel, select Stores > Configuration.
  2. On the Configuration page, open the Cloudinary section in the left-hand sidebar and select Settings.
  3. In the Cloudinary Setup section of this page:
    • Set your Cloudinary Account Credentials. (Copy the text in the Environment variable as found in the dashboard of the Cloudinary Console). The format should be cloudinary://{API_Key}:{API_Secret}@{Cloud_Name}, this is the text after "CLOUDINARY_URL=".

      Cloudinary credentials
    • Set Enable Cloudinary to Yes.
    • Further options can be specified in the Cloudinary Configuration and Default Image Transformations.
    • Click Save Config at the top of the page.
  4. Go to System > Cache Management and refresh your Configuration and Page caches.

From this point onwards, any new media assets you upload can be delivered via Cloudinary.

Migrate media to Cloudinary

You can migrate your existing media assets to Cloudinary in two different ways:

Enable Auto Upload Mapping to automatically upload existing media assets to Cloudinary when they are first requested by a user. This option can be set in the Cloudinary Configuration section of the Cloudinary settings.

or

Migrate your media in bulk using the Magento command line tool:

  1. From the command line, run the cloudinary:upload:all command. If you are currently located within Magento's parent directory, the correct command is:
    bin/magento cloudinary:upload:all.
  2. You can follow the progress of the migration from the command line. Keep your terminal window open while the uploads are in progress.
  3. When all media assets have been uploaded, return to System > Cache Management in the Magento Admin Panel and refresh all caches.

Note
The initial migration process may take a while, especially if you have many media assets.

Configuration

With Cloudinary, you can add and deliver both images and videos. The Cloudinary configuration page has multiple options to change the behavior of the Cloudinary extension when delivering images and video. These are:

  • Media Delivery Domain Sharding - Enable multiple subdomains for Cloudinary delivery URLs in order to increase page loading speed. This is enabled by default.
  • Auto Upload Mapping - Automatically upload media assets from your site to Cloudinary (if they don't already exist there). Use this to lazily migrate your assets, as the upload will occur only when the asset is first requested by a user. See Auto-Upload for more information on how this works in Cloudinary.
  • Automatic Image Format Optimization - Automatically deliver images converted to modern image formats based on viewing device and browser. For example, deliver a JPEG as an AVIF or WebP for better performance and user experience. This is enabled by default. See how to optimize image format for more information.
  • Image Quality - Adjust the quality of generated images to balance between visual quality and file size minimization. The quality setting defaults to use Cloudinary's automatic quality algorithm. This is particularly relevant for JPEG and WebP compression levels. See how to optimize image quality for more information.
  • Image Cropping Gravity - Define the part of the image to focus on when cropping images in order to better match your graphic design. This setting will have no effect if 'Magento's Default' is selected. See documentation on gravity for possible values and how they work.
  • Image Device Pixel Ratio (DPR) - Use a DPR value higher than 1.0 to generate and deliver hi-res images for better visual results on HiDPI devices, such as Retina Display devices. This is set to 1.0 by default, but can be increased to 2.0.
  • Default Image - Specify an image to use as a placeholder when an asset no longer exists.
  • Global Custom Transformations - Apply additional transformations to every image and video you deliver. For example, you could add a semi-transparent company logo watermark to every asset. Specify the transformation parameters in the URL format as described in Cloudinary's image transformation guide. For a list of all available transformation parameters, see the Transformation URL API Reference.
  • Product Custom Transformations - Specify transformations to be applied to product media only. You can choose whether to add the transformations alongside any global transformations or override the global transformations. For a list of all available transformation parameters, see the Transformation URL API Reference.
  • Lazy Loading - Only load your images when scrolled into view.
    • Configure whether to apply to your CMS blocks, and optionally, which blocks to exclude from lazy loading.
    • Set the threshold for how many pixels from the top of the page before lazy loading is applied to your images.
    • Choose an effect for how the images are loaded.
    • Choose a placeholder type such as blur or pixelate.
  • Product Gallery - Enable Cloudinary's interactive media gallery interface to deliver your optimized product images and videos. See the Product Gallery guide for more information.

    • Select the color scheme for the gallery to match your brand.
    • Configure the navigation, zoom type and position, and the behavior of the transitions between images.
    • Configure all aspects of the carousel, including whether to use thumbnails or indicators as well as the thumbnail size and presentation.
    • Extend the functionality by configuring custom parameters. See the Product Gallery reference.
    • Add 360 spin sets to your gallery when selecting product images. In order to display a 360 spin set, the Product Gallery fetches all images with a particular tag and combines them into a single entity, where each image is included as a single frame of the resulting 360 spin set (sorted alphanumerically by their Public ID).
      When adding a spin set, specify the tag name used for the images, as shown below:

      Magento spin sets

    Note
    To enable the Product Gallery to access and load your media, ensure that you remove any restrictions on listing resources. To verify this, log into your Cloudinary Console, navigate to Settings and select the Security page. From here, make sure that Resource List is unchecked in the Restricted Media Types option group.

Managing media

You can manage your media assets for your Magento (Adobe Commerce) site using the Cloudinary Media Library. Enjoy a full Digital Asset Management (DAM) solution directly through Magento.

Note
The Safari browser may require additional steps when logging in to the Media Library. If you encounter an issue, follow the prompts to log in separately and attempt to open the Media Library again. Alternatively, use one of the other recommended browsers when working with Cloudinary.

Media Library UI

Use the Cloudinary Media Library UI to:

  • Upload new images, videos, audio, or other files.
  • Create and navigate through folders or share folders with user groups.
  • Create and browse collections or share collections with user groups or external parties.
  • Perform advanced searches.
  • Select multiple assets to perform bulk operations including delete, add/edit tags, move, download, or review moderated assets.
  • Select a single asset to view or update basic asset details, view or activate advanced asset analysis operations, or to generate transformations for that asset.

Caution
Be careful when deleting or renaming an asset using the Cloudinary Media Library. The plugin will sync this change to Magento and can therefore result in broken image and video URLs.

Adding media

To insert media from Cloudinary, open the Cloudinary Media Library by clicking Add from Cloudinary. You can find it in the following places:

  • Managing your catalog - Add category and product images to your catalog directly from the Cloudinary Media Library.
  • Managing your site content - Add media from Cloudinary to all pages on your Magento site using the Media Library.

Magento Page Builder

If you're using the Magento Page Builder to manage your site content, you can easily insert and manage your media using Cloudinary. Whenever you add a media block to your site, such as an image, video or banner, you'll have the option to select the media from Cloudinary.

For example, to add an image from Cloudinary, drag and drop an image or banner block into the page builder, then click Select from Gallery. Next, open the Cloudinary Media Library to manage and insert your Cloudinary assets by clicking Add from Cloudinary. For video blocks, add the Cloudinary URL for the video, including any transformations.

Magento page builder

Transformations

The Cloudinary Media Library allows you to perform transformations on individual assets before inserting them to your Magento site. Have a look at the image transformations guide for more information on the available transformations.

Note
If you have global or product transformations defined, these will be combined with the transformations you perform at an individual level.

✔️ Feedback sent!

Rate this page: