Posted by Brunhilda on 1225022051|%e %b %Y|agohover, last edited by Brunhilda on 1297094140|%e %b %Y at %H:%M |agohover
When i started to use Wikidot, I discovered this way to put pictures with a text under it. After some months of working with Wikidot and learning to do some wikidot magic, I found out another, much better and much nicer way to do it by using divs and include modules. You can see them in action if you visit this page: http://istorijska-biblioteka.wikidot.com/art:sulejman-i-velicanstveni.
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.5em 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.5em 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.
In action
To include it in the page, use:
[[include picture-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)
]]
|
|
| Frontiersman from Pomorišje, first half of the 18th century. |
lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla lorem ipsum bla bla bla
Adjustments
The margin parameters I gave here are ok at my site, but maybe they are not ok at other site (as it can be seen here, for example, there's too much space between the text and the photo. Therefore, the parameter margin should be individually adjusted, depending on the settings of each site.
This is how it looks at my site, with these parameters.
Another option
Author
Brunhilda. Please visit his/her userPage.
