Image gallery with images served on the Web

#1

Hi, I’ve been trying to figure out how to create an image gallery of a bunch of images stored on the web, for example, https://people.sunypoly.edu/~steve/images/IMG_1543.jpeg

Using the _cannonical_uri approach does not allow me to set the height or width or other parameters of the image.

Is there another way, other than to import the images into the wiki? (this is for a wiki served on tiddlyhost)

Thanks!

//steve.

#2

I am not able to access the image. For me the page load generates a “timed out”.

#3

@saqimtiaz helped me tune his spotlight gallery to display the images in a tiddler as gallery. Perhaps this can help you too:

#4

Can’t you just use that _canonical_uri field as the source of the ImageWidget?:

<$image source={{IMG_1543.jpeg!!_canonical_uri}} width="200"/>

or

<$list filter="[tag[Gallery]]">
  <$image source={{!!_canonical_uri}} width="200"/>
</$list>

And of course, if you don’t need the image tiddlers, you can just do it directly:

<$image source="https://people.sunypoly.edu/~steve/images/IMG_1543.jpeg" width="200"/>
#5

I figured it out, thanks for the help! I’ve attached a file with three tiddlers:

Macros - I made one for each size of image I want to display (10% for thumbnail, and 100%), and hardcode the location of the images
Template - I call the macros in the template, referencing a specific field with the image name
an image tiddler - tagged to invoke the template, with a field for image name

There are probably better ways, especially to manage the height & width; suggestions welcome! but for now, this works well enough (especially for my student projects with dozens of images)

serving-images-on-the-web.json (1.1 KB)

#6

If you want a little more flexibility, then you might use one macro (or, I’d prefer, one procedure) that takes the url as a parameter:

\procedure img-pct(pct:100) 
<img src=`https://people.sunypoly.edu/~steve/images/$(image-name)$` width=`$(pct)$%` height=`$(pct)$%` />
\end

then use this as

<<img-pct 10>>
<!-- or -->
<<img-pct 100>>

I would prefer to extend this to take the image name as a parameter,

\procedure img-pct(image-name, pct:100) 
<img src=`https://people.sunypoly.edu/~steve/images/$(image-name)$` width=`$(pct)$%` height=`$(pct)$%` />
\end

But the image name is not a static string, which would mean you could no longer use the short-form <<macro-call syntax>>, and would have to write this instead:

<$transclude $variable="img-pct" image-name=<<image-name>> pct="10" />

On the plus side, you could then remove the vars wrapper and just write

<$transclude $variable="img-pct" image-name={{!!image-name}} pct="10" />

serving-images-on-the-web2.json (1.1 KB)