This is a migrated thread and some comments may be shown as answers.

[Solved] Customize "Properties" for Images

7 Answers 131 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Chase Florell asked on 07 Jan 2010, 07:20 PM

I'm wondering if there is any way to customize the properties for Images within the RadEditor.

Currently if I insert an image, and then right click on it and select "Properties", there are some generic properties like description, dimensions, etc

What I'd like to be able to do is add a checkbox and a couple textboxes to the properties.

[ ] Enable Lightbox
[ ] Lightbox Group

If the checkbox is checked, then I would change

    
            <img src="myfile.jpg" />

to something like

    
            <a href="myfile.jpg" rel="lightbox[GROUPNAME]"><img src="myfile.jpg" /></a>

Is this something that can be built quite easily?

7 Answers, 1 is accepted

Accepted

answered on 11 Jan 2010, 04:31 PM

customdialogforlightbox.zip

Hi Chase,

Yes, RadEditor provides functionality to modify its built-in dialogs and/or use custom dialogs.
Information regarding this functionality is available in the following help article and live demo:
Add Custom Dialogs / Add Custom Dialogs Live Demo
Customize Built-in Dialogs

In your scenario the dialog that have to be modified is SetImageProperties.ascx

However, I would suggest you to create a custom dialog to enable lightbox preview for an image because this requires wrapping the image with <a> tag and SetImageProperties dialog is modifying image's DOM element.

For your convenience I have attached a sample project with a custom dialog that enables/disables LightBox for an image.

Kind regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 11 Jan 2010, 09:43 PM

Ok so I am still having one "VERY SMALL" problem. This isn't a deal breaker, just annoying.

When I insert a new image, and click on the EnableLightBox tool for the first time

The Form is prepopulated with the following info

Enable Lightbox: [ checked ]
Lightbox Group: [ 8.0 ]

what I want it to look like is

Enable Lightbox: [ ]
Lightbox Group: [ ]

I have gone through the javascript and can't seem to find the answer.

    
            <body class="body"> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Path="~/App_Assets/Scripts/Admin.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> 
        
                <div class="Content-Area" style="height:100%"> 
        
                    <table> 
        
                        <tr> 
        
                            <td> 
        
                                <label for="EnableLightBox"> 
        
                                    Enable Lightbox:</label></td> 
        
                            <td> 
        
                                <input type="checkbox" id="EnableLightBox" onchange="javascript:toggleGroupname();" /></td> 
        
                        </tr> 
        
                        <tr> 
        
                            <td> 
        
                                <label for="LightBoxGroupname"> 
        
                                    Lightbox Group:</label></td> 
        
                            <td> 
        
                                <input type="text" id="LightBoxGroupname" /></td> 
        
                        </tr> 
        
                        <tr> 
        
                            <td colspan="2" style="text-align: right;"> 
        
                                <input type="button" onclick="javascript:applyChanges();" value="Submit" /></td> 
        
                        </tr> 
        
                    </table> 
        
                </div> 
        
                <script type="text/javascript"> 
        
                    //<![CDATA[    
        
                    if (window.attachEvent) {
        
                        window.attachEvent("onload", initDialog);
        
                    }
        
                    else if (window.addEventListener) {
        
                        window.addEventListener("load", initDialog, false);
        
                    }
        
                    var EnableLightBox = document.getElementById("EnableLightBox");
        
                    var LightBoxGroupname = document.getElementById("LightBoxGroupname");
        
                    var closeArguments = null;
        
                    function getRadWindow() {
        
                        if (window.radWindow) {
        
                            return window.radWindow;
        
                        }
        
                        if (window.frameElement && window.frameElement.radWindow) {
        
                            return window.frameElement.radWindow;
        
                        }
        
                        return null;
        
                    }
        
                    function initDialog() {
        
                        var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
        
                        if (clientParameters.tagName == "A") EnableLightBox.checked = true;
        
                        clientParameters.rel.match(/lightbox\[(.*)\]/gi); //match LightBox groupname
        
                        LightBoxGroupname.value = RegExp.$1; // $1 is the result of previous match
        
                    }
        
                    function applyChanges() //fires when the Insert Link button is clicked
        
                    {
        
                        var clientParameters = getRadWindow().ClientParameters;
        
                        closeArguments = EnableLightBox.checked ? getRadWindow().ClientParameters : getRadWindow().ClientParameters.childNodes[0];
        
                        clientParameters.rel = "lightbox[" + LightBoxGroupname.value + "]";
        
                        getRadWindow().close(closeArguments); //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.
        
                    }
        
                    function toggleGroupname() {
        
                        LightBoxGroupname.disabled = !EnableLightBox.checked;
        
                    }
        
                    //]]> 
        
                </script> 
        
                </form> 
        
            </body>

answered on 12 Jan 2010, 12:02 PM

Hi Chase,

I have made a few modifications to initDialog() function to fix those issues. Here is the new source code:

function initDialog()

{

var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page

if (clientParameters.rel.match(/lightbox\[(.*)\]/gi)) {

EnableLightBox.checked = true;

LightBoxGroupname.value = RegExp.$1; // $1 is the result of previous match

} else {

LightBoxGroupname.value = '';

}

toggleGroupname();

}

Kind regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Solved] Customize &quot;Properties&quot; for Images

7 Answers, 1 is accepted

[Solved] Customize "Properties" for Images