Masonry Layout: allow more content on cards displayed in views

[justin.m.thomsen]

What Do You Recommend?

I’m trying to use AnyType for atomic notes. I want to see many atomic notes in the gallery view at once, similar to Google Keep’s layout. Currently, it appears that the cards are all uniform in size, independent of content. While I can choose to display many relationships, very little of the note content is displayed. Ideally, a card size would be dynamic, based on note content, with a maximum size. Could a setting be added to the display setting to allow this?

How Could It Be Done?

A setting could be added to the card size menu. Currently, it shows small, medium, and large. A dynamic option would be wonderful.

Image or Video

Real World Use-Cases

My real case is wanting to be able to see lots of atomic notes at once.

[Marie.D]

Yes please!

[MikeyP]

Definitely want this

[LineArcLine]

This request is very important to me as well.
Consider this like browsing your photo gallery on your phone. The most important part of a photo gallery is the photos themselves, not a title, date, or other piece of labeling. The image itself is what you want to browse, flip through, and see the surrounding context of.
Similarly, when browsing through your notes, it is the content of the note that should be displayed, not just a title or small piece of metadata.

Browsing your photos should look like this:

Not like this:

Please provide a view for databases/collections/sets/searches that displays this waterfall-like view of notes. The height of the card should be dependent on the content of the note.

In this article I wrote, I try and outline what qualities the ideal note-taking application looks like. I outline how Google Keep is the only existing application that can browse notes while keeping the surrounding context intact.
https://williamharris.notion.site/The-Ideal-Note-Taking-Application-c891f1a3a9c245a7bb1b8ca16b9910ce?pvs=4

Google Keep has the ability to show compact notes in context with the notes taken at a similar time, and through its note browsing interface, your notes take on a gestalt of all the notes you take surrounding it.

However, Google Keep is slow, has a limited feature set, and is untrustworthy due to Google’s habit of getting rid of services.

This feature would not only make me feel comfortable using AnyType as a long-term solution, but also let me get my notes out of the Google Keep service and into something I trust more.

[C.c]

@LineArcLine Welcome to the community

Related feature request:

Masonry Grid

WHAT DO YOU RECOMMEND [masonary grid] To have a masonry grid option for images or as an option within gallery view HOW COULD IT BE DONE This could be a option within gallery view, especially when using the inline sets/collections OR Could be implemented into simple tables. For example: if you paste an image into a slot of the table, along with other images in other slots, it automatically creates a masonry grid of the images (or maybe even a normal grid, or other types of grids, let the use…

[LineArcLine]

@C.c, Thank you for linking that post and for the warm welcome!
I did not know the “masonry” terminology for that layout, that is very helpful.
That thread has several good points that I agree with. Especially this quote from @yzd.

@yzd

I suppose masonry layouts can be used for Pinterest-like moodboards with tons of images, etc., however I’d love to make a simple case for “pinboard-style” note-taking. I feel like I miss Keep even more than Notion just for the beautiful simplicity of its layout (on both mobile and desktop).

[Fienx]

With the update to .46 still waiting on this, to help with my atomic note taking

[LineArcLine]

I genuinely want this to be implemented, and I want to highlight some subtle features from how this has been implemented by others so the AnyType team can see what works for this set/collection view.

Google Keep has the best implementation of this view that I have seen today. It is information dense, but extremely readable.

Notes Have Different Heights to Fit Content

Since the idea is to display the content of the note, and different notes have different lengths, then all the cards must be of different heights.

There should be a maximum height, so long notes may get cut off, but you can show that the note is longer than the preview by adding a “…“ at the end, or maybe by having the preview fade out at the end.

Sorting

There is also the problem of, where to put each card when sorted. If there aren’t distinct rows, which card comes first? The answer that Keep has devised, is that the higher the top of the card is to top of the screen, then the more recent the note is. If there are two cards with equally level tops, then the leftmost card is the most recent. This same mentality can be used for any sorting property. Date created, project status, tags, etc.

Separate Display Sections

Notice how Keep has separated the images from the text, and generated little previews for the links at the bottom.

I expect they made this decision to make it easier to look at a lot of notes that are close together. It makes it intuitive to spot the beginning and end of each note, because the notes have a definitive head and tail. Keep also tries to present the most important information without having to open the note. Photos are easy to spot when searching for information, and Links are often the goal of referencing the note.

Since AnyType allows for rich text, and interweaving media with text, this might work differently. The easy answer to this is to simply display the note as-is, rich text, cover images, and media intact. Like a narrow window displaying the note.

Alternatively, there could be some options in the view layout to draw out some of the note’s properties or content into distinct sections like this. So text, images from the note, links, properties, cover photo, could all be configurable to be displayed in a stack.

Conclusion

This is my most wanted feature in AnyType. I believe it has the highest benefit for me of any other feature request.

I’ve written more in depth about why this view is important here: Forum Discussion: Why I Can’t Stay in AnyType

• The cards must have different heights to fit different lengths of notes
• The sorting must be: Highest sorted is top left
• Care should be taken with how the note preview is formatted.

[Josephak]

Very much second this! Have had the same thought multiple time.

[Grim]

i explored different aps, including Notion, Capacities and even CODA… Anytype still have some of the best features ever… BUT this simple request could turn Anytype into a better solution instead of other apps… so i want to have the ability of having the same preview and “sticky” view as in GOOGLE KEEP.

[kaye]

Thanks for your feedback. Do you mind being slightly more specific in what you’re referring to as ‘sticky view’? If you’re talking about object previews/thumbnails, then this is something we’re aware of and would be unlocked with Editor 2.0

In short, the editor is the oldest part of Anytype and has been built in a way that doesn’t support various requested features. So we’re rebuilding it.

[Grim]

this type of view :

[Humain]

This is the Masonry view with long content preview. I need this too.

[Shampra]

I think we can group these requests together, right?

Setting to allow more note content on cards displayed in gallery view

What Do You Recommend? I’m trying to use AnyType for atomic notes. I want to see many atomic notes in the gallery view at once, similar to Google Keep’s layout. Currently, it appears that the cards are all uniform in size, independent of content. While I can choose to display many relationships, very little of the note content is displayed. Ideally, a card size would be dynamic, based on note content, with a maximum size. Could a setting be added to the display setting to allow this? How Could …

Masonry Grid

WHAT DO YOU RECOMMEND [masonary grid] To have a masonry grid option for images or as an option within gallery view HOW COULD IT BE DONE This could be a option within gallery view, especially when using the inline sets/collections OR Could be implemented into simple tables. For example: if you paste an image into a slot of the table, along with other images in other slots, it automatically creates a masonry grid of the images (or maybe even a normal grid, or other types of grids, let the use…

[chrsjrichards]

Definitely. Can gather votes then.

[kaye]

Ok, I’ve re-titled this feature request and will add it to Collections 2.0 outline.

[blaggacao]

@kaye not only collection / query cards.

Inline cards suffer from the same limitations on “hoisting” (currently only name, and one of [None,Description,(not any more specifiable) Preview]).

Use case example:

Add meeting Participants / Companies as cards and hoist their Short Bio.

[kaye]

Yes, the issue to this is related to Editor 2.0 — in short, in object (block) data cannot be referenced/previewed in these gallery-like cards. This is part of the re-architecture work that we’re doing.

[Jason_22]

yes this reminds me of one of my favoriet bookmak app Papaly. i was thinking this could be done with a view like this one and then use the share to web feature into a browser. Using the publish to web with the bookmarks in anytype i wanted to try to build this.