Integrating Cloudinary components into your custom attribute editor

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.