Take the community feedback survey now.

Manoj Kumawat
Jul 18, 2025
  495
(2 votes)

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);
         }
     }
Jul 18, 2025

Comments

Praful Jangid
Praful Jangid Jul 22, 2025 09:35 AM

This looks good. Doing great job. I like the idea and implemation.

Thanks for sharing.

Ravindra S. Rathore
Ravindra S. Rathore Jul 22, 2025 03:43 PM

Good to have quick edit flexibility for the image 

Please login to comment.
Latest blogs
Optimizely CMS Mixed Auth - Okta + ASP.NET Identity

Configuring mixed authentication and authorization in Optimizely CMS using Okta and ASP.NET Identity.

Damian Smutek | Oct 27, 2025 |

Optimizely: Multi-Step Form Creation Through Submission

I have been exploring Optimizely Forms recently and created a multi-step Customer Support Request Form with File Upload Functionality.  Let’s get...

Madhu | Oct 25, 2025 |

How to Add Multiple Authentication Providers to an Optimizely CMS 12 Site (Entra ID, Google, Facebook, and Local Identity)

Modern websites often need to let users sign in with their corporate account (Entra ID), their social identity (Google, Facebook), or a simple...

Francisco Quintanilla | Oct 22, 2025 |

Connecting the Dots Between Research and Specification to Implementation using NotebookLM

Overview As part of my day to day role as a solution architect I overlap with many clients, partners, solutions and technologies. I am often...

Scott Reed | Oct 22, 2025