Obsidian Stats logoObsidian Stats

Media Grid

by subhash-sarangi
5
4
3
2
1
New Plugin
Install Code

Description

Wrap media inside a grid layout. - This plugin has not been manually reviewed by Obsidian staff.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Media grid

An obsidian plugin to wrap media inside a grid

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 Number of columns to render in the grid 4
gap number Gap between rows and column 4 ^1
grid-container-id string An unique id to be assigned the rendered grid container - ^2
Example

You should now see all your images in a grid. Also, the grid container will have the id #nice-grid which can be used to further customize the styles using css snippets.

Image

NOTE: Images used in this project are sourced from pexels.com. They are used in accordance with the applicable license. I do not claim ownership of these images. All rights remain with their respective creators.

Notes
  • Keep each config property and media file in its own separate line
  • 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-id and customize with css.
Installation Instructions

Refer these instructions to try it out locally

Todo
  • Basic grid
    • cols, gap and gridContainerId
  • Image rendering
  • Media size
  • Video rendering
  • column gap and row gap

[^1] 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. [^2] Grid container id can be used to further customize the grid behaviour using css snippets.

Feel free to contribute
Sponsors