Adding custom class to img tag

feature
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="//assets-meta-cdck-prod-meta.s3.dualstack.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.

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?

3

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

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:

Capture.PNG835×74 4.67 KB

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

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.

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.

7

This was recently changed:
https://github.com/discourse/discourse/commit/9cb088e3f6762df3369e647b1de122edd536fa30

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

3 Likes