Display side by side image grid [deprecated]

Furthermore, you can add span rules and invoke these by using the tag in the markdown img link als demonstrated below:

.img-grid .markdown-preview-section img:not(:active)[alt="span2"]{
	grid-column: span 2;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span3"]{
	grid-column: span 3;
}

So when adding these markdown lines:

	![span2](https://source.unsplash.com/random/400x400)
	![](https://source.unsplash.com/random/400x400)
	![span2](https://source.unsplash.com/random/400x400)
	![span2](https://source.unsplash.com/random/400x400)
	![span3](https://source.unsplash.com/random/400x400)

…the result is:

@frvkl: this does not work for me. The images are just shown vertically.
Just to make sure: with your code one also needs to add to the note:

---
cssclass: img-grid
---

right? That’s what I did anyway and it does not work.

@klaas I am on v0.10.01 on Windows 10 using the standard Obsidian (Light) Theme.

The code does work for me, with all other custom CSS snippets turned off.

The note needs to start with the YAML snippet below (before any other lines!).

---
cssclass: img-grid
---

I can confirm the grid code is working on v0.10.6. I have made a small change to prevent other divs turning into columns. When using the code below, you just have to make sure that the images are listed last on the page, as the ammended snippet only targets the last content div on the page:

.img-grid .markdown-preview-section > div:last-of-type > p {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 100%));
    gap: 1rem;
    align-items: stretch;
}
.img-grid .markdown-preview-section > div > p > img + br{display: none;}
.img-grid .markdown-preview-section img:not(:active) {
    object-fit:cover;
    width: 100%;
    height: auto;
    max-height: 20vh;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span2"]{
    grid-column: span 2;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span3"]{
    grid-column: span 3;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span4"]{
    grid-column: span 4;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span5"]{
    grid-column: span 5;
}

Do I understand this correctly: if you have a note with text, you have to put the images at the end of the text?

If that is correct, I assume they will be shown at the bottom of the note in Preview, correct?

Hi Klaas,

That is correct, see an example here:

Result:

I hope this helps you?

@frvkl: OK, thanks for the confirmation.

with 0.11.3, it seems not working on my side. I only get images vertically listed.

Thank you for the great solution @kepano , you are a genius! Somehow this img-grid thing does not work anymore on 0.11.3, do you have any idea on how to fix it? Thank you so much!

As of version 0.11.3 this CSS snippet no longer works and cannot be fixed. Obsidian has changed the way images are grouped which makes this flexbox approach no longer viable. For an alternative, please see Image flags by Lithou.

Does this new code you’ve linked here provide a grid in the way you’ve done it? For me, this is how it appears.

Please note, I know nothing of programming or css. I’m a noob. I was lucky to have @santi kindly help me add your initial code to my vault.

1 Like

Please discuss in the thread linked above.

Since the solution proposed in this thread is no longer functional, and cannot be updated without changes to Obsidian core, it’s best to work directly with maintainers of other alternatives.

The code still works for me on 11.3?

Just make sure the images are at the very bottom of the page.

.img-grid .markdown-preview-section > div:last-of-type > p {
    display: grid;
    /*grid-template-columns: repeat(5, minmax(0, 100%));*/
    grid: 1fr / repeat(5, minmax(0, 100%));
    gap: 1rem;
    align-items: stretch;
}
.img-grid .markdown-preview-section > div > p > img + br{display: none;}
.img-grid .markdown-preview-section img:not(:active):not(.emoji) {
    object-fit:cover;
    width: 100%;
    height: auto;
    max-height: 60vh;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span2"]{
    grid-column: span 2;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span3"]{
    grid-column: span 3;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span4"]{
    grid-column: span 4;
}
.img-grid .markdown-preview-section img:not(:active)[alt="span5"]{
    grid-column: span 5;
}

This approach works very differently and is not reverse compatible with the flexbox model in the original post.

The way your code is set up only works if your images are the last element in your file, and there are some additional quirks with the span modifiers. Because of the way Obsidian changed how images are grouped, I don’t see a way that it could be set up to be reverse compatible so that you can use multiple image grids within the flow of text.

I recommend splitting this approach out into its own thread to describe how it works. It might still be a good fit for some users!

This is so well organized…
Can you share the code :smiley:
would like to give It a try

I’m afraid that got broke by an Obsidian update, as alluded to in Kepano’s reply. The best solution I have found is @Lithou 's ‘Image_Flags’ ( Sandbox/Image Flags (Core Documentation).md at main · Lithou/Sandbox (github.com)). The ‘Gallery’ plugin is also quite useful.

1 Like

thanks for letting me know :smiley:

The (not working anymore) layout displayed in the first post was just perfect and really usefull… I can’t believe it has been broken and does not work anymore, without any real alternatives (i tryed the other solution with “img flags” but i’m not able to have it working in any way).

By any chance, is there another (working) alternative somewhere ?

The next release of Minimal Theme will include a new version of img-grid that works just like the original. It will be available to my Early Access backers soon.

1 Like