1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to Restrict Image Size inside Generic Module

How to Restrict Image Size inside Generic Module

2 posts, 0 answered
  1. briankb
    briankb avatar
    56 posts
    Registered:
    23 Feb 2004
    12 Feb 2008
    Link to this post
    Thanks to the Developers Manual - Modules - Built-In Modules - Generic Content Based Modules - Extending Generic Content code I was able to put the generic content module inside a custom designed user control.

    It works great.

    One problem we have run into is that images added into the editor are shown at full size unless you manually resize them in the editor.

    Is there a way to restrict or auto resize images inserted into the editor within the Generic Content module?

    In this case we designed a container that is about 200px wide and need any images inserted via the editor to be no larger than 180px wide. Other than educating the end user is there anyway we can automate resizing or restrict the image size?
  2. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    12 Feb 2008
    Link to this post
    Hello Briankb,

    There is no way to do that through the interface. However, you can use JavaScript to achieve the same thing.

    To enable this in the Generic Content control, you'll have to edit the EditorTemplate.ascx file which is located in the  ~/Sitefinity/Admin/ControlTemplates/Generic_Content folder. Here is an example how to set the width attribute to all IMG tags in the content area of RadEditor:
    <script type="text/javascript">
    function OnClientSubmit(editor)
    {
        var elems = editor.Document.getElementsByTagName("IMG");  
        for (var i=0; i < elems.length; i++)  
        {  
           elems[i].setAttribute("width","180");
           elems[i].setAttribute("unselectable","on");   
        }                   
    }
    </script>
    <radE:RadEditor ID="RadEditor1"
        OnClientSubmit="OnClientSubmit"
        SaveInFile="true"
        ImagesPaths="~/Images"
        runat="server"> <img alt="" src="http://localhost:3549/editor710/Images/Copy.jpg" unselectable="on">
    </radE:RadEditor>

    You should also modify the Image Manager as described in this article:
    Inserting images with predefined attributes via the Image Manager

    Here is the script you need:

    <script type="text/javascript">
    var imageManagerCommand = RadEditorCommandList["ImageManager"];
    RadEditorCommandList["ImageManager"] = function(commandName, editor, oTool)
    {
        imageManagerCommand (commandName, editor, callBackFn);
       
        function callBackFn(result)
        {
            if (result && result.imagePath)
            {
                var img = document.createElement ("IMG");
                var src = result.imagePath;
                var alt = "ALT_TAG";
                var width = img.width;
                editor.PasteHtml("<img src='" + src + "' style='width:180px;' alt='" + alt + "' />");
            };
        }
    }
    </script>
    I have attached a test EditorTemplate.ascx with similar changes; mind that the width attribute is set to 50px.

    To enable the same for the Generic Content module, modify the following files: ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ControlPanelEdit.ascx ~/Sitefinity/Admin/ControlTemplates/Generic_Content/ControlPanelInsert.ascx.

    Please let us know if you need any further help.

    Greetings,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
2 posts, 0 answered