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 account 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:

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

    For the video component:

    Copy to clipboard
    {
        "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:

    Copy to clipboard
    <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:

    Copy to clipboard
    <isscript>
        // Check for duplicates before adding.
        var assets = require('*/cartridge/scripts/assets.js');
    
        // Video Player CSS
        var src = 'https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css';
        if (assets.styles.lastIndexOf(src) < 0) {
            assets.addCss(src);
        }
    
        // Cloudinary Core JS
        src = 'https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js';
        if (assets.scripts.lastIndexOf(src) < 0) {
            assets.addJs(src);
        }
    
        // Cloudinary Video Player JS
        src = 'https://unpkg.com/cloudinary-video-player/dist/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.

✔️ Feedback sent!

Rate this page: