How to create nicely sized thumbnails of old photos of various dimensions?

#1

I’ve been uploading scanned old photos, and want to put thumbnails into tiddlers, linked to the full size pictures. But the thumbnails only include part of the full size photo, which looks weird. I’d like the thumbnail to show the full picture.

Here are thumbnails of 3 photos of my grandmother. The first 2 are in portrait mode. The first one should show her full length in her wedding dress. The 2nd is also in portrait, she’s sitting in a chair but you can only see her hair and hat. The 3rd is in landscape, it’s better but the bottom third of the picture is missing.
I

3 thumbnails
3 thumbnails1004×317 45.6 KB

I’ve read https://tiddlywiki.com/#thumbnail%20Macro
and followed the information there. Here’s my code for one thumbnail

thumbnail code
thumbnail code954×58 21.2 KB

I could create separate thumbnail versions of the originals (I’ve done that previously for other purposes using an app called EasyThumbnails). I tried it with one of the 3 pictures, used the thumbnail pics as the thumbnail link but there wasn’t much improvement, a chunk of the image was still missing.

If you’re interested, the pictures were taken in 1910, before she travelled from England to India to marry my grandfather, who was serving with the British Army there. There were no photographs of the wedding, in Mumbai (but called Bombay back then).

#2

If it were me, I would not be using the thumbnail widget.

I’d code something similar to:

\define img() <$image source={{!!title}} height=128/>

<!-- 🟠 replace the  filter in the list widget with whatever is needed for your TW instance -->
<!-- 🟠 the button widget does nothing; it is just quicker than coding HTML for side-by-side div elements -->

<$list filter= "[[https://media.istockphoto.com/id/186810881/photo/vintage-snazzy.jpg?s=612x612&w=0&k=20&c=j6G5oTDE1Aa8bgXIDGpb7wcLKjHRk3WrjFG1kCscfXA=]] [[https://www.whizzpast.com/wp-content/uploads/2015/02/4b7013dfa0ad832ae341bfc0660cf76f.jpg]]">
  <$button disabled=yes>
      <a href={{!!title}} target="_blank"><<img>></a>
      <br><span style="color:white;background-color:black;">whatever title for the picture</span>
  </$button>
</$list>

image
image742×409 104 KB

#3

I use separate fields for images vs thumbnails. And, my thumbnail images are thumbnail versions of the original. The purpose is for quick loading when I list the photos in a table or grid.

#4

As I mentioned above, I tried using thumbnail versions of the original, but a chunk of the image was still missing.