Adding custom class to img tag


(Mike) #1

Continuing the discussion from Suggestion: borders for images:

Is there a way to add a class to the img tag that would then allow me to easily add this optionally? For example, if I could do something like:
<img src="//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/1/2/12d989f3eb62252a244e170ef6f9b9e4288c5c63.JPG" width=“508” height=“68” class=“borderon”>

Then I could be able to really easily add the custom CSS to add borders just to that class.


(Michael Downey) #2

I guess you could just add this manually, right? (Both in your post and in your CSS customizations. I haven’t tried.)

If it works then maybe something simple like a check box for borders in the upload UI could do the same thing?


(Mike) #3

I tried adding it to the post manually and it seems to get stripped out…


(Mike) #4

Two screenshots…one of the above post in edit mode…

So you can see that I’ve added a class to the tag.

Then another screenshot of me doing inspect element where the class is gone from the tag:

I’m sure this is intentional, but not sure if there’s a way to workaround it.


(Fazilet özer) #5

We are having the same issue. Can you guys confirm there is a bug? We were able to add custom classes to images before but now when we create a new topic it is removed.


(Stephen Chung) #6

There is a new MarkDown editor and I think it only allows certain tags and attributes…

class may not be one of them and may be stripped.

If you just want a border on all your included images, what’s wrong with:

.cooked img {
    border: go-wild;
}

or something similar? But of course, you’ve got to handle the emoji’s.


(Joshua Rosenfeld) #7

This was recently changed:

As there wasn’t a restriction on classes, it would have been possible to do something like this: