Dynamically add class to img tag from entire HTML

Question

I have an rich editor which adds text and images,to make the images responsive

class="img-thumbnail"

is needed in all the image tags,so have used HtmlAgility pack to extract image tags from entire Html but how to add the class on each image tag.

Example

Input from html after extracting image tag

<img src="http://domain.com/images/image1.jpg">

Expected

<img src="http://domain.com/images/image1.jpg" class="img-thumbnail">

Code

 public string ParseImage(string pHtml)
    {

        HtmlDocument doc = new HtmlDocument();
        doc.LoadHtml(pHtml);
        var imgs = doc.DocumentNode.SelectNodes("//img");

        foreach (var item in imgs)
        {
            string orig = item.Attributes["src"].Value;
            //Add class to each img tag.
        }
      }

Why are you not doing this with javascript? – Divyang Desai Sep 25 '16 at 15:16 — Divyang Desai, Sep 25 '16 at 15:16
Cant use javascript as Hosting server doesn't supports it. – Dave Sep 25 '16 at 15:19 — Dave, Sep 25 '16 at 15:19

Erik Simonic · Accepted Answer · 2016-09-25T15:55:24.983

1

I guess the problem lies in that you need to save the HTML before you display it. Otherwise HTML Agility Pack sometimes omits the changed attributes.

public string ParseImage(string pHtml)
{

   HtmlDocument doc = new HtmlDocument();
   doc.LoadHtml(pHtml);
   var imgs = doc.DocumentNode.SelectNodes("//img");

    foreach (var item in imgs)
    {
        //string orig = item.Attributes["src"].Value;
        item.SetAttributeValue("class", "img-thumbnail");
        //Add class to each img tag.
    }
    using(StringWriter tw = new StringWriter ()){
        doc.Save(tw);
        return tw.ToString();
    }
 }

edited Sep 25 '16 at 15:55

answered Sep 25 '16 at 15:20

Erik Simonic

457
3
13

how do I add class="img-thumbnail" in img tag,can't create object of TextWriter as its an abstract class. – Dave Sep 25 '16 at 15:26
Hi I have edited my response, just replace TextWriter with StringWriter – Erik Simonic Sep 25 '16 at 15:47
Ok. but getting required how Do i add class in img tag. – Dave Sep 25 '16 at 15:52
Edited, you shuld use SetAttributeValue – Erik Simonic Sep 25 '16 at 15:58

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

You can add attributes to all your image tags in css like this

.img-thumbnail
{
  // your class property
}

img {
.img-thumbnail
}

Here is a similar question.

I want to apply an existing CSS style to all labels on a page. How?

edited May 23 '17 at 10:34

Community

1
1

answered Sep 25 '16 at 15:02

CopyPasterino

170
11

What kind of var does imgs become? – CopyPasterino Sep 25 '16 at 15:15
var is just a variable declared dynamically,that's it. – Dave Sep 25 '16 at 15:19
Yes but what kind of element does it become in this instance when you declare it that way? Just trying to see what kind of built in methods you could use on that type. – CopyPasterino Sep 25 '16 at 15:23
@CopyPasterino, Are you sure, is this correct answer, as per as i know you can add property not class in this way – Divyang Desai Sep 25 '16 at 15:27
Not understanding what your trying to say. how do I add class="img-thumbnail" in img tag – Dave Sep 25 '16 at 15:27
@Div Not positive and I'm not on my computer to test but a work around if you can not would be to take the css you have for .img-thumbnail and apply it to all of the buttons instead of adding the class to them all – CopyPasterino Sep 25 '16 at 15:32
Thanks for your time and help. – Dave Sep 25 '16 at 16:39

Dynamically add class to img tag from entire HTML

2 Answers2