Creating Quick Actions for ContentReference Images with a Custom Dojo Module

Credit note: This article is inspired by the edit link in dojo module, with extra features added.

We received a request from our customer to enhance the content reference widget with UIHint.Image, enabling the ability to edit images on the fly for missing ALT titles.

While it's straightforward to create a custom scheduled job to update content properties, it's crucial for editors to manually update SEO-friendly properties as they want them to be.

This enhancement aims to streamline the process for editors to update the ALT attribute of images, reducing the steps involved, which currently include:

1. Uploading the image in the asset pane or dragging it directly to ContentReference.

2. Opening the image through the Asset widget modal.

3. Accessing the edit view for the image, making updates, and publishing the image.

Changes made:

• Added context options over upload image (In field) to use on-the-fly options.

• Improved the flow of the Images to better outline the current process.

What the new tool does:

• Displays two context options: Edit and Quick Edit.

• Hides options when there is no image.

Output -

Steps of development

The structure of these files in the code is organized like this (root)

1. Create a custom Dojo file that contains the source for the action buttons shown in the demo above: Edit and Quick Edit.

    define("quickactions/editors/ImageLinks", [
        "dojo/_base/declare", "dojo/when", "dojo/on", "dojo/topic", "dojo/dom-class",
        "epi/Url", "epi/routes", "epi/shell/DialogService",
        "epi-cms/core/ContentReference", "epi-cms/widget/MediaSelector",
        "epi-cms/contentediting/_ContextualContentContextMixin",
        "epi-cms/widget/UploadUtil",
        "dojo/text!./templates/ThumbnailSelector.html",
        "xstyle/css!./style.css",
        "epi/i18n!epi/cms/nls/episerver.cms.widget.thumbnailselector"
    ], function (
        declare, when, on, topic, domClass,
        Url, routes, dialogService,
        ContentReference, MediaSelector,
        _ContextualContentContextMixin,
        UploadUtil,
        template, styles, resources
    ) {
        const defaultImageUrl = require.toUrl("epi-cms/themes/sleek/images/default-image.png");
   
        const DropFileMixin = declare(_ContextualContentContextMixin, {
            _dialogService: null,
            allowedExtensions: [],
   
            _onDrop(evt, fileList) {
                const filtered = UploadUtil.filterFileOnly(fileList);
                if (!filtered || filtered.length !== 1) {
                    this._dialogService.alert(resources.singleimage);
                    return;
                }
   
                const extension = filtered[0].name.split(".").pop().toLowerCase();
                if (!this.allowedExtensions.includes(extension)) {
                    this._dialogService.alert(resources.wrongfileformat);
                    return;
                }
   
                when(this._refreshTargetUploadContent()).then(() => {
                    this.uploadCommand.set("fileList", filtered);
                    this.uploadCommand.execute();
                });
            }
        });
   
        return declare([MediaSelector, DropFileMixin], {
            resources,
            templateString: template,
   
            _getThumbnailUrl(content) {
                if (!content.capabilities.generateThumbnail) {
                    return content.thumbnailUrl || defaultImageUrl;
                }
   
                const url = new Url(routes.getActionPath({
                    moduleArea: "CMS",
                    controller: "Thumbnail",
                    action: "Generate"
                }));
   
                url.query = {
                    contentLink: content.contentLink,
                    "epi.preventCache": Date.now()
                };
   
                this.quickEditButton.style.display = "block";
                this.editButton.style.display = "block";
   
                return url.toString();
            },
   
            _onQuickEditButtonClick() {
                const contentLink = this.quickEditButton.getAttribute("data-id");
                if (!contentLink) {
                    console.warn("No contentLink ID found.");
                    return;
                }
   
                require([
                    "episerver-labs-block-enhancements/inline-editing/form-dialog",
                    "episerver-labs-block-enhancements/inline-editing/block-edit-form-container",
                    "episerver-labs-block-enhancements/inline-editing/commands/inline-publish",
                    "dojo/on", "dojo/when", "epi/dependency",
                    "epi-cms/core/ContentReference",
                    "epi-cms/contentediting/ContentActionSupport"
                ], function (
                    FormDialog, FormContainer, InlinePublish,
                    on, when, dependency, ContentReference, ContentActionSupport
                ) {
                    const contentRef = ContentReference.toContentReference(contentLink);
                    const store = dependency.resolve("epi.storeregistry").get("epi.cms.content.light");
   
                    store.get(contentRef).then((content) => {
                        if (!content?.properties) {
                            console.error("Invalid content data", content);
                            return;
                        }
   
                        const dialog = new FormDialog({ title: content.name || "Edit Block" });
                        const form = new FormContainer();
                        const inlinePublish = new InlinePublish();
                        let isDirty = false;
   
                        form.placeAt(dialog.containerNode || dialog.content);
                        const hasPublishAccess = ContentActionSupport.hasAccess(
                            content.accessMask,
                            ContentActionSupport.accessLevel.Publish
                        );
   
                        form.set("contentLink", contentLink).then(() => {
                            form.startup();
                            inlinePublish.set("model", { contentLink, content });
   
                            dialog.show();
                            dialog.setPublishLabel(inlinePublish.label || "Publish");
   
                            on(form, "change", () => {
                                isDirty = true;
                                dialog.togglePublishButton(hasPublishAccess);
                            });
                            function canPublish() {
                                return inlinePublish.get("isAvailable") && inlinePublish.get("canExecute");
                            }
                            on(dialog, "execute", () => form.saveForm());
                            on(dialog, "Publish", function () {
                                var deferred = true;
                                if (isDirty) {
                                    deferred = form.saveForm();
                                }
                                when(deferred).then(function () {
                                    var prePublishDeferred = true;
                                    if (!canPublish()) {
                                        prePublishDeferred = inlinePublish._onModelChange();
                                    }
                                    when(prePublishDeferred).then(function () {
                                        if (canPublish()) {
                                            inlinePublish.execute().then(function () {
                                                dialog.hide();
                                            });
                                        } else {
                                            dialog.hide();
                                        }
                                    });
                                });
                            });
   
                            on(dialog, "hide", () => {
                                form.destroy();
                                inlinePublish.destroy();
                            });
                        });
                    });
                });
            },
   
            _onEditButtonClick() {
                const id = this.editButton.getAttribute("data-id");
                const contextParameters = {
                    uri: `epi.cms.contentdata:///${id}`,
                    context: this
                };
   
                topic.publish("/epi/shell/context/request", contextParameters, {
                    sender: this,
                    forceReload: true
                });
            },
   
            _updateDisplayNode(content) {
                this.inherited(arguments);
   
                if (content) {
                    this.thumbnail.src = this._getThumbnailUrl(content);
                    this.quickEditButton.setAttribute("data-id", content.contentLink);
                    this.editButton.setAttribute("data-id", content.contentLink);
                    domClass.toggle(this.displayNode, "dijitHidden", false);
                } else {
                    this.quickEditButton.style.display = "none";
                    this.editButton.style.display = "none";
                    this.quickEditButton.setAttribute("data-id", null);
                    this.editButton.setAttribute("data-id", null);
                    domClass.toggle(this.displayNode, "dijitHidden", true);
                }
   
                this.stateNode.title = content ? content.name : "";
            },
   
            postCreate() {
                this.inherited(arguments);
                this.query = { query: "getchildren", allLanguages: true };
   
                this.connect(this.quickEditButton, "onclick", this._onQuickEditButtonClick);
                this.connect(this.editButton, "onclick", this._onEditButtonClick);
                this.connect(this.clearButton, "onclick", () => {
                    this.quickEditButton.style.display = "none";
                });
            },
   
            _onButtonClick() {
                if (!this.readOnly) {
                    this.inherited(arguments);
                }
            }
        });
    }); 

   As you could note the file uses 2 templates (style, html (for buttons))

    <div data-dojo-attach-point="inputContainer, stateNode, dropAreaNode" id="widget_${id}"
         class="dijitReset dijitInline dijitInputContainer epi-resourceInputContainer thumbnail-editor">
        <div class="dijitTextBox" data-dojo-attach-point="_dropZone" data-dojo-type="epi-cms/widget/FilesUploadDropZone" data-dojo-attach-event="onDrop: _onDrop" data-dojo-props="outsideDomNode: this.domNode"></div>
        <a class="thumbnail-button dijitTextBox" href="#" data-dojo-type="dijit/layout/_LayoutWidget" data-dojo-attach-point="button" data-dojo-attach-event="onClick: _onButtonClick">
            <figure data-dojo-attach-point="displayNode" class="dijitHidden">
                <img data-dojo-attach-point="thumbnail" />
                <figcaption class="dijitInline dojoxEllipsis">
                    <span data-dojo-attach-point="selectedContentNameNode"></span>
                    <span data-dojo-attach-point="selectedContentLinkNode, resourceName"></span>
   
                </figcaption>
            </figure>
            <div data-dojo-type="dijit/ProgressBar" data-dojo-attach-point="progressBar" data-dojo-props="maximum:100"></div>
            <div data-dojo-attach-point="actionsContainer" class="epi-content-area-actionscontainer">
                <span>${resources.selectimage}</span>
            </div>
        </a>
        <a data-dojo-attach-point="clearButton" href="#" class="epi-clearButton"> </a>
        <a data-dojo-attach-point="quickEditButton" href="#" class="epi-quickEditGoButton epi-editButton dijitIcon dijitTreeIcon epi-iconPenQuick" title="Quick Edit"></a>
        <a data-dojo-attach-point="editButton" href="#" class="epi-editGoButton epi-editButton dijitIcon dijitTreeIcon epi-iconPen" title="Edit"></a>
    </div> 

   And the CSS (I'm not very good at it)

    
    .epi-quickEditGoButton {
        background-color: transparent;
        top: 0px;
        left: 3px;
        cursor: pointer;
        position:absolute;
    }
    .epi-editGoButton {
        background-color: transparent;
        top: 25px;
        left: 3px;
        cursor: pointer;
        position:absolute;
    } 

2. Create a module.config file at the root of the project.
   Please ensure that the name of the dojo module matches; in this case, it should be quickactions.

    <?xml version="1.0" encoding="utf-8"?>
   
    <module>
        <assemblies>
            <add assembly="My.Site" />
        </assemblies>
        <dojo>
            <!-- Dojo loader mapping to ~/DojoModules/Scripts -->
            <add name="quickactions" path="~/DojoModules/Scripts" />
        </dojo>
        <dojoModules>
            <add name="quickactions" path="~/DojoModules/Scripts" />
        </dojoModules>
        <clientResources />
    </module> 

3. Create an editor descriptor that monitors the file and loads the widget.

    [EditorDescriptorRegistration(TargetType = typeof(ContentReference), UIHint = UIHint.Image, EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
    public class ImageLinkDescriptor : ContentReferenceEditorDescriptor<IContentImage>
    {
        private readonly FileExtensionsResolver _fileExtensionsResolver;
   
        public override string RepositoryKey => MediaRepositoryDescriptor.RepositoryKey;
   
        public ImageLinkDescriptor(FileExtensionsResolver fileExtensionsResolver)
        {
            this._fileExtensionsResolver = fileExtensionsResolver;
            ClientEditingClass = "quickactions/editors/ImageLinks";
        }
   
        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            base.ModifyMetadata(metadata, attributes);
            metadata.EditorConfiguration["allowedExtensions"] = this._fileExtensionsResolver.GetAllowedExtensions(typeof(IContentImage), metadata.Attributes);
        }
    }