How to make an image grid

#1

I am using TiddlyWiki as a backup to my Instagram account. This is how I have the tiddlers formatted:

created: 20231119031328660
modified: 20231119031352665
tags: image
title: instagram-20200228.jpg

<$macrocall $name="ximg" image={{!!title}}/>
Fake Jazz noise in Vancouver BC

What I would like to do is create a tiddler showing a grid based on a filter that would show all of the images without having to open them one by one. For example, all photos in 2020 would be [prefix[instagram-2020]]

Maybe there is already a plugin or perhaps I need to change how I format my Instagram image tiddlers.

#2

You could try Macy though it has some niggles when pictures are slow to load or there are animations involved.

The code would look a bit like this:

<$macy>
<$list filter="[prefix[instagram-2020]]" variable="img">
<div class="item-container">
<$image source=<<img>>  class="item" />
</div>
</$list>
</$macy>

You could also avoid Macy and just use the list widget as above and use CSS to control the image sizes.

1 Like
#3

I’m already using your Spotlight plugin and this is great addition - thanks.

I was wondering if I could alter the number of columns displayed and after copying the whole code into my wiki to experiment, I noticed that this section:

<$macy columns="6" breakAt="1300:5:15:15 940:3:10:10 520:2:5:5 400:1:1:1">

didn’t appear to be doing anything as the display remained the same if it was cut out and changed to:

<$macy columns>
#4

Please ignore - apparent behaviour due to wiki not being refreshed… and changing the column number gives desired result. This is great - thanks!