Custom ImageProperties Dialog with Additional Fields for Images

PROJECT DESCRIPTION 
The project here illustrates how add additional fields for the inserted image to consume. This example here adds the additional  max-width, min-width, max-height and min-height CSS properties.

Note that these modification will take place not only in ImageProperties dialog, but in ImageManager (Properties tab) too. Additional decoration according to the used Skin and rendering might be needed. 

Implementation steps:

1. Customize the built-in ImageProperties dialog by using the SetImageProperties.ascx file and copy it in EditorDialogs folder in your project;
2. Set the ExternalDialogsPath property to "~/EditorDialogs";
3. Add the HTML for the new fields:
   
   SetImageProperties.ascx:687:
   <div class="redRow">

       <div class="redConstrainWrapper redConstrainToggle">

           <label class="redLabel" for="ImageMaxWidth">

               Max Width

           </label>

           <input type="text" id="ImageMaxWidth" />

           <label class="redLabel" for="ImageMinWidth">

               Min Width

           </label>

           <input type="text" id="ImageMinWidth" />

    

           <label class="redLabel" for="ImageMaxHeight">

               Max Height

           </label>

           <input type="text" id="ImageMaxHeight" />

           <label class="redLabel" for="ImageMinHeight">

               Min Height

           </label>

           <input type="text" id="ImageMinHeight" />

       </div>

   </div>
   
   
4. Assign corresponding instances in the _setupChilder method:
   
   SetImageProperties.ascx:440:
   this._imageMaxWidth = $get("ImageMaxWidth");

   this._imageMinWidth = $get("ImageMinWidth");

   this._imageMaxHeight = $get("ImageMaxHeight");

   this._imageMinHeight = $get("ImageMinHeight");
   
   
5. Load the values from the image selected in the HTML fields:
   
   SetImageProperties.ascx:142:
   this.loadMaxMinSize(this._originalImage);
   
   SetImageProperties.ascx:113:
   loadMaxMinSize: function (originalImage) {

    

       var imageMaxWidth = $telerik.$(originalImage).css("max-width");

       var imageMinWidth = $telerik.$(originalImage).css("min-width");

       var imageMaxHeight = $telerik.$(originalImage).css("max-height");

       var imageMinHeight = $telerik.$(originalImage).css("min-height");

    

       this._imageMaxWidth.value = (imageMaxWidth && (imageMaxWidth === "none")) ? "" : imageMaxWidth;

       this._imageMinWidth.value = (imageMinWidth && (imageMinWidth === "0px")) ? "" : imageMinWidth;

       this._imageMaxHeight.value = (imageMaxHeight && (imageMaxHeight === "none")) ? "" : imageMaxHeight;

       this._imageMinHeight.value = (imageMinHeight && (imageMinHeight === "0px")) ? "" : imageMinHeight;

   },
   
   
6. Process the HTML fields in getModifiedImage method to update the image selected:
   
   SetImageProperties.ascx:333:
   
   this._setDimensionAttribute(resultImage, "max-width", this._imageMaxWidth.value);

   this._setDimensionAttribute(resultImage, "min-width", this._imageMinWidth.value);

   this._setDimensionAttribute(resultImage, "max-height", this._imageMaxHeight.value);

   this._setDimensionAttribute(resultImage, "min-height", this._imageMinHeight.value);
7. Improve the height of the dialog to fit the new design (the styles are for Default skin if you are using different skin or rendering make sure to further adjust the CSS):
   
   SetImageProperties.ascx:649:
   <style>

       html.redImageProperties,

       html.redImageProperties body  {

           height: 460px;

       }

   </style>