Try Now
More in this section
Blogs RSS feed

Extend RadEditor dialogs to add captions for images

by Radoslav Georgiev
This post is inspired by a customer request to provide functionality for adding captions to images inserted through the RadEditor when creating/editing content items. In order to achieve this we will need to work with the external templates for Sitefinity controls. We have to map all templates for controls in which we want this option. Before proceeding with this post, please take a look at the following KB article if you are unsure how to work with external templates: How to map a view to an external template, in Sitefinity 3.6 or later?


Now lets take the Generic Content control template (~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx) and map it in the controls config xml file, then restart the website:

<?xml version="1.0" encoding="utf-8"?> 
       <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" /> 


We would also need to provide a path for external dialogs for the RadEditor. Create a folder ~/Sitefinity/Admin/ControlTemplates/CustomEditorDialogs and set the RadEditor ExternalDialogsPath property:


The next step is to provide an external layout template for the ImageEditorDialog control. To do this open ~/Sitefinity/UserControls/Dialogs/ImageEditorDialog.aspx and modify the markup of the ImageEditorDialog:

<lib:ImageEditorDialog runat="server" DisplayMode="Images"  

Now we need to add a text box to input image caption text and modify the JavaScript in the layout template to return both the image and caption text. Open ~/Sitefinity/Admin/ControlTemplates/Libraries/Dialogs/ImageEditorDialog.ascx and edit the markup like this:

<div class="uploadedImageData">      
                    <asp:Label ID="Label2" runat="server" Text="<%$Resources:AlternativeText %>" AssociatedControlID="altTxt"></asp:Label> 
                    <asp:TextBox runat="server" ID="altTxt"></asp:TextBox> 
                    <class="example"><asp:Literal ID="Literal7" runat="server" Text='<%$Resources:AlternativeExample %>'></asp:Literal></p
                    <class="example"><asp:Literal ID="Literal8" runat="server" Text='<%$Resources:AlternativeDesc %>'></asp:Literal></p
                    <asp:Label ID="captionLabel" runat="server" text="Caption" AssociatedControlID="captionTxt"></asp:Label> 
                    <asp:TextBox runat="server" ID="captionTxt"></asp:TextBox>                 

Then modify the JavaScript function which returns the selected image, this function is called insertLink():

<script type="text/javascript"
    var currentElement = document.createElement("img"); 
    //create div element 
    var divElement = document.createElement("div")
    function insertLink() //fires when the Insert Link button is clicked 
        var closeArgument = currentElement; 
        //create new div element 
        var div = divElement; 
        var captionTxt = document.getElementById('<%=captionTxt.ClientID %>'); 
        selValue = document.getElementById('<%= selectedValueField.ClientID %>'); 
        editHolder = document.getElementById('<%= editHolder.ClientID %>'); 
        var uplImg = document.getElementById('<%= uploadedImage.ClientID %>'); 
        if (editHolder.style.display == 'none') { 
            if (selectedItem) 
                closeArgument.alt = selectedItem.altText; 
                closeArgument.alt = ''
            closeArgument.src = selValue.value; 
        else { 
            var altTextTxt = document.getElementById('<%= altTxt.ClientID %>'); 
            closeArgument.src = selValue.value; 
            if (altTextTxt) 
                closeArgument.alt = altTextTxt.value; 
        if (selValue.value.indexOf("~/") == 0) { 
            closeArgument.setAttribute("sfref", selValue.value); 
        } else if (selectedItem != undefined && selectedItem.unresolved) { 
            closeArgument.setAttribute("sfref", selectedItem.unresolved); 
        } else if (uplImg != undefined && uplImg.attributes["sfref"] != undefined) { 
            closeArgument.setAttribute("sfref", uplImg.attributes["sfref"].value);           
            var imgSrc = uplImg.src; 
            if(imgSrc.indexOf("?") < 0){ 
                closeArgument.src = imgSrc; 
                closeArgument.src = imgSrc.slice(0, imgSrc.indexOf("?")); 
        } else { 
        //add image to div 
        //optional assign class name to containing div 
        div.className = "ImageBox"
        var caption = document.createTextNode(captionTxt.value); 
        var span = document.createElement("span"); 
        //optional assing class name to span containing caption text 
        span.className = "CaptionText"
        //adds the text from textbox to the containing span 
        var br = document.createElement("br"); 
        //add span to the containing div 
            var radWindow = getRadWindow(); 
        //return the div as return argument of the radWindow 
        radWindow.argument = div; 
        radWindow.close(div); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page. 

As the inline comments say you can assign CSS class names to the image containing div and the span containing the caption text. Then add rules in your themes to style the caption. See attached image for the result of our customizations.

 Insert image with caption

Once we are done with customizations for inserting captions we also have to modify the dialog which is used for setting image properties. This is the reason why we mapped a path for external dialogs for the RadEditor. In the file attachment you will find the external dialog we are editing (~/Sitefinity/Admin/ControlTemplates/CustomEditorDialogs/SetImageProperties.ascx). Open this file and first edit the markup to add a text box for the image caption:

                    <td class="reLabelCell" style="width: 120px;"
                        <label class="reDialogLabel" for="CaptionTxt"
                            <span style="text-align: right;"
                    <td class="reControlCell"
                        <input type="text" id="CaptionTxt" style="width: 165px;" /> 

Then we need to add some JavaScript to first load the already inserted caption text. Add this to the loadImageProperties function:

loadImageProperties: function(originalImage) { 
        this._imageAlt.value = this._getAttribute(currentImage, "alt"); 
        this._imageLongDecs.value = this._getAttribute(currentImage, "longDesc"); 
        //populate the Caption textbox 
        $get('CaptionTxt').value = originalImage.parentElement.lastChild.innerText; 

Then we need to save the caption text once the OK button has been clicked. Modify the getModifiedImage function:

getModifiedImage: function() { 
        this._setAttribute(resultImage, "alt"this._imageAlt.value); 
        this._setAttribute(resultImage, "longDesc"this._imageLongDecs.value); 
        //set the new value of the caption text 
        this._originalImage.parentElement.lastChild.innerText = $get('CaptionTxt').value; 


Now the dialog for setting image properties will look like this:

 Set image properties dialog

You can download the sample markup and JavaScript code from this link: CustomEditorDialogs

More information on working with external dialogs for the RadEditor can be found here: RadEditor ExternalDialogsPath property.

1 comment

Leave a comment
  1. KingKong Jan 14, 2010
    I followed the post and this works like a charm

    Leave a comment