#21

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

#22

: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
#23

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.

Screen Shot 2020-12-01 at 5.01.12 PM
Screen Shot 2020-12-01 at 5.01.12 PM2360×1402 658 KB

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

4 Likes
#24

Where do you add this code @kepano?

#25

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.

#26

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

1 Like
#27

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

Screen Shot 2020-12-02 at 04.53.14
Screen Shot 2020-12-02 at 04.53.14816×1020 147 KB

@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.

#28

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

1 Like
#29

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

1 Like
#31

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
#32

@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
#33

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.

#34

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
#35

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
#36

Hope that the official support for more picture layout

1 Like
#37

awesome @Klaas no worries, glad it worked!

#38

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!

#39

Thanks @santi

1 Like
#40

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?

1 Like
#41

This might be possible now. See: