Side-by-Side Images

[joshuawilliam]

@Jeffurry

You could try this

oh wow, an even better solution - even the padding can be manipulated in 4 directions. Thank you very much @Jeffurry.

How far can this go? You’ve done four inputs here, all with a left padding.

[joshuawilliam]

How do I amend the spaces so the alignment is better between the bottom two? I also see the weapon lands to the right rather to the left or center, is this amendable?

This is the code for what you see based on your above response.

Where are we going? <div style="float: left; padding: 2px 2px 2px 2px;">![[futurecity.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[dystopianfuturecity.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[spacecraft.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[crafttwo.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[interior.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[weapon.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[ground.png|200]] </div><div style="float: left; padding: 2px 2px 2px 2px;">![[controlcenter.png|200]] </div>

Thank you @Jeffurry

[Jeffurry]

OK, full disclosure…I don’t really know what I am doing! BUT, I have jiggled around a bit and got this…

… the placement of a carriage-return and some full-stops helps to organise the display of the images. Muck about with it, with a preview window open next to your editor to get the desired effect. Sorry I cant be more expertly helpful.

Where are we going? <div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div>

..<div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div><div style="float: left; padding: 2px 2px 2px 2px;">![0](https://www.placecage.com/140/100) </div>

[Ward]

Hi. I have tested your coded with local files and you have to add line breakes <br/> with large pictures but for the rest it works perfect. This is AWESOME

[joshuawilliam]

Fantastic; that’s awesome - thank you @Jeffurry

@Ward

you have to add line breakes
with large pictures but for the rest it works perfect.

@Ward - may you please post in some of your amended code? I know nothing about programming so any import visual would help a ton to see what you mean.

[santi]

@joshuawilliam

How do I amend the spaces so the alignment is better between the bottom two? I also see the weapon lands to the right rather to the left or center, is this amendable?

Hey @joshuawilliam I couldn’t exactly replicate your images setup, since I don’t have the exact images you are using. (feel free to upload them here, if you want me to test it with your exact same setup)

With that said I used your same code with other images just to test.

My test

this is what mine looks like (exact same code, different images)

Look at the first image (top left) it’s taking too much space at the bottom

By following @Ward 's recommendation to use <br> I manage to correct into this (look at first photo again)

Now there’s some space in between the first photo and the next row

<br> means break, it’s the same as doing enter or return when writing, it creates a new line of text, in this case code.

Here’s more info on the <br> tag in HTML

In my case this is all I changed

I added <br> after </div> and before <div style=

What does <br> mean?

so the first image’s code looks like this now

Where are we going? <div style="float: left; padding: 2px 2px 2px 2px;">![[futurecity.png|200]] </div><br><div style="float: left; padding: 2px 2px 2px 2px;">![[dystopianfuturecity.png|200]] </div>

that way you can try to add <br> in between </div><div style= to fix those strange gaps.

it’s not perfect and you might find making some <br> makes some other gaps move around.

Feel free to upload your images

It’s a bit tricky to be precise, using the wrong images, so if you’d like some more help with the exact code, feel free to upload your images and I can set it up for you and explain how to best format them.

Easiest way is to put them in a folder and do a .zip to quickly just upload it here in the forum, a Dropbox link (or any other could service) also works

Hope it help!

[santi]

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

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

Create Images Layout In Obsidian

[joshuawilliam]

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.

[santi]

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.

[joshuawilliam]

@santi

feel free to let me know if you have any questions or issues.

Thank you so much.

@santi

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.

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

[santi]

@joshuawilliam

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

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

[joshuawilliam]

@santi

will make sure to share development of it for sure

@santi

Check your forum DM’s

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

[kepano]

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

[joshuawilliam]

Where do you add this code @kepano?

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

[joshuawilliam]

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

[joshuawilliam]

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.

[Jeffurry]

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

[Jeffurry]

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

[santi]

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

Create Images Layout In Obsidian