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

Create linked thumbnail from Image Manager?

11 Answers 123 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 19 Nov 2008, 04:52 PM
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!!

11 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 Nov 2008, 02:58 PM
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.
0
Charles
Top achievements
Rank 1
answered on 20 Nov 2008, 03:02 PM
Hi Rumen,

Where would I put that code? Am I editing the control itself?
0
Charles
Top achievements
Rank 1
answered on 20 Nov 2008, 03:46 PM
That worked perfectly, thank you!


0
Charles
Top achievements
Rank 1
answered on 21 Nov 2008, 06:32 PM
More questions - the code above works great, but it seems to force an absolute path. How would I adapt it for relative pathing?
0
Rumen
Telerik team
answered on 24 Nov 2008, 11:42 AM
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.
0
SEE Global IT Development Team
Top achievements
Rank 2
answered on 01 Dec 2008, 10:15 AM
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.
0
Rumen
Telerik team
answered on 01 Dec 2008, 11:55 AM
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.
0
SEE Global IT Development Team
Top achievements
Rank 2
answered on 01 Dec 2008, 01:10 PM
Hi,
Thank  you!
-Cristina.
0
Daniel Mettler
Top achievements
Rank 2
Iron
answered on 16 Nov 2009, 09:26 AM

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.

0
Rumen
Telerik team
answered on 17 Nov 2009, 02:54 PM
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.
0
Daniel Mettler
Top achievements
Rank 2
Iron
answered on 04 Jan 2010, 09:00 AM
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!
Tags
Editor
Asked by
Charles
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Charles
Top achievements
Rank 1
SEE Global IT Development Team
Top achievements
Rank 2
Daniel Mettler
Top achievements
Rank 2
Iron
Share this question
or