Pictures with the text under it

By BrunhildaBrunhilda

Description

To put the picture on the right side of the text

Create a new page at your wiki and give it a name, for example: picture-right. Then copy this code and paste it in it. Then save it.

[[div style="margin:0 0em 0.4em 1.2em; float:right; border: 2px solid silver; background-color:#FFFFFF;"]]
[[table]]
[[row]]
[[cell style="background-color: #203819; width:{$width};"]]
[[=image {$image} width="{$width}" alt="{$caption}" link="{$link}"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align:center; width:{$width}; font-size:80%; font-style:italic; background:#D8D8BF; color:#203819; border:1px solid silver"]]
{$caption}
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

Then use include module to put it in the text:

[[include picture-right
|width=... px
|image=url of the picture
|caption=text under the picture
|link=name of the page that you want to link the picture with (optional)
]]

To put the picture on the left side of the text

Create another new page at your wiki and give it a name, for example: picture-left. Then copy this code and paste it in it. Then save it.

[[div style="margin:0 1em 0.5em 0; float:left; border: 2px solid silver; background-color:#FFFFFF;"]]
[[table]]
[[row]]
[[cell style="background-color: #203819; width:{$width};"]]
[[=image {$image} width="{$width}" alt="{$caption}" link="{$link}"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align:center; width:{$width}; font-size:80%; font-style:italic; background:#D8D8BF; color:#203819; border:1px solid silver"]]
{$caption}
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

Then use include module to put it in the text:

[[include picture-left
|width=... px
|image=url of the picture
|caption=text under the picture
|link=name of the page that you want to link the picture with (optional)
]]

Here, too, the link parameter is not necessary if you dont have the page to link it. Neverheless it will not be seen if you leave this parameter and dont write anything.

Using these two codes, the pictures stay perfectly aligned with the right/left margin of the text.

Using only one page to include with variable placement parameter

Nevertheless, if you want only one page to include, then you can also make it by creating a page with the name, for example, picture, and paste this code:

[[div style="margin:0em 1.3em 1em 1.2em; float:{$placement}; border: 2px solid silver; background-color:#FFFFFF;"]]
[[table style="width:100%;"]]
[[row]]
[[cell style="background-color: #203819; text-align: center; width:{$width};"]]
[[=image {$image} width="{$width}" alt="{$caption}" link="{$link}"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align:center; width:{$width}; font-size:80%; font-style:italic; background:#D8D8BF; color:#203819; border:1px solid silver"]]
{$caption}
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

To include it in the page, use:

[[include picture
|placement=left/right
|width=... px
|image=url of the picture
|caption=text under the picture
|link=name of the page that you want to link the picture with (optional)
]]

But this one has a disadvantage that it is not a 100% aligned with the text margins. Personally, I prefer the first way by making two different template pages, because you get perfectly aligned picture margins with the text margins, and the including work is not bigger than if you did it with only one template.

Of course, you can adjust colors and font style and size, according to your preferences…

In action

http://istorijska-biblioteka.wikidot.com/art:sulejman-i-velicanstveni.


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 Brunhilda


Rate this solution

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

rating: +6+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License