Thumbnail images with caption

By AldermanAlderman

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=https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Otira_River_in_Arthur%27s_Pass_National_Park%2C_New_Zealand.jpg/1920px-Otira_River_in_Arthur%27s_Pass_National_Park%2C_New_Zealand.jpg
|caption=Otira River in Arthur's Pass National Park, New Zealand.
|link=image:bracteate-funen-jpg

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

1920px-Otira_River_in_Arthur%27s_Pass_National_Park%2C_New_Zealand.jpg

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.

Thanks to tsangk for this great snippet: conditional-blocks

text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]

Other snippets posted by Alderman

Rate this solution

If you think this solution is useful — rate it up!

rating: +24+x
Add a New Comment
captionimagesthumbnail
page revision: 8, last edited: 06 Jun 2021 04:06
Edit Rate (+24) Tags Discuss (9) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License