Dynamically Adding Height & Width to Image Source in ASP.NET

This blog describes to add height and width dynamically to its source of single and multiple images in web form.

Overview

Recently, I was working on a project in which there was a scenario in which I had to add height and width of an image to its source.

I have done it by two methods which are given below:

First Method

In this method, I have the used the jQuery. Following is my scenario:

I have the following html code taken from texteditor:

<p>Hi all<strong>This is nimit</strong>,</p>
<p><img src="http://localhost:27014/uploads/Images/download.jpg" alt="" /></p>
<p>come</p>
<p><img src="http://localhost:27014/uploads/Images/Keynote.jpg." alt="" /></p>
<p>Thanks</p>

Now I have to change the source of image and add height and width to its source with handler. For that, the following jQuery code is useful and easy:

var img = tinymce.get('my_editor').getContent();
var ImageMessage = tinymce.get('my_editor').getContent();

var srcUrl;

$(img).find('img').addBack().filter('img').each(function () {
    var newSrc = jQuery(this).attr('src');
    srcUrl = jQuery(this).attr('src') +
       '.ashx?width=' +
    150 +
    '&height=' + 150;
    jQuery(this).attr('src', srcUrl);
    ImageMessageImageMessage = ImageMessage.replace(newSrc, srcUrl);
});

Now “ImageMessage” have the refined source html.

Second Method

In this method, I have installed the “HtmlAgilityPack” from Package Manager Console from the following code:

Install-Package HtmlAgilityPack -Version 1.4.8

We have following html code:

string input = @"<p>Hi all<strong>This is nimit</strong>,</p><p><img src='http://localhost:27014/uploads/Images/download.jpg' alt="" /></p><p>come</p><p><img src='http://localhost:27014/uploads/Images/Keynote.jpg.' alt="" /></p><p>Thanks</p>";

Now I have to change the source of image and add height and width to its source with handler. For that, the following csharp code is useful and easy:

private string ConvertImagePathToRelative(string input)
{
    string h = string.Empty;
    var htmlDoc = new HtmlDocument();
    htmlDoc.LoadHtml(input);

    foreach (HtmlNode node in htmlDoc.DocumentNode
                                    .SelectNodes("//img[@src and (@width or @height)]"))
    {
        var src = node.Attributes["src"].Value.Split('?');

        node.SetAttributeValue("src",
                                src[0] +
                                string.Format(".ashx?width=150&height=150"));
        h = h + node.OuterHtml;
        var src1 = node.Attributes["src"].Value.ToString();
        input = input.Replace(src[0].ToString(), src1);
    }
    return input;
}

That’s it for this blog.

Summary

So far in this blog we have jQuery and HtmlAgilityPack to add height and width to its source of any image or multiple images. Thanks for reading.