#11

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
#12

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
#13

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
#14

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
#15

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
#16

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
#17

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.

#18

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
Refactoring of embedded blocks from another note
#19

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
#20

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)

#21

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

1 Like
#22

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
#23

I’ll throw my hat in the ring and second the solution that @brian23498324 advocated.

The ctrl+hover [[link]] works OK, but it’s tiny, lacks context of other images. It also doesn’t seem to work well or consistently with standard markdown [link](url) syntax, which I rely on for image handling, since I’m currently using Typora to handle images due to how clunky it is in Obsidian.

Finally, when pasting images, I would love the filenames to have image000111222.png formatting rather than pasted image with spaces 000111222.png formatting. Lack of spaces just makes all references easier.

#24

Hello everyone,

I just finished a plugin, which helps to view the images in the Editor. I see that some of you also needed such a function :slight_smile:

You can manually download from my repo below:

https://github.com/ozntel/oz-image-in-editor-obsidian

I already created a request to add the plugin to the community plugins, however, you can use the plugin files by downloading the project and pasting the folder into “.obsidian/plugins”. The plugin will be visible in the Obsidian so that you can enable and use it.

I still need to do a few more updates so that plugin works with all possible versions of images. However, I described a few options of settings under my repo so that it works fine for the moment.

Hope it will be useful. Please let me know if you encounter any kind of issue :slight_smile:

18 Likes
#25

@ozan Works for me, thanks!

#27

You sir are a genius. Thank you so much for this plugin :+1: :fire:

#29

@captaincaed In this topic, this reques will likely be lost. The similar has been requested for audio recordings in Timestamp-filenames in Audio Recorder similarly to naming pasted images
That request was implemented with spaces in filenames, likely for consistency with naming scheme for images. I would suggest creating separate request focused on removing spaces from filenames for both: pasted_images and audio_recordings for consistency. Then add link to the request from your post above please. I would vote for it.

1 Like
#30

This is great. Thank you!

#31

This is part of the new live preview in 0.13.x

#32

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