#1

Guys why does the image class not working?

<img class="green">![[Image.png]]</img>

and in CSS:

img.green{
filter:hue-rotate(90);
}

It is funny, it will just create this additional horizontal line, show the picture, but with no hue change.

Screenshot 2020-09-16 at 20.45.31
Screenshot 2020-09-16 at 20.45.311278×366 13.2 KB

#2

Can you use developer tools to inspect the resulting HTML? I’m curious about what the rendered output looks like in raw HTML.

#3

<img> tags can’t be wrapped in this way. What you will get is two <img>, one after the other.

The only way I can think of to make this work would be to use a different wrapping element, like a <div>.

<div class="green">![[Image.png]]</div>

And then update your CSS:

div.green img {
  filter:hue-rotate(90);
}
1 Like
#4

This is not working.

Image is not generated. It is there just as an text:

![[Image.png]]

#5

Ah, you’re right. Sorry about that. I’m not sure there is a good solution for this. If the image was publicly hosted, you could do <img class="green" src="/path/to/file"/>. You could create a feature request.

#6

I would still be curious about the actual HTML rendering. What’s happening (or not) on the HTML level that’s causing this to fail? Is the class target not being picked up, is the image not receiving the hue…?

#7

It’s being rendered as two consecutive images. The first gets the class and the second is the embedded image.

1 Like
#8

Oh, I see. Is that true if you use conventional Markdown image syntax? ![description](image/path.png)?

#9

Yes, same result. The issue is you can’t wrap the <img> tag.

So the OP’s original:
<img class="green">![[Image.png]]</img>

is being rendered as
<img class="green"/>![[Image.png]]

#10

It is being rendered as simple text, not as Image object:

<img class="green"/>![[Image.png]]

#11

What I meant was two <img> elements are rendered. It’s just that the first one doesn’t have a src attribute so there’s no image to show.

obsidian-two-image-html

#12

So this is bug, right?

#13

I think it’s a feature request - to be able to pass html classes or formatting options to embedded images.

#14

But the whole app is HTML and CSS this should work by default :smiley:

#15

From high altitude, sure.

@sam.baron does an existing feature request for this exist? I think I’ve seen something relevant but I’m not sure I’m understanding the issue deeply enough.

#16

I looked for a feature request for image formatting, but couldn’t find one. I know there have been discussions on Discord about it.

It would be nice if Obsidian operated more like Typora, where you can reference relative paths to files like this:

![My Image](..\path\to\image.png)

or

<img src="..\path\to\image.png" alt="My Image" style="zoom:50%;" />

There is a feature request for this: https://forum.obsidian.md/t/relative-paths-to-unrecognized-file-types-in-the-vault/4251

#17

For me the better is the use:

![[Image]]

and handle it internally as it is

<img src="..\path\to\image.png"</img>

Then we can add any class before the image.