Create linked thumbnail from Image Manager?

[Charles]

Hi - I see references here in the forum to making image thumbnails, but I cannot for the life of me find a way to enable this functionality.

Here's what I want:

1. User hits the image manager button in the toolbar, gets the image manager dialog. 
2. User chooses image
3. User either hits Image Editor button or some other "make thumbnail" button (doesn't matter to me)
4. Thumbnail is created
5. Image is placed as thumbnail with appropriate <a> tags to link to full-sized version

Step 5 is where I'm getting hung-up - I don't see any means of creating the link, short of hitting the link manager and manually entering the URL for the full-size image - that's too complicated for my end-users, I need an automatic or visual method. Seems like this is supposed to be a feature of the image manager. (At the very least, it should be.)

How do I do this?

Thank you!!

[Rumen]

Hi Charles,

Currently, the Image Editor does not offer the requested thumbnail link feature, but I logged your future request in our ToDo list for consideration.

If you would like you can implement the thumbnail linking to the original image functionality using the new OnClientPasteHtml event of RadEditor. Here is an example:

<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();

    if (commandName == "ImageManager")
    {
        var div = document.createElement("DIV");

        Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div,value);

        var img = div.firstChild;
        var src = img.src;
        var thumb = src.substring(src.lastIndexOf("_"));
        var imgTag = div.innerHTML;
       
        if (thumb == "_thumb.jpg")
        {
            args.set_value("<a href='" + src.replace(/\_thumb/gi,'') + "'>" + imgTag + "</a>");
        }
        else imgTag;
    }
}
</script>
<telerik:RadEditor runat="server"
    OnClientPasteHtml="OnClientPasteHtml"
    ImageManager-ViewPaths="~/Images" ImageManager-UploadPaths="~/Images"
    ID="RadEditor1">
</telerik:RadEditor>


Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Charles]

Hi Rumen,

Where would I put that code? Am I editing the control itself?

[Charles]

That worked perfectly, thank you!

[Charles]

More questions - the code above works great, but it seems to force an absolute path. How would I adapt it for relative pathing?

[Rumen]

Hi Charles,

You can use the following script to insert relative path:

<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();

    if (commandName == "ImageManager")
    {
        var div = document.createElement("DIV");

        Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div,value);

        var src = div.childNodes[0].getAttribute("src",2);
        var thumb = src.substring(src.lastIndexOf("_"));
        var imgTag = div.innerHTML;
      
        if (thumb == "_thumb.jpg")
        {
            args.set_value("<a href='" + src.replace(/\_thumb/gi,'') + "'>" + imgTag + "</a>");
        }
        else imgTag;
    }
}
</script>
<telerik:RadEditor runat="server"
    OnClientPasteHtml="OnClientPasteHtml"
    ImageManager-ViewPaths="~/Images" ImageManager-UploadPaths="~/Images"
    ID="RadEditor1">
</telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[SEE Global IT Development Team]

Hi,
I would like to know where should I paste that code. In the asp page where the editor is?? Javascript in a webpart and the other bit in the asp file?
Thanks!
-Cristina.

[Rumen]

Hi Cristina,

You should open the wpresources\RadEditorSharePoint\5.x.x.x__1f131a624888eeed\Resources\ MOSSEditorTools.js file and put the javascript code in it. After that open the respective ConfigFile (ConfigFile.xml or ListConfigFile.xml) and set the custom function to be executed on the OnClientLoad event e.g.

<property name="OnClientPasteHtml">OnClientPasteHtml</property>  

Save the files, clear the browser's cache and review the result.

You can find more information here.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[SEE Global IT Development Team]

Hi,
Thank  you!
-Cristina.

[Daniel Mettler]

Rumen, a year ago you wrote this is in your ToDo list for consideration.

Whats the status? We have more than two hundred DotNetNuke customers using this feature since RadEditor 5.

[Rumen]

Hi Daniel,

We will do our best to add an option in the next Service Pack release for the thumbnail linking to the original image. The option will be in the image properties tab of the Image Manager dialog.

Best regards,
Rumen
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.

[Daniel Mettler]

Thanks for adding "Added ability to link thumbnails to the original image in the Image Manager dialog" in RadControls for ASP.NET AJAX 2009.3 1208!