Grid Layout / Card View / Masonry Gallery

churnish · October 27, 2024, 6:57pm

Use case or problem

We organize our lives in Obsidian, yet the current file explorer presents our notes as a mere list of titles–missing the rich visual context that makes note-taking apps like Craft, Google Keep and Evernote so delightful to use.

When working with dozens or hundreds of notes, being able to view snippets, images, and metadata at a glance becomes essential. While the hover preview is helpful, it’s inefficient for scanning through many notes quickly.

There’s a clear demand for more visual ways to browse notes. A grid layout would transform folders from simple file indexes into rich visual spaces that offer a bird’s eye view of one’s vault.

This would also allow one to browse their attachment folder just like in a photo gallery app.

Proposed solution

Add a second, grid/masonry view mode for folders that, for each tile, displays:

Note title
First few lines/paragraphs
Thumbnail preview of first image or attachment
Key metadata (tags, date modified)

The layout should maintain snappy performance even with many notes and provide all currently available sorting options.

The grid view could be accessed by clicking on folder name, replacing the current expand/collapse action, which would be relegated to the chevron button. (That’s how it’s implemented in Folder Note and MAKE.MD community plugins.)

Implementation could follow the successful patterns seen in apps like Craft and Google Keep, while staying true to Obsidian’s clean aesthetic.

Additional examples

Current workaround

Bases

Bases add a built-it card view in Obsidian. This is great and I love it for things like media databases but this doesn’t fulfill what’s requested here. For one, one needs to manually populate a property with a link to the cover image. And there’s no way to display a text snippet from the first few lines of a note. Also, each individual base must be created and configured manually—meaning there’s no quick way to view any folder as a base.

Canvas

It’s possible to drag & drop a folder onto Canvas to bulk create cards for each of its notes. This is only an acceptable solution for working with a very limited number of notes due to the static nature of Canvas, and due to performance dips if lots of cards are added.

Community plugins

While some community plugins offer grid layouts, they tend to:

Live within dedicated notes rather than enhancing the core UI
Lack polish and optimization
Are hobbyist projects with little to no support
Are purely visual and miss key features like note management
Require extra maintenance overhead

A native implementation would provide the seamless, performant experience that such a view calls for.

List of community plugins in question

Cards View:

Notes Explorer (offshoot of Cards View):

Vault Explorer:

MAKE.MD (the cover images are not pulled from the note but must be set manually for each note instead):

Note Gallery (the view resides wholly within a note):

Obsidian-Notes-List (requires Dataview only):

Folder Note (last updated Feb 20, 2021):

Vertical Tabs (via ’Mission Control’ mode):

Card Navigator:

GridExplorer:

Also, the following plugins also utilize a card layout in a different context from the examples above (i.e. not as an alternative way to browse notes) but may serve as a source of inspiration:

Related feature requests

This request was previously voiced in:

Requests in the same vein of adding new and better ways to browse folders

Flat view - Folder toggle - (mode to only show files in Explorer pane) - goes hand-in-hand with the request above
Note list view with fragments of note body
Canvas gallery view
Continuous View - Scrivener Like
Open file automatically in accord to file explorer focus using keyboard navigation
Option to separate folders from notes in file explorer