The discussion revolves around adding an ID or CLASS to an image within a post. DigitalStartup is trying to apply CSS to an image, but the ID or CLASS is being stripped out. Johani explains that only a few attributes are whitelisted for <img> tags and that whitelisting specific classes requires a plugin.
Johani suggests an alternative solution by wrapping the image in a <div> with a custom attribute and targeting it with a CSS selector. However, DigitalStartup finds that the ID is also being stripped out from the <div>.
Johani provides further clarification on the whitelisted markup allowed in the composer and suggests using the anon class added to the <html> tag to selectively show banners to non-logged-in users. DigitalStartup successfully implements this solution, using the following code:
<div data-theme-banners>
<a href="#">
<img src="foo">
</a>
</div>
and
html:not(.anon) .cooked [data-theme-banners] {
display: none;
}
This solution hides the banners from logged-in users.
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:
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.
You can’t by default. There’s only a few attributes that are whitelisted for <img> tags. You can find those here:
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
<div data-theme-banners>
<img src='foo'>
</div>
then you can use the selector
[data-theme-banners] img
So, it looks like the ID is being stripped out my DIV as well.
<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
Correct, <div> tags also have very specific properties that are whitelisted. Those can be found here:
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.
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:
<div data-theme-banners>
<a href="#">
<img src="foo">
</a>
</div>
and this in your theme
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.
Sir, you are a legend.