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 👇 to show your support.
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! 😄
