When I paste an image in edit mode, I can only see “! [[Pasted image.png]]”, but not the picture, I hope to add the function of seeing the image in edit mode
I remember there is a software that will display something like " < Pasted image.png size=100 > ", and can modify the size of the image by adjusting the parameters in <>, maybe this is a better way to display
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.
@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.
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.
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.
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.
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.
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.
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.
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!) ]
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.
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.
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).
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)
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)