"How to achieve" CSS code snippets

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

7 Likes