Media Grid
An Obsidian snippet
Skip to installation instructions ↓
Note
This is a generic snippet that I intended for use with any Obsidian theme. The idea was heavily inspired by Stephan Ango's Minimal theme which incorporates this same kind of grid functionality. You can find him @kepano on Twitter or buy him a coffee
Introduction
Media Grid gives you more control over the way your linked content is rendered in Obsidian. Add more meaning and visual interest to your documents by grouping sets of images, videos, or even audio tracks into grid layouts.
Creating a new grid is as easy as placing two or more image links next to each other in your markdown document. Below you can see the result of three links.
Want to start a new row? Just put an empty line between your links. Below you can see the result of two groups of links separated by an empty line.
Awesome for throwing together a quick moodboard or collecting ideas for your next project.
It works with audio and video files too!
Make it yours
Media Grid looks great out of the box but can be further configured to your liking through the Style Settings Plugin (not required).
Installation
NOTE: This snippet requires the latest version of Contextual Typography.
If you already have the latest version of Contextual Typography:
- Download
media-grid-snippet.cssfrom this repo. - Open the settings panel in Obsidian and click the Appearance tab.
- Scroll to "CSS snippets" and click the folder icon.
- Drop
media-grid-snippet.cssinto the folder that appears. - Now back in Obsidian, next to "CSS snippets", click the "Reload snippets" button.
- You should now see
media-grid-snippetin the list. Toggle it on and you're ready to go!🥳
Feedback
If you run into any issues or have suggestions feel free to submit a GitHub issue or send me a message @zremboldt on Twitter. I'll respond as soon as I can.
Support
No pressure whatsoever but if you enjoy Media Grid and would like to support its development you can buy me a coffee. Thank you!
Not working in 1.0
I justs discovered and installed the css file as per instructions, but nothing is happening either in live editor or reader mode. Can anyone confirm that this works in 1.0 ?
Row-gap should be 7px but mine is closer to 70px
Love your snippet! It's transformational for obsidian and I hope they include it in the core. One problem - the "Grid Gap" -- column-gap is fine at 7px, but the row-gap should be 7px but mine is closer to 70px. I've tried adjusting it but it stays the same. I've only got one line between the image links, ie: ![[walker.jpg]] ![[walker.jpg]] ![[walker.jpg]]
![[walker.jpg]] ![[walker.jpg]]
Any ideas?
Support Live Preview Mode
Hi, Great work on the snippet! the only thing currently missing for me is support for the new Live Preview editor, I dunno if it would be even possible but it would be nice to have