ImageManager Preview Caching

6 posts, 0 answers
  1. Charles
    Charles avatar
    32 posts
    Member since:
    Mar 2008

    Posted 01 May 2013 Link to this post

    I have found an issue where the ImageManager preview panel is caching.

    This occurs when a new image replaces an old one but the preview still displays the old image.

    Due to the way we recognise images on the site where the html is output to we cannot follow this post here which suggests adding a random parameter as it comes out in the RadEditor HTML view.

    I have linked out to the external dialogs but I have been unable to find a location where I can change the preview image to contain the parameter in the url and not have an impact on the url returned by the image manager.
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 May 2013 Link to this post

    Hello Edmund,

    The modification suggested by Rumen in the linked forum thread is in the _initImageItem() function of the dialog - line 346.

    Also there is an attached modified dialog in this thread, have you tried it out?

    Kind regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Charles
    Charles avatar
    32 posts
    Member since:
    Mar 2008

    Posted 07 May 2013 Link to this post

    I have tried the ImageEditor.ascx sample in the other thread but it still has the same issue.

    It resolved the caching problem but it still appends "?param=" to the image src in the html whereas I need it to just contain the clean url to the image without any additional parameters.

    Is there a code modification I can make to the ImageManager.ascx file to append the param but only on the preview and not to return it as the url when closing?

    I am using 2012.2.912.35 if that helps.
  4. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 May 2013 Link to this post

    Hi Edmund,

    You can clear the random parameter appended to the image URL by modifying the dialogs callback function and strip it.

    You can find such approach in the following forum thread:
    http://www.telerik.com/community/forums/aspnet-ajax/editor/how-to-change-the-behaviour-of-the-image-manager-s-insert-button.aspx#1055400

    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Charles
    Charles avatar
    32 posts
    Member since:
    Mar 2008

    Posted 10 May 2013 Link to this post

    I have tried the approach but I am having an issue pasting the html.

    I modify the src of the image and can confirm it is now correct but the "editor.pasteHtml" call does not work as described.

    I have tested it an using editor.pasteHtml('Test'); does insert the work correctly but editor.pasteHtml(result, "ImageManager"); does not work.

    The alert calls correctly and displays the new image src.

    Please see my sample code below:
    function OnClientCommandExecuting(s, e) {
                if (e.get_commandName() == "ImageManager") {
                    var callbackFunction = function (sender, args) {
                        var result = args.get_value();
                       result.src = result.src.substring(0, result.src.indexOf('?'));
                       var editor = $find("<%=cntrlPageContentEditor.ClientID%>");
               alert(result.src);
               editor.pasteHtml(result, "ImageManager");
                    }
      
                    e.set_callbackFunction(callbackFunction);
      
                }
            }
  6. Vessy
    Admin
    Vessy avatar
    1985 posts

    Posted 20 May 2013 Link to this post

    Hello Charles,

    You have to take the outer HTML of the result image, e.g:
    function OnClientCommandExecuting(s, e) {
        if (e.get_commandName() == "ImageManager") {
            var callbackFunction = function (sender, args) {
                var result = args.get_value();
                result.src = result.src.substring(0, result.src.indexOf('?'));
                var editor = $find("<%=cntrlPageContentEditor.ClientID%>");
                result = Telerik.Web.UI.Editor.Utils.getOuterHtml(result);
                editor.pasteHtml(result, "ImageManager");
            }
     
            e.set_callbackFunction(callbackFunction);
        }
    }

    Additionally, if you are using the RadControls version from Q1 2013 or a newer build, you will need to replace result with result[0]:
    function OnClientCommandExecuting(s, e) {
        if (e.get_commandName() == "ImageManager") {
            var callbackFunction = function (sender, args) {
                var result = args.get_value();
                result[0].src = result[0].src.substring(0, result[0].src.indexOf('?'));
                var editor = $find("<%=cntrlPageContentEditor.ClientID%>");
                result[0] = Telerik.Web.UI.Editor.Utils.getOuterHtml(result[0]);
                editor.pasteHtml(result[0], "ImageManager");
            }
      
            e.set_callbackFunction(callbackFunction);
        }
    }

    Please, give it a try and let me know how it goes.

    Regards,
    Veselina Raykova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top