How do I display a list of tiddler links as image-cards in a grid ... like Firefox does with its startpage?

[Sapphireslinger]

Mohammad, have you seen the startpage provided by the Firefox browser populated with Pocket articles?

It appears to be a grid of image-cards. Clicking on one takes you to the article. 

It's hard not to click on a few. Very enticing. I'd like to try displaying my blog posts the same way but instead of each post opening up in a separate tiddler I'd like it to open as if the image card was a slider I'd clicked on, or a tab.

I found your flex-grid gallery and image-card tools:

https://kookma.github.io/TW-Shiraz/#examples%2Fadvanced%2Fflexgrid-gallery

and 

https://kookma.github.io/TW-Shiraz/#Tutorial%20Images

I succeeded in putting together an image-card that would link to a tiddler:

<$link to="POST-TIDDLER" tooltip="POST-TIDDLER"><<image-card "foo.jpg" footer:"DATE-OF-POST" title:"POST-TIDDLER" text:"about three lines of text here">></$link>

I tried to add a list filter to that but did not succeed at all: 

<$list filter="[tag[Blog]sort[chronological-date]]">

<$link to="{{!!title}}" tooltip="{{!!title}}"><<image-card {{!!field-1}} footer:{{!!created-date}} title:{{!!title}} text:{{!!field-3}}>></$link>

</$list>

May I ask you how to get a list of image-cards to display as a flex-grid gallery?

But when I click on them, they open as sliders or tabs instead of in other tiddlers? 

[Mohammad Rahmani]

I think using the slider and revealing data in place does not work here! The image gallery works if you use fixed size images!

If one of the image cards expands then what happens for neighbouring elements?

I think you need to use Murri from BTC. This is a link to Murri

https://burningtreec.github.io/tiddlywiki-muuri/

But check for the latest version!

 

But when I click on them, they open as sliders or tabs instead of in other tiddlers? 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/68a79005-8f24-4054-acae-4d8dccb79469n%40googlegroups.com.