Image margins

[Julian Roberts]

I need to have granular control of image margins on a per image basis. As such I can't really use CSS selectors to alter the image properties. The outputted HTML from the image dialog needs to be something like

<img src="myimage.gif" style="margin: 3px 9px 4px 6px;" />

Is it possible to customise the Image Dialog to do this? I've looked in the documentation:

ms-help://telerik.aspnetajax.radcontrols.2008.Q1/telerik.aspnetajax.radeditor.2008.Q1/customizing-image-dialog.html

But this doesn't seem right. There isn't a file caled ~\RadControls\Editor\Dialogs\SetImageProperties.ascx

Can the Image Dialog be customised to add margins by myself. If not, can I hire Telerik to build me one?

The functionality required is the same as this:

http://www.wysiwygpro.com/index.php?id=337

Edit an image and see how one can set the margins.

[Rumen]

Hi Julian,

You can easily achieve your scenario using the OnClientPasteHtml event of RadEditor.

The OnClientPasteHtml event is useful in scenarios where the developers need to examine or modify the HTMl to be pasted by an editor tool before it is inserted in the editor content area. Some common cases where the event can be used are:

• Check whether user specified alt attribute for an image - you can use the provided code to add programmatically the desired inline css style: style="margin: 3px 9px 4px 6px;" to the inserted image.
  
• Make modifications to a table being inserted (e.g. set a specific classname, etc)
• Examine or modify a link before it is inserted

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Julian Roberts]

Thanks for the reply Rumen. Ideally, what I need is for the user to be able to define the margins in the Image Properties Dialog box. See this an an example screenshot

http://www.charon.co.uk/images/ed.jpg

The 'distance to surround text' is actually the margins. The user can type in numbers for the top, left, bottom and right. Can this be simulated in the Telerik editor.

[Rumen]

Hi Julian,

The easiest way to achieve your scenario is to use the Style Builder dialog of RadEditor. You can see the attached screenshot and test this live example New Dialogs for more information.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Julian Roberts]

Thanks for the reply Rumen. I've spoken with my boss about the editor. On the whole, he likes it and wants us to use it. But there are issues. Particularly with the way that the editor handles images. Consider the following task:

Task: Add a left-aligned image with padding bottom and left.

Currently, it's a 3 step process:

1. Click on Image Manager icon to open the Image Manager and add the image.
2. Select the image in the editor and click the Image Manager icon to open the Image Properties dialog and set the properties of the image. In this case the left alignment.
3. Select the Style Manager to add padding to the image.

The boss feels this process is counter intuitive. And that all this should happen in just 1 window.

So, when selecting the Image Manager to choose an image, one should be able to set the properties and style (or just padding) of the image all in the same window. Similar to the screenshot I provided in previous message.

Now, we realise that this isn't supported by the editor. What are our options?

1. Could we put in an enhancement request so that this functionality is added to future builds.
2. Could we hire Telerik to build us a custom control that provides this functionality.
3. Do Telerik know of any 3rd party developers that can help on this.

This is a make or break issue for us Rumen. We'd like to have just the 1 window for users to manage images. Can you help us?

[Rumen]

Hi Julian,

For your convenience, I implemented the desired Image Margin and Image Aling features in the Image Manager dialog. In order to enable them in the dialog you should set the  ExternalDialogsPath property, and then copy the ImageManager.ascx file from the EditorDialogs folder in the RadControls distribution to the location you specified for ExternalDialogsPath. Once you have done that, open the ImageManager.ascx and locate the getResult function. Modify the function like this:

