By Brunhilda
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
Invisible edit-sections button with fixed screen position - 16 Feb 2012 01:12
Rate this solution
If you think this solution is useful — rate it up!
Well thats just it, when I have a picture on my desktop, it wont let me put it into the site. So tried to host it and put the url into the module, but that didn't seem to work either.
So I am not really sure what you mean by "upload the photo to my site" because I can't get it on the site at all.
Look at the file button at the bottom yof your page - here you can start the "upload" to attach an image (picture, xls, doc, pdf file a.s.o.) directly to a page.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I'll give it a try, thank you.
Include module should be put there where you want your picture.
I think it would be better to upload the photo to your site and take the url from there. I don't think it'll work with imageshack…
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
I am not getting it to work, where does the "include module" go…
maybe my picture just doesnt work,
if i take a picture and host it with imageshack.us will wikidot except it?