# Ajouter un ID ou une CLASS à une image (dans un message)

**URL:** https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740
**Category:** Support
**Created:** [Avril 11, 2019, 9:22 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740 "2019-04-11T09:22:53Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![DigitalStartup](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/digitalstartup/32/118242_2.png) [@DigitalStartup](https://meta.discourse.org/u/DigitalStartup)
#### Post date: [Avril 11, 2019, 9:22 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/1 "2019-04-11T09:22:53Z")

</div>

My goal is to add some banners to Not Logged In Users within a post. The CSS works great, but I can’t apply it to any images within the post.

Is there currently a way to add an ID or CLASS to an image (within a post)? So far I have tried:

```
![Title|690x85](/image.png#example)

```

And I’ve tried putting in raw HTML

```
<img id="example" src="image.png" alt="image" width="690" height="85">

```

Both methods result in the ID or CLASS being stripped out of the actual rendering of the page.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [Avril 11, 2019, 9:32 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/2 "2019-04-11T09:32:41Z")

</div>

You can’t by default. There’s only a few attributes that are whitelisted for `<img>` tags. You can find those here:

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L170-L173](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L170-L173)

Whitelisting specific classes can be done but would require a plugin.

How often do you plan on using this? You might be able to make something work with a theme component but the implementation will depend on your use case. Can you share a specific example of what you’re trying to do?

for example, you can wrap the image in something like

```plaintext
<div data-theme-banners>
  <img src='foo'>
</div>

```

then you can use the selector

```plaintext
[data-theme-banners] img

```

---

<div class="post-metadata">

### Author: ![DigitalStartup](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/digitalstartup/32/118242_2.png) [@DigitalStartup](https://meta.discourse.org/u/DigitalStartup)
#### Post date: [Avril 11, 2019, 9:53 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/3 "2019-04-11T09:53:17Z")

</div>

So, it looks like the ID is being stripped out my DIV as well.

```plaintext
<div id="example">
    <a href="#">
        <img src="image.png" alt="image" width="690" height="85">
    </a>
</div>

```

This was the end goal I was attempting. Which is done. I just don’t want it to appear to logged in users, which is where I was relying on the CSS

 ![fw](https://global.discourse-cdn.com/meta/original/3X/2/4/24ba662f6fe707999f6ad6f2cec444e1cb367606.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [Avril 11, 2019, 10:58 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/4 "2019-04-11T10:58:08Z")

</div>

> [@DigitalStartup](#):
>
> it looks like the ID is being stripped out my DIV as well.

Correct, `<div>` tags also have very specific properties that are whitelisted. Those can be found here:

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L141-L152](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L141-L152)

That file - it is the same one from my earlier post - contains all the whitelisted markup allowed in the composer so have a look around to see what is allowed. Anything not on that list will be stripped out to prevent abuse.

> [@DigitalStartup](#):
>
> I just don’t want it to appear to logged in users

The `<html>` tag has a CSS class added to it to when the user is not logged in. That class is `anon`. You can use that class to selectively show the banners. So something like this in your post:

```plaintext
<div data-theme-banners>
  <a href="#">
    <img src="foo">
  </a> 
</div>

```

and this in your theme

```plaintext
html:not(.anon) .cooked [data-theme-banners] {
  display: none;
}

```

and that would ensure that the element is only visible to users who are not logged in.

---

<div class="post-metadata">

### Author: ![DigitalStartup](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/digitalstartup/32/118242_2.png) [@DigitalStartup](https://meta.discourse.org/u/DigitalStartup)
#### Post date: [Avril 11, 2019, 11:04 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/5 "2019-04-11T11:04:01Z")

</div>

Sir, you are a legend.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Mai 11, 2019, 11:11 UTC](https://meta.discourse.org/t/add-an-id-or-class-to-an-image-within-a-post/114740/6 "2019-05-11T11:11:32Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
