Posted by Brunhilda on 26 Oct 2008 11:54, last edited by Brunhilda on 07 Feb 2011 15:55
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.
the code |image=url of the picture
doesn't work as it is. How to write the correct code? with [[ ]]? or " "?
I have:
Is what I have done below the sort of thing you are trying to achieve?
which gives:
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Heres an example from a page that i know is fine
in action :http://psc.wikidot.com/pictures
edit: had a clean out and deleted the page so the link dont work any more . sorry
Welldone Phil.
the link serves to lint to the page where the photo is hosted at your site. If you don't have such page, than it is not necessary.
Look:
Where |link=slika:osvajanje-hispanije leads to this page: http://istorijska-biblioteka.wikidot.com/slika:osvajanje-hispanije when you clikck on the very same photo.
Try any of my articles, for example this one: http://istorijska-biblioteka.wikidot.com/art:andronik-i-komnin, and click to the photo and you'll see where it leads. But, if you don't have such pages, or you don't want your photos active, you can freely avoid this parameter.
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
You don't have to use any of the brackets. Just a plain url link.
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
I would like to thank Brunhilda for this excellent suggestion. It's working fine in my wiki, except for a little detail…
I can't understand why there is a space between the top of the first cell (the cell with the image) and the image border. You can see the problem here:
http://terrasdeportugal.wikidot.com/loriga
Can anyone give me a help on this?
Thanks!
Carlos Pereira
Problem solved!
I changed the code on the template page to this:
Image on the Center of the page
Floating on the Right side of the page
Floating on the Left side of the page
I think that is not necessary to use the [[div]] ... [[div]] tags. Of course, the colors and the text size can be changed.
You can see this in action here:
Give your opinion about this solution.
Carlos Pereira
What space? I don't see any space….
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney
That can't be right! Why is the link hard coded to this page?
There was a rendering problem with the page, no doubt caused by some recent changes in the parser. I fixed it using code blocks. The "hard link" really wasn't that way in the original source of the page. The link section should read link="{$link}"
-Ed
Community Admin