Using HTMLFormatting and handling image width and height

4 posts, 0 answers
  1. Tracey
    Tracey avatar
    34 posts
    Member since:
    Feb 2011

    Posted 05 Apr 2011 Link to this post

    Hi I am using the RadRichTextBox as a html editor and using the following to format the html

     

     

     

    HtmlFormatProvider htmlFormatProvider = new HtmlFormatProvider();
    HtmlExportSettings settings = new HtmlExportSettings { ImageExportMode = ImageExportMode.ImageExportingEvent, DocumentExportLevel = DocumentExportLevel.Fragment, StylesExportMode = StylesExportMode.Inline };
    settings.ImageExporting += (s, e) =>
    {
        e.Src = e.Image.UriSource.ToString();
        e.Alt = "image";
        // TODO Prob can't put width and height in.....
    };
    htmlFormatProvider.ExportSettings = settings;
    HtmlData.FormatProvider = htmlFormatProvider;

    Where HtmlData is the HtmlDataProvider

     

    When I add an image to the rich text box I do the following

    ImageInline  img = new ImageInline();
    img.UriSource = new Uri(SelectedImage.Url, UriKind.Absolute);
    img.Width = maxwidth;
    richTextBox.InsertInline(img);

     

    For large images I want to reset the width so they will display on the page. My question is is there a way to set the width and height of the image so that it gets set in the img tag so when I read the html the image is displayed at the set width.

    I thought perhaps putting the image into a Span or Inline and setting the width of that might do the job but I can't see how to set the width of these (I thought it might be in the Style but can't find it...)

     

    Hope this makes sense

     

    Kind Regards
    Tracey

  2. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts

    Posted 08 Apr 2011 Link to this post

    Hello Tracey,

    If you set the width of the image when you are inserting it, it will get properly exported in the HTML.
    As for why the approach you mention is not applicable: Spans can contain only text , so you cannot add an image to a span. The document is split into spans according to its formatting - adjacent spans with similar formatting are merged and vice versa, when you have some text with uniform formatting and change the font size, fore color or any other property of a part of it, the span gets split into 2 or 3 others. That is why it won't make much sense to set a Height or Width to a span.
    In my opinion, the best approach would be to set the width and height of the image at the time of the insertion, like this:

    ImageInline img = new ImageInline();
    img.UriSource = new System.Uri(url, UriKind.Relative);
     
    if (img.Width > maxwidth)
    {
        double heightWidthRatio = img.Height / img.Width;
        img.Width = maxwidth;
        img.Height = maxwidth * heightWidthRatio;
    }
    radRichTextBox1.InsertInline(img);

    The images will be exported with these setting and will be imported back properly.
    If you are loading external HTML files that can contain larger images, you can traverse the document, find them and reset their size like this:
    private void ResizeAllImagesInDocument()
    {
        int maxwidth = 100;
        foreach (var image in this.radRichTextBox1.Document.EnumerateChildrenOfType<ImageInline>())
        {          
            if (image.Width > maxwidth)
            {
                double heightWidthRatio = image.Height / image.Width;
                image.Width = maxwidth;
                image.Height = maxwidth * heightWidthRatio;
            }
        }
    }

    I hope that helps.

    Greetings,
    Iva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Tracey
    Tracey avatar
    34 posts
    Member since:
    Feb 2011

    Posted 08 Apr 2011 Link to this post

    Hi Iva

    Thanks for getting back to me. I'm afraid this doesn't really answer my question it only addresses the issue of sizing the image in the RadRichTextBox . I am using the telerik RadRichTextBox as a html editor to for a html website. The <img> tag that gets saved doesn't contain any width or height information so when the html is being shown on the website the image is displayed at it's actual (sometimes massive) size.

     


  4. Ivailo Karamanolev
    Admin
    Ivailo Karamanolev avatar
    276 posts

    Posted 12 Apr 2011 Link to this post

    Hi Tracey,

    We have discovered an issue where the widths and heights of images exported with URI src instead of Base64 encoded data are not present in the HTML. This has been fixed and the changes will be visible in the service pack to be released in the next few days.

    Greetings,
    Ivailo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top