Display side by side image grid

Share & showcase
64

This CSS is wonderful, but I must warn that it does cause some problems. If you have ‘Readable line length’ enabled in Obsidian’s settings, all embedded notes now have artifacts like the ones shown below. This is valid at least for the Ars Magna theme.


  1. I create notes that contain tables with certain characteristics defined in the frontmatter, and then embed those notes with tables in other notes. Tables should be shown extended, covering the full width of the note. As can be seen here, this feature is lost and the table is displayed compressed to one side of the note.

1
11142×596 65.2 KB


  1. In addition, these strange lines that appear in other transclusions of notes that do not contain tables can be observed.

2
21116×1024 127 KB


In short, it causes problems in the transclusions, at least in the Ars Magna theme, as I previously stated. It would be very useful if this CSS were modified so that it affects ONLY the transclusions with the format .jpg, .mp4, etc., and not all the transclusions (ie, that an exception be defined for the .md notes that are embedded) . I would do it myself and share the code here if I knew more about CSS, but my abilities in that regard are very limited.

65

Hello Zremboldt, I’m on v. 0.13.23 on Windows 10 and it does not seem to work. I tried with different themes with no luck.

I was wondering if we still have to add the cssclass declaration in YAML ? Does the size of the images have an impact ? Do I have to define their size so that they would fit side by side ? I know it would defeat the purpose of this snippet, but just asking in case.

I just noticed, image grid feature doesn’t work either in the Minimal theme… mmm even stranger.

1 Like
66

Image grid requires Contextual Typography plugin to be enabled

You can find the documentation about image grid here:

67

@Tre did you get answer on this? I didn’t think the image grid for Minimal or the snippet from zremboldt worked in live preview so I was looking for other options. I tried looking at the Blue Topaz thread and GitHub but I’m lost too!

68

Can media grid work with image URLs? All of the examples I’ve seen are for local images, but it would be nice, if it’s technically possible, for media grid (either the css snipped or in the minimal theme) to offer the grid functionality with images pulled from the internet. Has anyone had success with this technique and would you share the syntax you’re using?

69

I’ve been looking for HOURS!
thank you :pray: works like a charm

70

Do you think this is possible in Live Preview?

1 Like
71

doesn’t work in the last version of minimal theme 6.1.1

I’m using contextual typography plugin version 2.2.4

Using cssclass: img-grid in my note and nothing change

72

Having the same problem I tried to switch off and on every third parties plugins and “Obsidian Tabs” solved my issue. Maybe it’s the same for you too

73

Yes, I have succeeded in the Blue Topaz theme. However, the images displayed side by side do not have any spacing between them, which makes it less aesthetically pleasing.

1 Like
74

Please, explain how?

75

Does anyone have a working version with Anuppuccin theme? (Not sure if it is the theme or not - it is not snippets or plugins).

@Thiews solution works but it causes all images to zoom to 100% width. Not sure how to work around that.

The snippet from Zremboldt is pretty cool, but grids do not seem to work in preview mode, only edit.

76

I guess the image grid snippet doesn’t work now, is there any other solutions for it?

1 Like