getResult : function()
{
    if (this._previewedImage)
    {
        var src = this._currentItem.getUrl();
        src = encodeURI(src);
        this._previewedImage.src = src;
        var returnImage = this._previewedImage.cloneNode(true);
        returnImage.setAttribute("alt", this._altText.value);
        returnImage.removeAttribute("width");
        returnImage.removeAttribute("height");
        returnImage.style.cssText = "";
        returnImage._events = {};
        returnImage.removeAttribute("_events");
        returnImage.removeAttribute("width");
        returnImage.removeAttribute("height");
        //NEW CODE
        var select = document.getElementById("imageAlign");  //get a reference to the language dropdown object
        var selectedIndex = select.selectedIndex;
        returnImage.align = select.options[selectedIndex].value;

        //get reference to the margin fields
        returnImage.style.marginTop = document.getElementById('marginTop').value + "px";
        returnImage.style.marginRight = document.getElementById('marginRight').value + "px";
        returnImage.style.marginLeft = document.getElementById('marginLeft').value + "px";
        returnImage.style.marginBottom = document.getElementById('marginBottom').value + "px";

        //OLD CODE
        return returnImage;
    }
    return null;
}

Scroll below and add the following margin fields and align dropdown:

<tr>
<td>
        <fieldset style="float: left; width: 190px; margin-right: 4px">
            <legend>Margins</legend>
            <ul>
                <li >
                    <label style="padding-right: 45px" for="">
                        Top:</label>
                    <input class="s_input" value="0" id="marginTop" />
                </li>
                <li >
                    <label style="padding-right: 27px" for="">
                        Bottom:</label>
                    <input class="s_input" value="0" id="marginBottom"/>
                   
                </li>
                <li>
                    <label style="padding-right: 46px" for=""  >
                        Left:</label>
                    <input class="s_input" value="0" id="marginLeft" />
                  
                </li>
                <li>
                    <label style="padding-right: 37px" for="">
                        Right:</label>
                    <input class="s_input" value="0"  id="marginRight"/>
                  
                </li>
            </ul>
        </fieldset>
    </td>
</tr>
<tr>
    <td>
        Align:
         <select id="imageAlign">
            <option value="left">left</option>
            <option value="right">right</option>
            <option value="absMiddle">center</option>
            <option value="bottom">bottom</option>
            <option value="top">top</option>
        </select>
    </td>
</tr>

Save the file.

Finally, increase the Image manager dialog size with the following code:

    protected override void OnPreRenderComplete(System.EventArgs e)
    {
        base.OnPreRenderComplete(e);
        DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
        imagePropertiesDialog.Height = Unit.Pixel(900);
        imagePropertiesDialog.Width = Unit.Pixel(900);
    }


You can find attached a sample running project to answer that demonstrates the solution above.

Have a nice weekend,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Julian Roberts]

Excellent, thanks a lot Rumen. I'll look into this.

[Julian Roberts]

I've had a look at this Rumen. Impressive support I must say. It looks like our issues could be resolved. I've some questions for you.

1. When I use the Telerik.Web.UI.dll file from your download, the ExternalDialogs kick in nicely. However, on the production server (the one that has the full licence on it), the External Dialogs don't kick in. Is there an updated file that my server guys can download somewhere?

2. I have my editor control in an ASCX file as opposed to an ASPX file. How can set the height and width of ImageManager Dialog in the ASCX?

3. Ideally, we'd like to have the Margins in the file /editordialogs/SetImageProperties.ascx as well. Is this easy to do?

Thanks a lot for your continued support!

[Rumen]

Hi Julian,

Straight to the points:

1. You are using most likely an older version of RadEditor for ASP.NET AJAX which does not offer the ExternalDialogsPath property. Please, make sure that you are using the latest official Telerik.Web.UI.dll file (v.2008.1 619).
2. You need to put the following code in the codebehind file of the ascx usercontrol:
   
       protected override void OnInit(EventArgs e)
       {
           base.OnInit(e);
           this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
       }
       void Page_PreRenderComplete(object sender, EventArgs e)
       {
           DialogDefinition imagePropertiesDialog = RadEditor1.GetDialogDefinition("ImageManager");
           imagePropertiesDialog.Height = Unit.Pixel(900);
           imagePropertiesDialog.Width = Unit.Pixel(900);
       }
3. You can put the margins option in the Set Image Properties dialog by modifying the following file: \EditorDialogs\SetImageProperties.ascx.
   
   If you experience any problems, just let me know.
   

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Julian Roberts]

Thanks Rumen.