#1

Is there a way to have text beside an image? I’va tried many css style and they all put text on a other line. I would like to have my image to “float” in text.

Borderless Tables (Note Grid Organization)
#2 
<div style="width: 100%;">
  <div style="width: 48%; float: left;">This is column 1</div>
  <div style="width: 4%; float: left;"></div> <!-- This one is a spacer -->
  <div style="width: 48%; float: left;">this is column 2</div>
</div>

i’ve done this is markdown before too, you can do this 2 column approach and use 2 divs next to each other and put the contents in each.

2 Likes
#3

Did you test this with an image? I’m testing this with an image embed, and it isn’t working. In my screenshot, I include the image outside the html, and inside the html, to prove the image is correct.

I’m not sure if I’ve hit a bug, or if this isn’t supported yet.

![[Pasted image 10.png]]

<div style="width: 100%;">
  <div style="width: 50%; float: left;"> ![[Pasted image 10.png]] </div>
  <div style="width: 50%; float: left;">this is column 2</div>
</div>

image
image1716×1080 217 KB

Even a basic table html example doesn’t work for me. The image simply doesn’t render within the html tags. (v 0.8.8)

I also tried linking to a remote image with the format:
![test](image url)

<table width=100%>
<tr>
	<td width=50%> ![[Pasted image 10.png]] </td>
	<td width=50%>Test2</td>
</tr>
</table>
#4

it may be because you’re using markdown syntax for images, try the image tag for image

<img src="YOUR IMAGE LOCATION">

EDIT ------

just tried with one of my images… no dice…

i think what i played with before that i got working was an article in an iframe and text on the right of that not an image after all :confused: shoot.

#5

Yes, the html <img> tag does work for me with remote images. Oddly, it doesn’t seem to work with local files, even with a full path. But I might be messing up the syntax?

Neither of these work.

![Test](file:///Users/chrislesage/Dropbox/ObsidianNotes/Resources/attachments/image_6.png)

<img src="file:///Users/chrislesage/Dropbox/ObsidianNotes/Resources/attachments/image_6.png/">

But yes, sadly, it appears not to work with image embeds.

1 Like
#6

One of the problems when using the img tag ist that you can’t easily link to the attachment directory, you can only have absolute links, which break when you move the vault.

#7

I found it is possible to embed images.
An example here:
<img src="app://local/C://Users/username/Documents/obsidian_notebook/state_transition.png">
This works under Windows 10. You can use this inside an HTML table tag.

  • For Linux, it is something like (you have to have two “/” before “home”):
    <img src="app://local//home/username/Documents/obsidian_notebook/test.jpg">
  • For Mac (it doesn’t matter if you have one or two “/” before “Users”):
    <img src="app://local/Users/chrislesage/Dropbox/ObsidianNotes/Resources/attachments/image_6.png/">
2 Likes
#8

I use the Image flag.css to organize pictures, but it works only on files in my vault, not remote on my disk. May i ask how did you manage to add wiki links to the html code? i get just ![[filename]] but not the embedded image…additionally, it would be nice to get it working for files in and -outside our vault

#9

You’ve asked me how I got it working. In that reply, I was explaining that it was not working.

Sorry, I have no idea what “the Image flag.css” is.

In the post directly above you, halfelixir showed how to link to images outside your vault. I tested this and it works.

#10

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