BBcode to make clickable thumbnails

[John P]

Following recent request from Jbeegoode.

If you search on <BBcode thumbnail>, you can find various sites where they show you the code to make clickable thumbnails, like this:
http://learn-bbcode.blogspot.co.uk/2007/09/how-to-post-pictures-clickable.html

The code that you have to place in your posting is like this:

Code: [Select]

[url=full_image_address][img]thumbnail_address[/img][/url]

The addresses listed there must be replaced by actual URLs for the full-sized image and the thumbnail, on a website somewhere. You need both; you can't just post the image once and say "shrink it down to use it as a thumbnail". ADDITION: In fact you can show a thumbnail using a single image and an instruction that basically says "show at reduced size". What you have to do is add the note "width=200" or whatever size you want, after the IMG word where the thumbnail is described.

So here is one line from my posting in Trip Reports, shown two different ways. It is very long, because I put pictures on my Dropbox account, and they're a couple of layers of folder down from the top level. Also one folder ("WNBR London 2016") has spaces in its name, and the system replaces those with % signs.

Code: [Select]

[url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg][img]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/T_DSCF4709.jpg[/img][/url]

[url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg][img=150]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg[/img][/url]

When I have a lot of thumbnails to generate, I use the batch mode in IrfanView, and you can see that I tell it to add "T_" before each file name to designate the thumbnail. To produce all that voluminous text to make the display code, I made up an Excel spreadsheet. I've done this enough times now that I can get everything done in sequence without having to fumble around to find the next step, so it goes reasonably quickly.

[John P]

Here are some pictures from a previous posting, displayed in table format with captions.

	The group gathered under some big trees, which was a good thing because for a while, there was light rain.		A marshal was on hand to give information, but people were told not to undress yet.		There was a TV crew, very young and informally dressed.
	Bikes waiting for use.		The TV people got some interviews done while the group assembled. They talked to some participants, and a few passers-by.		The woman in blue and green had "Mermaids don't drive" written on her skin. But do they ride bikes instead?

This is the code which produces the above table of images:

Code: [Select]

Here are some pictures from a previous posting, displayed in table format with captions.

[table]
[tr]
[td]
[url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg][img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg[/img][/url][/td]
[td]The group gathered under some big trees, which was a good thing because for a while, there was light rain.[/td]

[td][url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4710.jpg][img width=133]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4710.jpg[/img][/url][/td]
[td]A marshal was on hand to give information, but people were told not to undress yet.[/td]

[td][url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4712.jpg][img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4712.jpg[/img][/url][/td]
[td]There was a TV crew, very young and informally dressed.[/td]
[/tr]

[tr]
[td]
[url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4713.jpg][img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4713.jpg[/img][/url][/td]
[td]Bikes waiting for use.[/td]

[td][url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF47104.jpg][img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4714.jpg[/img][/url][/td]
[td]The TV people got some interviews done while the group assembled. They talked to some participants, and a few passers-by.[/td]

[td][url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4716.jpg][img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4716.jpg[/img][/url][/td]
[td]The woman in blue and green had "Mermaids don't drive" written on her skin. But do they ride bikes instead?[/td]
[/tr]
[/table]


[JOhnGw]

Thank you for that img=150 hint. I didn't know about that bit of bbcode.

[John P]

Careful, it is

Code: [Select]

[img width=150]


[JOhnGw]

Careful, it is

Code: [Select]

[img width=150]


Thank you - just in time.

[eyesup]

On the post I used this table code the 1st time I found using the height=?? function more useful. It made the vertical aspect of the row uniform and easier for the arrangement.

Either way, the help section recommended using one or the other so as not to throw off the aspect ratio of the image.

More information is better. Thanks to both of you for bringing it to our attention.

Duane

[John P]

I posted a trip report for a hike in Vermont which had an appearance like the London WNBR, with 3 columns of thumbnail images and text to the right of each image. Unfortunately when you clicked on the thumbnails, you'd see the full-sized image, but then when you closed that image, the thumbnail would be replaced by the full-sized version and the page would become almost unreadable. I think this occurred because I was being lazy, and trying to use the same file for both the large version of the image and the thumbnail, as shown below, where the actual image is DSCF4709.jpg. The second reference to the file should instead call for a thumbnail file (T_DSCF4709.jpg or whatever) which I should have made available.

Code: [Select]

[url=https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg]
[img width=200]https://dl.dropboxusercontent.com/u/28291527/Naturism/WNBR%20London%202016/DSCF4709.jpg[/img][/url]

My method is unkind to readers, anyway. What it does is load all the images at full size in the user's browser, but with an instruction "show this picture at a size of 200 pixels width". It's sent full-size to the user, and then if a request is made to see it full sized, it's sent again. If I had used proper thumbnails, the user would have less data to download, and it seems that the formatting stays correct after an image is viewed. I'll be doing it that way from now on.