Side-by-Side Images

I would recommend adding it to your snippets folder if you’re on 0.9.19 especially if you want to use it with the YAML tag. If you’re on an older build you can add it to you obsidian.css but you have to remove .img-grid and keep in mind that things might get a little weird wherever you. have embeds.

I became an insider, got 9.19 and did it. Radical.

1 Like

I have no snippets folder, even though I’ve downloaded advanced tables.

@kepano I have 9.19 now. I’m looking to add your code including your image zoom. I don’t have any technical knowledge in programming - @santi - could you take me through it in real-time sometime tomorrow [if you could make 10 minutes free] please? You must admit, @kepanos solution is superlative.

Snippets (a folder you create yourself) is in .obsidian, where your plugins (and saved themes) are.

1 Like

Thanks @kepano, so much for this. My efforts now look very primitive - and that makes me happy :smile:

1 Like

You sir @kepano are a genius. Thank you for sharing this, it’s amazing and simple.

For anyone wondering the difference with my approach and the one by @kepano Display side by side image grid


The approach I taught in my video tutorial is good for using images together with text in a grid

I’d definetly say use @kepano for image gallery since it’s a lot more elegant and simple.

For anyone one else wondering about how to set it up
The tutorial I made walks through the whole process, all that would need to change is the code used and the name of the img-grid.css instead of the one I used table-border

2 Likes

@santi: I use transclusions a lot, and using Kepano’s cod messes up the internal structure of my notes. It is easy to correct that, but in my case that would require a lot of time to make those corrections.

Your code, OTOH, does not mess with a note’s internal structure. Unfortunately I cannot get it to work in the theme I use.

1 Like

hey! I found that kepano’s code is a lot simpler, but mine being a simple table keeps things like text in place. I havn’t had issues with the code I share yet, but it might makes sense if some theme is causing conflicts with it.

What theme are you using? I can take a look when I get a change.

Just for reference, all that the code I shared does is hiding the colored lines in a table.

It now seems to work, don’t know why, could be a restart of the vault. So, all is well.
My apologies to have bothered you.

1 Like

I’ve been collecting memes in a dropbox folder and am trying to figure out the easiest way to view them within Obsidian. The tables above would work great but does anyone know if there is a way for a note to automatically display all images in a folder? Possible from newest to oldest?

1 Like

Hope that the official support for more picture layout

1 Like

awesome @Klaas no worries, glad it worked!

hey @tellier I did some tests using something like copy search after filtering all .png or jpg or .gif
but to be honest I didn’t find a straightforward easy way to do so.

Here are some ideas:

  • regular expression to filter all images extensions
  • Using search in comibation with “text expand” community plugin.

To be honest it sound kind of complicated, since currently there’s no easy way to achieve this.

It is possible though, you would just have to combine different techiques and plugins.

I recommend starting a whole new post under the category of “Plugin ideas”, or “Help” try to be as descriptive as you can and link to other posts that are related to what you want to achieve.

There’s really smart people in this forum and I’m sure it’d be possible, I’m just not sure what’s the best way to go about it.

Good luck!

Thanks @santi

1 Like

Ahh if only this were a core feature! :heart_eyes:

One of the things I love about Notion is being able to organize blocks in multiple columns. A page can be more than a long, linear scroll of texts and images.

This is especially handy for doing research that involves images. Having images side by side instead of one below the other is super helpful for us visual learners.

Any idea if this is possible to implement this as a feature in Obsidian in the future?

3 Likes

This might be possible now. See:

1 Like

do you think this is possible in live preview?

i’m trying to use thi with embedded notes (so as to place them side by side), but it doesn’t work. do you know why?

Hello!
Strange for Obsidian to not have this feature.

Extreme need for this feature was felt when gathering references for a creative project, which ended up with many vertical images forming an extremely long strip that made scrolling almost unfeasible.

While trying to find a resolution, we found a plugin here:

Quite rudimentary, but the results are beautiful!
Although the 2 column layout bugs often, the 3 column one works great.


Now the issue was it not being intuitive, requiring the user to put them in a code block,

image

but after asking around, Templater was found.

With Templater, we made a little template that scooped up images that are back to back (not interrupted by header) into the correct code block to be recognized by Obsidian Image Layouts.

You can find the template for scooping images to feed into the masonry here:

It’s not perfect, but it’s working for what we were trying to do.
It essentially finds images and puts them into the code block that would be recognizable by the masonry plugin.

It can be bound to a hotkey.
So practically, you’d just press a key after dragging or pasting a bunch of images, and they’d then be automatically made into a masonry, while respecting the formatting.

We hope this helps others, and ideally contributes to the feature request.

3 Likes

Thank you for your sharing and guiding, i found it personally by far the most robust way of display image grid. By the fact it took advantage of max display width although readable line length is on, which definitely a plus for me since i used a css from ITS Theme which provides similar function but image width often get constraint (smaller).