Steps:

1. Select an image from the popup.
2. Notice that the breakpoints for the image are correctly pulled from the api. I use a debugging breakpoint at line 62 of Brpoints.js for this.
3. Refresh your storefront page
4. Notice that the breakpoints have been correctly sent to the user.
5. Add a transformation to "Transformation override"
6. Save the asset.
7. Refresh your storefront page.
8. Notice that the breakpoints have been removed from the asset.
9. Open the image in the popup, hit insert, save, and the breakpoints will be back on the page.

1. edit an asset
2. add a image to an asset
3. select "transform" and select some transformations
4. save the change
5. edit the image again
6. select "transform"
7. Notice that your transformations are missing.

The same goes for named transformations.
If I pick a named transformation and then go back and edit the image again, the transformation is not selected. There is no other way to view the chosen transformations other than viewing the page source.

The code below exists in cartridges/int_cloudinary_pd/cartridge/templates/default/experience/components/assets/cloudinaryImage.isml. If I remove this code from the page the srcset isn't correctly populated. Is this on purpose? Should I always include this code in my content assets that use your custom editor?

Also, should that be window.cnamw or window.cname?

<!-- Uncomment this to expose the raw view model for debugging: -->
<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.cnamw = value.cname || null;
  console.log(value);
</script>

The site cartridge name mentioned in Update the site cartridge path section should be int_cloudinary_pd instead of int_cloudinary_pad

https://github.com/cloudinary/cloudinary_sfcc_pagedesigner#update-the-site-cartridge-path

Browser: Firefox Version 90.0 (64-bit)

Steps to produce:

1. Open Firefox Browser, login to SFCC
2. Go to PageDesigner
3. Select Cloudinary Video Component
4. Notice that the checkboxes are missing under the category Player options

I checked the debugger console and didn't see any useful error message, but I will paste them just in case:

An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. 4 ViewLdsBusinessManagerScreen-PageDesigner

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://page-designer.cloudinary.com’) does not match the recipient window’s origin (‘https://<sandbox-hostname>’). srcdoc
labels.undefined is not translated i18n.js:16:14

ERROR in sandbox TypeError: value is null Object {  } <prototype>: Object { … }custom-editor.component.ts:381:12

[iFrameSizer][Host page: iFrameResizer2] IFrame has not responded within 5 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.

There needs to be one source of truth for how to install the cartridge.

Replace the install instructions in the readme.md with a link to the documentation pdf.

Credential must be added to the service but readme.md doesn't mention about it. Looks like pdf documentation is more reliable.
https://github.com/cloudinary/cloudinary_sfcc_pagedesigner/blob/master/documentation/Cloudinary%20LINK%20Page%20Designer%20Guide.pdf (Find Step 5 in "Importing meta-data and services")

Without viewing the page source there is no way for a content editor to quickly know that an image has had the correct transformations applied to or easily notice/debug image issues.

In getBreackpoints() from cartridges/int_cloudinary_pd/cartridge/controllers/Brpoints.js the max_width is too small. Can this be configurable?

I was going to extend the file but the use of local functions inside of a controller makes that difficult. My SF Architect suggested I do a server.replace on the route and move the local functions into a helper method.

Steps to reproduce:

• Go to any Cloudinary Image Component
• Click on Image Link (opens Link Builder)
• Select categories
• Add the image via the plus icon

The result is that it uses the sites name but it should use the ID instead.

Right now, the code applies the breakpoint transformation and then the customer specified OR catridge configured transformations.
This works great for such transformations as dpr_auto, q_auto, and f_auto. This doesn't work great if I take a 1900x1200 image and apply "c_scale,g_south,w_1600". If the breakpoint is < 1600w the custom transformation won't take effect.

Instead I would like to apply the transformations in this order:

1. Customer specified though both the popup
2. Breakpoint transformation
3. Cartridge specified transformation

Attached is my quick and dirty edit of 'cartridges/int_cloudinary_pd/cartridge/static/default/js/cloudinaryImages.js'
I pulled the auto updates into a different object and then reordered the concat.

window.addEventListener('load', renderImgs);

function renderImgs() {
    console.log('render images');
    let conf = {
        cloud_name: window.cloudName
    }
    if (window.cname) {
        conf.cname = window.cname
    }
    cld = cloudinary.Cloudinary.new(conf);
    for (var imageConf of cldImages) {
        if (imageConf.id) {
            var trans = JSON.parse(imageConf.transformation);
            var t = trans.map(tr => {
                if (tr.text) {
                    return buildTextOverlay(tr);
                } else if (tr.publicId) {
                    return buildImageOverlay(tr);
                }
                return tr;
            })
  //*****START
            var autot = [{}];
            if(t[0].dpr){
                autot[0].dpr = t[0].dpr;
                delete t[0].dpr;
            }
            if(t[0].fetchFormat){
                autot[0].fetchFormat = t[0].fetchFormat;
                delete t[0].fetchFormat;
            }
            if(t[0].quality){
                autot[0].quality = t[0].quality;
                delete t[0].quality;
            }
            var url = cld.url(imageConf.publicId, { transformation: t });
            var brs = [];
            var breakpoints = JSON.parse(imageConf.breakpoints);
            if (breakpoints && breakpoints.length > 0) {
                for (let br of breakpoints) {
                    var trs = t.concat([{ crop: 'scale', width: br }]).concat(autot);
                    var s = cld.url(imageConf.publicId, { transformation: trs });
                    brs.push(s + ' ' + br + 'w');
                }
            }
   //========  END
            var img = document.getElementById(imageConf.id);
            if (img) {
                img.src = url;
                img.onerror = onError;
                if (brs.length > 0) {
                    img.srcset = brs.join(',');
                }
            }
        }

    }
}

const onError = (err) => {
    let target = event.currentTarget;
    target.onerror = null;
    target.removeAttribute('srcset');
    target.src = 'https://product-assets-res.cloudinary.com/image/upload/w_250,co_rgb:c23834,e_colorize:100,f_png/PageDesigner/warning.png';
    return true;
}

const buildImageOverlay = (overlay) => {
    let imageOverlay = new cloudinary.Layer().publicId(overlay.publicId);
    return {
        overlay: imageOverlay,
        gravity: overlay.gravity,
        y: overlay.y,
        x: overlay.x,
        opacity: overlay.opacity,
        width: overlay.width,
        flags: 'relative'
    };
};

const buildTextOverlay = (overlay) => {
    if (overlay && overlay.text) {
        let textOverlay = new cloudinary.TextLayer()
            .fontFamily(overlay.fontFamily)
            .fontSize(overlay.fontSize)
            .fontWeight(overlay.bold ? 'bold' : 'normal')
            .fontStyle(overlay.italic ? 'italic' : 'normal')
            .textDecoration(overlay.underline ? 'underline' : 'normal')
            .textAlign(overlay.textAlign)
            .text(encodeURIComponent(overlay.text));
        return {
            overlay: textOverlay,
            gravity: overlay.gravity,
            color: overlay.color,
            y: overlay.y,
            x: overlay.x
        };
    }
};

Step to reproduce:

• add a cloudinary image component to a page
• select an image and save
• refresh the page
• edit the page
• edit the cloudinary image component
• remove the image using the trash icon
  An exception is raised in the browser:

ERROR TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at https://xxxx.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.static/Sites-Site/-/default/application/page-designer/vendor.7d7c0d7172a76b8f99d0.js:1:1507061

It seems that the exception is rasied when the event sfcc:value is emitted with the payload set to null. Setting the payload to an empty object payload: {} does not raise the exception anymore, and the value for the attribute is not removed but saved as the empty object itself.