Preview pictures in edit mode

On a Mac, I can hover over the link while holding cmd and it will show me a preview of the picture. Maybe this helps for now.

2 Likes

Also would like to have this feature, since I use Obsidian mostly in the Edit mode. :smiley:

4 Likes

You can resize images using the following syntax:
![[image.png|100]] or ![[image.png|100x100]] or ![AltText|100x100](https://url/to/image.png)
documented in: https://publish.obsidian.md/help/How+to/Embed+files

Edit: @BeR It is clear, Thanks. This was merely reaction to second paragraph of original post, to make sure you do not miss concise Obsidian syntax for resizing images. Feature request remains fully valid.

1 Like

@malecjan
Just to be clear, this feature request is about displaying images in edit mode and the syntax you have posted only affects how images are rendered in preview mode.

Like Armalong, I work almost exclusively in edit mode (without separate preview panes), so images not getting displayed in edit mode is quite a pain point. If images were displayed in edit mode, that would eliminate most of my need for the WYSIWYG/Typora-style edit mode that has been sitting in the “long-term” section of the Obsidian roadmap for a long time.

2 Likes

Same here; the main reason I use preview mode is to see images. Other than that I do nearly all my work in edit mode.

So this feature would be quite useful to have. :slightly_smiling_face:

5 Likes

If I’m editing a note, and pasted an image, it kind of makes sense to see the image already especially if the link is valid.

Although of course there would be times one would actually want to edit the text on the line of the image link, so maybe it could be a behavior perhaps triggerable by a hotkey as well.

It makes intuitive sense to see an image already if pasted in a note, and it does help in making further notes below an image.

10 Likes

This ability (mostly) already exists in the form of the “Page Preview” plugin. If you have “Page Preview” enabled & hold down control/command while hovering over the image link in the editor it will show you a pop-up preview of the image.

It’s not exactly what you’re asking for, but it is very similar & in case you weren’t aware of the ability I thought I’d mention it.

1 Like

I definitely agree. The main reason I go duplicate split panes is to be able edit text around images in one with view of previews in the other, and it definitely feels somewhat unnecessary or at least avoidable in this specific context which your request solves. Maybe this will come before WYSIWYG. Good idea. Thanks.

4 Likes

Yes, Having this feature even before full WISYWYG would really help .
“Page preview” is nice but when I have several notes with many images (I often use screenshots from online lectures) this become real burden.

6 Likes

True! I don’t even mind if fully WYSIWIG doesn’t get implemented during Editor mode (I think there are a lot who want Editor mode to be just text), but I think most would agree that pictures are important in Editor mode.

Or maybe have a toggle option where one could choose to have “image preview” on or not during editor mode.

7 Likes

Being able to see images in edit mode would be insanely great.

I love Zettlr’s implementation of this feature, where images are generally displayed and the image links are hidden, until you click on an image (or move the text cursor to its position) and then link is revealed.

4 Likes

Hi, I’m new to Obsidian (coming from Zim wiki) and really enjoying it.

Use case or problem

I see that WYSIWYG is on the long term roadmap.

The editor window is quite readable for the most part but what doesn’t translate well from full preview is Images.

Proposed solution

Would it be possible to have a togglable option to show images in edit mode (perhaps below the line that calls the image)?

Would this be easier to implement than full WYSIWYG? Could this be an interim step in the roadmap for WYSIWYG? I think it could satiate a lot of users.

Thank you!
Brian

[edited to fix typo pointed out by @BeR - (thanks!) ]

19 Likes

Showing images in edit mode has been requested few times.
But specific proposal from @brian23498324 (moved to post above ↑) seems to be the one best suited for editing mode. It would facilitate workflows like keyboard-only navigation/editing due to showing all “source code”. Images shown between lines would simply be skipped by the caret (= text cursor).
Note that the conclusion above is based only on reading the other requests, I did not read comments under those requests if there are any good ideas.
There should also be hotkey to toggle this off when we want to see as much text as possible.
For showing images “instead of text (markdown code)” as requested in the other requests, there is already request for WYSIWYG and [existing preview mode as current workaround].

I personally would merge following requests into your one [i.e. the one from @brian23498324] and sum up the likes.

4 Likes

The first sentence under “Proposed solution” currently contains the phrase “show images in preview mode” which should actually read “show images in edit mode”, but other than that I wholeheartedly support this feature request!

I agree with @malecjan that this one is likely the best of the existing feature requests. It is very clearly written and the proposed implementation is very sound.

3 Likes

Thanks for the replies.

The only minor issue I can see is for images that are called mid paragraph (mid line).

For example, if someone was inserting a small image meant to appear in line with text, like an emoji.
However, preview mode would still render this correctly, and the inclusion of the small image after the line/paragraph in edit mode could still be useful.

This would not be an issue for me as I usually insert images in their own line.

They could still be shown just under corresponding code in between lines, alghough there would be a lot of space around them. But showing them after the line is also an option, maybe along the right edge of the pane, wrapping long lines earlier before them.
When caret is in the code, then highlight frame (border) around corresponding image. And when cursor hovers over image then highlight corresponding code.

Related:
Request for showing transclusions in the same way will likely follow. Editable transcluded block between lines of main file could look like this: https://en.wikipedia.org/wiki/Brackets_(text_editor)#/media/File:Brackets_live_preview.gif (see the line numbers). Images would be laid out similarly, just would not be editable (unless there is image editor plugin, e.g. for svg images).

Related feature requests:

1 Like

I consolidated 3 requests in as @malecjan suggested.
I am not 100% sure this satisfies this request, but since 0.10.8/9 you can (ctrl) hover over an image link [[image.jpg]] and get a popup preview (you need to have the preview plugin enabled)

2 Likes

This only partially satisfies the request, it help, but doesn’t help that much when editing note with many screenshots when the content of the screenshot is important (like youtube or presentation screenshot)

Just for completeness, WhiteNoise speaks about “suggestion” residing currently in this post: (links updated after merging of threads)

1 Like

YES - this! Images are the only reason why I have a Preview pane open on the side.

With all the cool CSS hacks in many of the community themes, it’s really comfortable to work in editor mode, EXCEPT for image previews!

I agree that this is the #1 most important feature request.

8 Likes