Custom ImageProperties Dialog with Additional Fields for Images

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 08 Jun Link to this post

    Requirements

    Telerik Product and Version

    RadEditor 2016 R2

    Supported Browsers and Platforms

    All

    Components/Widgets used (JS frameworks, etc.)



    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>


Back to Top