Using HTMLFormatting and handling image width and height

[Tracey]

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

[Iva Toteva]

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

[Tracey]

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.

 

[Ivailo Karamanolev]

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