Setup an Image Gallery in Five Minutes

Tips & Tricks
,
1

TiddlyWiki boasts a vibrant ecosystem of tools, thanks to its friendly and welcoming community.

Here’s how I configured a TiddlyWiki:

  1. To read a folder containing 3,576 SVG images.
  2. To employ a button widget and create a separate tiddler for each image to maintain the image title and display the image later.
  3. To use a view template with parameters pragma and an image widget to present a customized widget.
  4. To have a tiddler that stores the relative path to the image folder.
  5. To apply a bit of CSS to style the images in a gallery format.
  6. To implement a simple pagination system to navigate through pages of images.

I would like to acknowledge:

All tiddlers we need to do the job!

msedge_img_283_20240901.png
msedge_img_283_20240901.png423×454 20.1 KB

The readme

msedge_img_285_20240901.png
msedge_img_285_20240901.png697×874 49.4 KB

The view template with parameters

msedge_img_287_20240901.png
msedge_img_287_20240901.png698×499 26.4 KB

The image tiddlers created. They are empty, but display images in a customized way :wink:

msedge_img_286_20240901.png
msedge_img_286_20240901.png704×804 37.1 KB

The image gallery with pagination buttons

msedge_img_284_20240901.png
msedge_img_284_20240901.png700×790 139 KB

The final TiddlyWiki

image.png
image.png1115×891 187 KB

11 Likes
2

Great work! Another approach that would be interesting to test would be to create a sprite sheet of emoji and use symbols to display each emoji, or use background position to show a part of the sheet. One page could be one sheet? This is the technique used by notion, I’m guessing that this is worth it if it’s more costly to load a bunch of tiny files vs loading once one big file.

1 Like
3

I think the thumbnail Macro can be used by the image gallery, which supports displaying caption at the bottom.

image
image684×395 77.3 KB

4

Hi, I like to try the plugin. Where to download and install?
Regards, Bapak Ireng

5

Actually this macro is included in the tiddlywiki core. You don’t need to install any plugin to use it.

6

Thanks for your kind answer. I still do not know how tot start and how to use it. I do have some pictures, which i would like to share with my friends within a seperate tiddler to make my friends interested in using a tiddlywiki, perhaps as well.

regards, Bapak_Ireng

1 Like
7

First you will have to import some images in your tiddlywiki. See Importing Tiddlers.
For the example, let’s say you have imported an image in a tiddler with title “Image 1”.
Create a new tiddler and copy this code inside:

<<thumbnail image:"Image 1" link:"Image 1" caption:"My first thumbnail">>

And you’ve done your first thumbnail!

image
image1104×778 113 KB

Fred

8

And also, more related to the OP, in @Mohammad’s ViewTemplate you could replace the <$image ...> widget by a call to the thumbnail macro like this:

<$transclude $variable="thumbnail" image=<<image.path>> link=<<image.path>> caption=<<tooltip>> class=<<class>> width=<<width>>/>

Fred

1 Like