I think it broke on the 0.11.1 or 0.11.2. Was working great before that.
@den - Somewhere around 0.10.10 they moved images from a div element to a span element, so they would render inline.
It’s probably more complicated than this - but you could try changing the div in your code to span and see what happens. If that doesn’t work, it’ll require a little more work.
Amazing, now it work! Thank you for quick fix.
Thanks for the clue on changing the div to span. It fixes the issue.
Image Flags Update (also img-grid)
As others have pointed out, an obsidian update changed images from being inside a block level element “div” to an inline element “span” which initially broke all of the image flags. I did a quick update that fixed most of them. Some, however, relied on the functionality of a div and so I needed to find a way around that…
Another issue with the change is that it broke the img-grid that many people were using. Many said it wasn’t able to be fixed, but I have accepted that challenge.
So with that, I am happy to announce that I have a new version of image flags uploaded now with 100% more img-grid.
The image grid should work the way people are used to. The only change is how it is called from Obsidian edit mode. The images are separated by line returns instead of blank lines. The preview result should be very similar, however.
I set it up to work with image flags or by itself. You can use the flag and combine flags if you want or just apply the image grid for a page with the cssclass. See documentation for specifics (link below)
Installing:
The CSS snippet includes all of the image flags as well as the img-grid code and can be found here: Sandbox/pub-Image Flags.css at main · Lithou/Sandbox · GitHub
You can grab the whole thing if you want. If you want the image grid by itself you can grab that (it’s at the bottom) and throw it in a snippet.
You can also clone my entire Github repo and open it as a vault in obsidian to play around with the options. The repo is found here: GitHub - Lithou/Sandbox: Testing and Experimentation for Obsidian and CSS
Further Documentation
You can find the Image Flags Documentation here: Image Flags (Core Documentation) - Obsidian Publish
The Documentation for Img-Grid can be found here: Grid Display Testing - Obsidian Publish
6 Likes
Really great work.
How to batch add “-med” to all images ?
I have added code showing how to change the color of bold and italic text to the Github repository. You can find it at the bottom of the file Fonts.
The Github repository page link is given in the OP at the top of this page.
Enjoy.
If you use footnotes, you may have noticed that the supscripted footnote number widens the line a bit.
@phlind has kindly provided a simple block of code to correct this, and I have added it to the Github repository, file Footnotes. The link to the repository is given in the OP at the top of this page.
Enjoy.
1 Like
Hey @Lithou,
I’m a noob with code, with no knowledge. Is it possible to achieve this result? Like with the side-by-side grid?
Right now mine shows up like this, with your code stored at the bottom of the github link you attached:
I’m not sure.
Maybe, you didn’t install & enable the snippet for those function, or you didn’t add some flags such as
[[image.png|+side -med]]
1 Like
Can you show me what your edit mode looks like for those pictures? I can help you troubleshoot it.
For me, to put image links in the single line, side by side in Edit mode solved the step-like problem.
1 Like
Yeah. With the change of how Obsidian handles images, you will want to put images on the same line in edit mode if you want them grouped in preview.
For a grid view, you have two options. They are detailed here: Grid Display Testing - Obsidian Publish
1 Like
Radical, thank you very much. Works perfect.
To anyone else, who’s like me and would like to use the grid view syntax from the Image Flags for markdown embeds as well. Just add this line to the snippet css.
.markdown-preview-view .internal-embed:not(.image-embed)[alt*="+grid"]{
display:table-cell;
}
PS: I hope I posted this to the right place I’m totally new to this forum (or forums in general for that matter)
You may have noticed in Edit mode that the line numbers don’t line up with the text. @death.au has kindly provided a fix for that , and I have added it to the Github repository, file Gutter line numbers . The link to the repository is given in the OP at the top of this page.
Enjoy.