README file from
GithubMedia grid
An obsidian plugin to wrap media inside a grid or a flexbox layout
Supported Media
Image extensions: ['jpg', 'jpeg', 'png', 'webp']
Video extensions: ['mp4']
Anything beyond these file extensions will be treated as unknown format and an error callout will be rendered.
NOTE: Media format is completed derived from the file extension and NOT file metadata. So it is possible to trick Obsidian into attempting to render an invalid file just by renaming the extension.
Config
| Property | Type | Description | Default value | Notes |
|---|---|---|---|---|
cols |
number | null |
Number of columns to render in the grid. If omitted, the plugin uses a flexbox layout instead. | null |
^1 |
gap |
number |
Gap between rows and column | 4 |
^2 |
grid-container-id |
string |
An unique id to be assigned the rendered grid container | - | ^3 |
Grid vs Flex
Use cols when you want a strict CSS grid with a fixed number of columns per row. If cols is omitted, the plugin falls back to a flexbox layout where each row is defined by a blank line and the media items in that row wrap naturally.
Grid example:
Renders the media files in a grid with 3 columns
Flex example:
Renders the media files in a grid with 2 rows (2 groups separated by a blank line)
I got the flexbox idea from this, a simple but extremely powerful css snippet which does almost 90% of what this plugin can do lol. I highly recommend checking it out.
Notes
- Keep each config property and media file in its own separate line
- If
colsis omitted, the plugin uses a flexbox layout instead of a CSS grid. - If a grid row contains images of different height, the row's height will be set to that of the image with maximum height leaving any unwanted space around smaller images. Autoscaling images was intentionally left out so as to not strech/shrink images. If per image customization is required, you may still use the
grid-container-idand customize with css.
Installation Instructions
Refer these instructions to try it out locally
Todo
- Basic grid
-
cols,gapandgridContainerId
-
- Image rendering
- Media size
- Video rendering
-
column gapandrow gap
[^1] Use cols when you want a strict CSS grid with a fixed number of columns per row. If cols is omitted, the plugin falls back to a flexbox layout where each row is defined by a blank line.
[^2] Css grid does support different gaps for rows and columns. But, as of now, this plugin doesn't support that. The same gap will be used for both rows and columns.
[^3] Grid container id can be used to further customize the grid behaviour using css snippets.