Thumbnail images with caption

Description

Would you like to have a ready-made, easy to use template for including placeable thumbnail images with a caption (similar to that seen on Wikipedia)? It is surprisingly easy to do, and can be used to great benefit on numerous pages.

Creating the Template

1. Create a new page with an appropriate title, e.g.: template:thumb. This will contain the template you are about to create.
2. Add the following code to the wiki text editor:

Code block 1:

[[div style="float:{$placement}; margin:0em 2.5em 0.1em 1em; width:{$width}; border:1em"]]
||= [[image {$image} width="{$width}" style="border:1em" alt="{$caption}" link="{$link}"]]||
|| ^^{$caption}^^ ||
[[/div]]

3. Save the page. Done! You now have a new template you can use on any page where you need a captioned image.

Using the Template

1. Go to the page where you would like to insert a captioned image.
2. Click on "edit" to open the editor window.
3. Add the following code above the text next to which the image should appear:

Code block 2:

[[include template:thumb]]

4. Now all you need to do is specify the parameters made available to you via the template you just created. For this template, these are:

• placement: right or left
• width: any numerical value followed by px (="pixels"), e.g.: 300px
• image: the URL to your image
• caption: the text you would like to have appear beneath the image. Note: IE users will also see this text when they roll over the image with their cursor.
• link: the URL or wiki-link you would like to have the image link to (e.g. if you have the image on its own page).

To specify these parameters, you need to:

5. Immediately after the template name (in this case: "thumb") but before the double bracket (]), hit enter twice, creating an empty line.
6. Start the new line with a vertical bar (|).
7. Add the name of the variable you want to specify (e.g. either "placement", "width", "image", "caption" or "link").
8. After the variable name, add the "=" sign followed by the specific value, URL, text, etc.
9. For each variable, add a new line headed with a vertical bar (|).
10. Be sure to close the code with a double bracket (])
11. Save your work. Done!

In action

For the following example, the parameters have been defined as:

|placement=right
|width=200px
|image=http://img73.imageshack.us/img73/9642/639pxbracteatefromfunenwy1.jpg
|caption=Migration Age bracteate from Funen island
|link=image:bracteate-funen-jpg

Here is a screen-shot of the template in action with the values specified above:

Additional notes

• Remember: You can re-use this template on any page as many times as you like. The single template will do all the work.

• The 'link' parameter in the template will not work with the module Backlinks. Thus, it is not possible to use the module Backlinks on the image's page to create a list of the pages on which it appears.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Comments

Thank you very much for your snippet Alderman.

TB Cave 1212718314|%e %b %Y, %H:%M %Z|agohover

But I found that to get it working for me I had to substitute the term "include" for "insert" in Code Block 2. Bye the way, what a beautiful coin! … Tom

Re: Thank you very much for your snippet Alderman.

Alderman 1212772439|%e %b %Y, %H:%M %Z|agohover

Indeed, Tom, you were right. My mistake there. Though, it did help me detect a different bug: the [[code]] block does not turn off the [[include]] tag…

Also, the margin values have been adjusted after another user kindly notified me that the 'right' placement was not optimal. The present version should now look the same in either 'left' or 'right' placement.

Thanks again!

—Alderman

Phil Chett 1215882896|%e %b %Y, %H:%M %Z|agohover

^{Sitting at his desk in his living room, Phil, cigarette in one hand raises his left buttock as he passes a silent one, writes:-}
My wife Brunhilda reported a problem with this here.
http://community.wikidot.com/forum/t-73350/problems-with-different-types-of-browsers#post-218932
With a little messing about i discovered the problem was cause by the code below

@@||= [[image {$image} width="{$width}" style="border:1em" alt="{$caption}" link="{$link}"]]||@@

Removal of the style="border:1em" seems to cure the problem.

---