Use case or problem
Reading mode rendering of images just look so much better, specifically when using CSS snippets for improving image positions (like with the ITS theme, Minimal theme, and other themes and snippets).
Currently in the live preview editor: while vanilla use-cases probably work well, there are still some obvious issues when using CSS snippets:
- Image grids snippets don’t work in live preview (not without a workaround at least). If the images are quite large, they can take up a lot of space in the editor, which means a less “optimized” view of the note, and a lot more scrolling. The images would perhaps be taking much less space (thus require less scrolling) when the image grids are displayed in reading mode, and without having to manually resize each image. Not to mention, the latter looks much neater and organized. Here are some examples (using Minimal’s image grids):
vs 
You can tell which view/mode is which.
- Not all image position and adjustment snippets work. The ITS theme’s
![[img.png|center]]works in live preview, but not![[img.png|right]]; both work in reading mode. Though this might just be an issue that can be solved right from the css snippet itself, my point is that, ideally, how images are rendered in reading mode should be rendered the same way in live preview, regardless of whether or not the CSS has been coded to work properly in the latter. This should also mean less work for the theme devs: if the CSS works as intended in reading mode, it should also be the case in live preview. Thus, the devs can just focus on getting it to work in one of the views without having to worry about it not working in the other.
Proposed solution
While I believe that the new live preview tables can be improved, I think the current way that they’re rendered would work well with images: rendering them as how they would be displayed in reading mode, and only showing the source format when the cursor is located at the block of where the image links are; something like this perhaps:
Right now, the source format for image links show when the cursor is located on the image link itself—while still rendering the image itself:
Rendering images on the block-level as opposed to the current way would work better with image grids and with image position snippets without any text beside the images. I think the suggestion would also be an improvement for images with text beside them, though I’m not exactly sure how that can be rendered.
I’m also not sure whether the image should still be rendering while showing the source format (as is currently the case) or not (i.e., the images stop rendering or disappear when the source format is shown, which is currently the case for markdown tables and callouts).
Current workaround (optional)
From what I’m aware of, the workaround for live preview tables before they were natively implemented was to place these markdown tables inside Admonition blocks, that way they actually render in LP as though in reading mode.
We can use this same approach as a workaround for getting images to render properly in live preview by placing these image transclusions inside callouts:
> [!NOTE]
> ![[Image1.png#grid]]![[Image2.png#grid]]![[Image3.png#grid]]
>
> ![[Image4.png#grid]]![[Image5.png#grid]]
This workaround works with ITS’s image grids but not with Minimal’s (in fact, Minimal image grids don’t work inside callouts in reading mode either).
Some other comments:
I’m not a dev or coder by any means, CSS or otherwise. I have no idea how feasible this proposal is. The complaints and suggestions I’ve given come from a lack of knowledge of how these things actually work. The suggestions I gave might also be just useful for me but problematic or less preferable for other users.
In any case, I hope this can start some discussion about how live preview images are currently rendered and how they can improve, some other suggestions or thoughts I haven’t mentioned or considered, the problems that arise from actually implementing this, etc., etc.
). Really glad to know about the custom callout you’re planning (I guess pinging you wasn’t a mistake after all!). I’m really interested in what you come up with and what similarities and differences there are with this custom callout from the current image-grid solutions (ITS, Minimal, etc.)