Both wikilinks and Standard markdown embedded images are side-by-side in LP. In reading mode, wikilinks are side-by-side and markdown links are on different lines. Ideally, all combinations should display the same way in both LP and reading mode.
I need to insert two pictures into a note. pictures must be on the same line.
It not works with images from local storage.
But it works with drag-n-drop from website.
Y
The steps were reproduced in the sandbox.
I believe the same bug was previously reported here: Cannot embed local images next to each other
But was supposedly to be squashed in version 0.10.10. (See last post in that thread.)
I have only used the now current version v1.5.3, and so am unaware if this was indeed fixed for that version or the bug has become reintroduced at some point thereafter.
This occurs with the Readable line length option enabled or disabled and with sufficient note space/image resizing.
Expected result
The expected behavior would be that the two images that were placed next to each other on the same line in the editor would appear as such in the reading view.
Actual result
Instead, in the reading view, the two images are seemingly placed in two separate lines and thus are vertical of one another.
Environment
SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.5.3
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on
RECOMMENDATIONS:
none
Additional information
If the Use [[Wikilinks]] option is turned on and one drags and drops two local files next to each other, then in the editor AND the reading view, both appear side-by-side as expected.
If utilizing the markdown links with files from the web, with their URL addresses, then the image files are still also side-by-side in both the editor AND the reading view.
I am a new user and adopter, so apologies if this is not actually supported, and is happenstance of things appearing in the editor versus how things are actually rendered. (As from some further reading it seems markdown, philosophically, adopts a “linearity” with the content. And so such side-by-side placements goes against this. I could be absolutely incorrect about this with my limited foray.)
Apologies for replying to my own post, I could not find a way to edit my original post. This is not an attempt to bump the post, but I have discovered something else that might help in tracking down the problem.
In utilizing markdown links for local image attachments, being something like: ![imageA](books/attachments/bookA.jpg)![imageB](books/attachments/bookB.jpg)
The images are side-by-side in edit mode, but appear in separate lines in reading view as stated in my original post.
However, if I use the file path with angle brackets, such as: ![imageA](<I:\Images\bookA.jpg>)![imageB](<I:\Images\bookB.jpg>)
Then the images appear side-by-side in both edit and reading views.
Why is that? What exactly dictates that these images should be on aligned on the same line? You should use tables to describe image placement explicitly — this the only way to control image placement reliably in markdown.
Thank you for taking time to reply. I was unaware of this at the time and will utilize tables from now on for specific placement of images within markdown.
For some additional context, I am migrating away from WYSIWYG editors to markdown and Obsidian. I was going through the Obsidian Help tutorial page and was learning about the two internal links, Wikilink and markdown, that Obsidian supports. I learned about embedding images and extrapolated from their given example to add another image next to one on the same line. The first attempt resulted in the two images appearing side-by-side in both the editor and in reading view. From this, I thought this is how such things worked until I tried using local image files. Due to this difference, I reasoned this might be a bug.
With further familiarization of the markdown spec and how other have approached this, as you have stated, utilizing tables seems to be the way to go. Thank you again for the assistance.
I’m not sure that it’s intentional for the local and remote images to behave differently like that, so whatever the intended behavior it seems to me that one of them should probably be changed.
In the meantime, I believe this can be controlled by CSS snippets, so that’s another possible option. (Sorry I can’t provide details, I haven’t learned the ins and outs of Obsidian styling.)
There are two ways of using links in Obsidian, wiki-links and markdown-links, which can both be used to embed images. I would expect them to behave the same, but they don’t.
In particular, with Markdown-links two images cannot be side-by-side.
Steps to reproduce
Have two local files with images duck.png, robin.png
I would expect the layout of the first two images and the second two image to be the same
Actual result
When the images are small enough, the Wiki links images will be side by side, while the Markdown images have space around them. There is also space between “Markdown Links:” and the images after, but not between “Wikilinks:” and the images after.
SYSTEM INFO:
Obsidian version: v1.7.6
Installer version: v1.6.5
Operating system: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030 24.0.0
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on
RECOMMENDATIONS:
none
Additional information
I inspected the file with the development console and it can be seen that the two upper images are wrapped in <div> tags, while the lower two are wrapped in <span> tags