Pictures with the text under it

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.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

umm

Costia 1227459465|%e %b %Y, %H:%M %Z|agohover

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?

Brunhilda 1236203867|%e %b %Y, %H:%M %Z|agohover

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…

---

The time you enjoy wasting is not wasted time.
Bertrand Russell

Costia 1236205792|%e %b %Y, %H:%M %Z|agohover

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.

Re: UPLOAD..

Helmuti_pdorf 1236243420|%e %b %Y, %H:%M %Z|agohover

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.

• give it a name without spaces!
• and an extension!
• the used url you can get over the "info" button ( insode the "file" mini-system.

---

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

Re: UPLOAD..

Costia 1236258505|%e %b %Y, %H:%M %Z|agohover

I'll give it a try, thank you.