Side-by-Side Images

Radical dude, nice work on the tutorial - your second latest reply here is the one to pay attention to. Once I get access to the new version, I’ll get on your method, it seems like the best one yet. Thank you very much.

1 Like

my pleasure man, sounds good! Once 0.9.18 is public, feel free to let me know if you have any questions or issues.

Thanks for sparking the idea, I’m already making use of this method all around my notes, I even have some crazy ideas to expand it’s functionality.

Thank you so much.

Fantastic, Santi. I hope it’s your idea to post those developments
in here [relative to this] as and when they occur. :slight_smile:

1 Like

Awesome man, will make sure to share development of it for sure

Side note: Check your forum DM’s @joshuawilliam I believe we knew each other from another forum already hahaha

:pray::+1:t2:

I didn’t know there were DM’s here but I see it now - I’ll get back to you right away :slight_smile:

1 Like

I have an alternative solution that is super simple, and not thoroughly tested. It can be combined with the new cssClass YAML tag to make sure it doesn’t break your other pages templates. In this example I am using cssclass: img-grid to avoid leakage but you can remove that class and apply it everywhere.

See the separate thread I created for this: https://forum.obsidian.md/t/display-side-by-side-image-grid-css-snippet/9359

.img-grid .markdown-preview-section {
    display:flex;
}
.img-grid .markdown-preview-section > .internal-embed {
    flex:1;
    margin-left:-0.5rem;
    padding:0 0.5rem 0.5rem 0.5rem;
}
.img-grid .markdown-preview-section > *:not(div) {
    margin-block-start: 0rem;
    margin-block-end: 1rem;
}
.img-grid .markdown-preview-section hr {
    width:100%;
}
.img-grid .markdown-preview-section img:not([width]) {
    width:100%;
}

Then in edit mode simply group your images and the code will automatically create columns.

You can also pair this with my image zoom snippet! Image zoom: click + hold to expand images

4 Likes

Where do you add this code @kepano?

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 (CSS snippet)


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!