Create linked thumbnail from Image Manager?

12 posts, 0 answers
  1. Charles
    Charles avatar
    19 posts
    Member since:
    Sep 2008

    Posted 19 Nov 2008 Link to this post

    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!!
  2. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 20 Nov 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Charles
    Charles avatar
    19 posts
    Member since:
    Sep 2008

    Posted 20 Nov 2008 Link to this post

    Hi Rumen,

    Where would I put that code? Am I editing the control itself?
  5. Charles
    Charles avatar
    19 posts
    Member since:
    Sep 2008

    Posted 20 Nov 2008 Link to this post

    That worked perfectly, thank you!


  6. Charles
    Charles avatar
    19 posts
    Member since:
    Sep 2008

    Posted 21 Nov 2008 Link to this post

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

    Posted 24 Nov 2008 Link to this post

    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.
  8. SEE Global IT Development Team
    SEE Global IT Development Team avatar
    7 posts
    Member since:
    Nov 2008

    Posted 01 Dec 2008 Link to this post

    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.
  9. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 01 Dec 2008 Link to this post

    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.
  10. SEE Global IT Development Team
    SEE Global IT Development Team avatar
    7 posts
    Member since:
    Nov 2008

    Posted 01 Dec 2008 Link to this post

    Hi,
    Thank  you!
    -Cristina.
  11. Daniel Mettler
    Daniel Mettler avatar
    20 posts
    Member since:
    Apr 2003

    Posted 16 Nov 2009 Link to this post

    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.

  12. Rumen
    Admin
    Rumen avatar
    12848 posts

    Posted 17 Nov 2009 Link to this post

    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.
  13. Daniel Mettler
    Daniel Mettler avatar
    20 posts
    Member since:
    Apr 2003

    Posted 04 Jan 2010 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017