How hard would this kind of tiddler layout be?

#1

I’ve long had these postach.io sites (where postach.io was/is basically a tool for getting a website churned out of an evernote notebook). For example, a site for photos of birds, another focused on trees. I’d like to convert them to TiddlyWiki, as these sites are my only remaining tie to evernote.

One hurdle will be hosting images; evernote’s image integration is pretty user-friendly, so postach.io was convenient for getting out a site for something like a one-image-per-post photography blog.

But another hurdle is creating something like this nice column layout of tile previews:

image
image1920×1473 282 KB

Inspecting the code shows that the structure is drawn from Blog - Schema.org Type …

It’s a bit like TiddlyFlex, but very much a no-fuss single story river that just happens to have multiple columns. Items organize themselves into columns so that preview #5 shows up in the optimal “tetris” position (given the height of Tiddlers 1-4), and in the leftmost available spot if there’s a tie.

(In the image above, the four cormorants are the 8th item in story order.)

I’m not attached to recreating this exact interface! Still, some kind of scrollable tile-layout with flexible tiddler heights would be fantastic.

Folks who understand layouts: how easy would it be to get TiddlyWiki to draw on the existing schema.org resources (seems to be some kind of collaborative — open? — code, hosted on GitHub)? And/or how easy would it be to make it from scratch?

#2

@BurningTreeC’s Muuri layout looks like a good place to start!

1 Like
#3

Ah yes, that’s a closer model than TiddlyFlex, for this purpose. I think I’ll start there, and see how far I get with the image conversion challenge…

1 Like
#4

I created a pagination feature to display lists of tiddlers, which users can page through. In that mix, I added support of images. It’s a macro that is provided a filter and a template (among a few other options) to show the results. In my genealogy solution I wanted this for photographs and source documents. For photos, I wanted captions among a few other things to be shown.

In this example I search/filter for “Benson” and the pagination macro is configured to show a maximum of 6 tiddlers at a time, which the user can navigate to see others.

image
image1169×1578 135 KB

Aside: I am refactoring my solution to a TW plugin, and this feature will at some point be a plugin.

1 Like
#5

Knowing your usage of Shiraz / dynamic Tables there is an Advanced Tutorial example showing a flexgrid-gallery which may be helpful.

1 Like