Integrating Cloudinary components into your custom attribute editor

On this page:

• Overview
• Integrating Cloudinary's components into your own custom attribute editor
• Sample code

Rate this page:

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:

   JSON

   {
       "id": "cld_image",
       "name": "Image from Cloudinary",
       "type": "custom",
       "required": true,
       "editor_definition": {
           "type": "cloudinary.imageForm"
       }
   }

   For the video component:

   JSON

   {
       "id": "cld_video",
       "name": "Video from Cloudinary",
       "type": "custom",
       "required": true,
       "editor_definition": {
           "type": "cloudinary.videoForm"
       }
   }

   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:

   Html

   <isscript>
       // Check for duplicates before adding.
       assets = require('*/cartridge/scripts/assets.js');
       // Cloudinary Core JS
       var src = 'https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
       assets.addJs('*/js/cloudinaryImages.js');
   </isscript>
   
   <script>
       var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
       window.cldImages = window.cldImages || [];
       window.cldImages.push(value);
       window.cloudName = value.cloudName;
       window.cname = value.cname || null;
       console.log(value);
   </script>
   
   <div class="cloudinary-media-library-container sfdc-component-mock sfdc-component-assets-media_library-mock">
       <img class="component-media_library ml-image" 
           src="${pdict.viewmodel.placeholder}"  
           data-real-url="${pdict.viewmodel.src}"
           id="${pdict.viewmodel.id}"
           alt="${pdict.viewmodel.altText}"
           style="max-width: 100%">
   </div>

   For the video component:

   Html

   <isscript>
       // Check for duplicates before adding.
       var assets = require('*/cartridge/scripts/assets.js');
   
       // Video Player CSS
       var src = 'https://cdnjs.cloudflare.com/ajax/libs/cloudinary-video-player/2.0.2/cld-video-player.min.css';
       if (assets.styles.lastIndexOf(src) < 0) {
           assets.addCss(src);
       }
   
       // Cloudinary Core JS
       src = 'https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.13.1/cloudinary-core-shrinkwrap.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
   
       // Cloudinary Video Player JS
       src = 'https://cdnjs.cloudflare.com/ajax/libs/cloudinary-video-player/2.0.2/cld-video-player.min.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
   
       assets.addJs('/js/cloudinaryVideos.js');
   </isscript>
   
   <div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
       <video id="${pdict.viewmodel.id}"></video>
       <script>
           var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
           window.players = window.players || [];
           window.players.push(value);
           window.cloudName = value.cloudName;
           window.cname = value.cname || null;
           console.log(value);
       </script>
   </div>

Sample code

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