#17

I found a really clean way to do it with tables it looks like this:

screen-images
screen-images1920×1080 303 KB

The solution

I used css snippets and the new cssclass to hide the lines made by tables. (This doesn’t affect normal tables, which is great)

that way I simply create it like this:

A simple table

|                          |                      |                       | 
| ------------------------ | -------------------- | --------------------- |
| ![[glass-circle-1.jpg]]  | ![[hover.png]]       | ![[violet-city.png]]  |
| ![[purple-city.jpg]]     | ![[boat-sky.jpg]]    | ![[stone-planet.jpg]] |
| ![[blurry-window-1.jpg]] | ![[red-shape-1.jpg]] | ![[train-sunset.jpg]] |

I made a tutorial

I made a video tutorial, It needs Obsidian version 0.9.18 or higher, which is still for “insiders” only Catalyst early updates

I would assume 0.9.18 should be available for everyone in 1 week or 2 hopefully. Then I’ll make the video public.

(right not it’s an unlisted video on YouTube, for anyone who wants to check it out before it’s published.)

5 Likes
#18

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

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.

#20

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