Image embedding doesn't render after a div element : expected behaviour?

Help
1

What I’m trying to do

I want to change the styles of the container element of an embedded image. (More specifically, its width)
I’ve tried several approaches and found something that works partially.
What’s strange is that in some scenarios that I expected it to work, it just won’t render.
I wonder whether it’s a bug or that Markdown specifications forbid that syntax explicitly?
Someone enlighten me plz… (and move me to Bug report category if necessary)

Things I have tried

<div class="change-this">![](http://url/to/image.jpg)</div>

This doesn’t work, the Markdown source code ![](http://url/to/image.jpg) is displayed as-is.
I say to myself, fine, mixing Markdown and HTML syntax isn’t expected to work out.
But then this:

<div class="change-below"></div>
![](http://url/to/image.jpg)

Strangely, the image is rendered in Live Preview mode, but not in Reading mode.
Despite the fact that there’s a line break in between, in Reading mode the div element is concatenated to the markdown source code ![](http://url/to/image.jpg), all together being put inside a block div element.
So… it that a correctly implemented Markdown syntax rendering? (That I need to insert another line break, or to prepend some plaintexts at the beginning of the div line, in order to make obsidian render the embedded image)

1 Like
2

I hesitated because it’s only in Reading mode that it doesn’t work out. (There should be less bugs in Reading mode rendering, right?)

and BTW, strict line-break option is off.

3

Oh, afterwards I also found that (with strict line-break option off) Markdown tables placed after a div element also cannot render (neither in Live Preview mode nor in Reading mode):

<div class="change-below"></div>
| header1  | header2  |
| -------- | -------- |
| content1 | content2 |

Whereas placing the div element below images or tables is OK (renders either in Live Preview mode or in Reading mode):

![](http://url/to/image.jpg)
<div class="change-above"></div>

| header1  | header2  |
| -------- | -------- |
| content1 | content2 |
<div class="change-above"></div>

I’m so confused for why we can’t place div element above images or tables but it works out the other way around

4

Put a line break after the div line and Obsidian will render the table …

5

Yeah I know that. But the thing is, that extra empty line gets rendered in two different ways in Live Preview mode as in Reading mode. (It translates into a <div><br /></div> element in Live Preview while the Reading mode simply ignores it)
Such that I’ll have to use more unstable css selectors (might break in the future) to locate the image/table element.
But I want it to be more persistent, so I ask instead: What’s wrong with placing a div just one line above an image/table? I don’t get it… Is there a markdown rule for this?

6

We don’t support intermingling of markdown and block-level HTML tags.

Every HTML blocks needs to be in its own block (i.e. separated from the rest with blank lines)

7

OK, but placing a div just one line below the image/table currently works. Will this behaviour be removed in the future? Or maybe you can accept this as valid markdown?

8

It’s not okay. You should not rely on it for the future.

9

Alright, but then I also find that placing a <span></span> just one line above a table breaks the rendering as well (below is ok), while span is an inline HTML tag. Bugs involved here ?

As for images, a <span></span> above/below/prepending an image currently works, so I guess this is legitimate, right?

10

Hmmm… for images, obsidian generates this:

<div>
  <p>
    <span><img></span>
    <br>
    <span></span>
  </p>
</div>

whereas for tables this:

<div>
  <table></table>
</div>
<div>
  <p>
    <span></span>
  </p>
</div>

I don’t know, is there a markdown rule saying that since table itself is block-level so it should always expect an extra empty line above/below it?
I mean, not even inline HTML tags like this way? :

<div>
  <table></table>
  <br>
  <span></span>
</div>
11

Excuse me, do you mean that using inline <span /> instead of <div /> is legitimate and okay even in the future?

<span class="change-below" />
![](http://url/to/image.jpg)

<span class="change-next" />![](http://url/to/image.jpg)

![](http://url/to/image.jpg)
<span class="change-above" />
12

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