More Products

Integrating Cloudinary components into your custom attribute editor

Last updated: Sep-26-2023

Overview

Cloudinary's SFCC Page Designer cartridge provides two components:

  • Cloudinary Image Component
  • Cloudinary Video Component

These components are available when you install the cartridge and enable you to embed images and videos from your Cloudinary product environment into pages created with Page Designer. If you are developing your own Page Designer components, you may wish to combine the functionality provided by Cloudinary's components with your own functionality. You would do this by integrating Cloudinary's components into your own custom attribute editor.

Integrating Cloudinary's components into your own custom attribute editor

To integrate Cloudinary's image and/or video components into your own custom attribute editor:

  1. Install Cloudinary's Page Designer cartridge.
  2. In your meta definition file, add the following json as attribute_definitions:

    For the image component:

    For the video component:

    You can change the name and id as required, and add as many of these components as you need.

  3. In your .isml file, add the following code to render the Cloudinary component output:

    For the image component:

    For the video component:

Sample code

This example provides sample code for integrating Cloudinary's Page Designer components into a custom attribute editor.

Important
Make sure your code uses the function getVideoTransformations() located in your mediaLibraryVideo.js file. If it's missing, the default video transformations that you set in the Custom Preferences may not be applied to your videos.

✔️ Feedback sent!

Rate this page: