Help:Arranging images reference
Camera-wiki.org uses the software MediaWiki to organize and present its pages.
MediaWiki has its own native markup syntax. This is the markup code you see produced when you click on the tool buttons above a page-editing window. MediaWiki also offers a simple Table syntax using a special few punctuation marks (curly brackets, dashes, and the vertical "pipe" character).
But contributors to a wiki may come from a variety of backgrounds. Some may find it more natural to use other web markup languages they are familiar with: HTML, XHTML, or CSS. The MediaWiki software attempts to interpret all these different syntaxes, and transparently convert them into a final output code which will display correctly in a visitor's browser.
For this reason, when you examine the page source behind articles in Camera-wiki.org, you may find a variety of code styles which are unfamiliar to you. This particularly applies in the case of image placements, where over the years different editors have employed a wide variety of coding styles to achieve the desired result. This reference page exists to document some of the variations you may see, and give a brief explanation about what the markup means.
It is not essential that you know any of this. To add a group of 2-4 images to a wiki page, you can use the simple method using wiki tables described here. But this page may prove helpful if you need to understand and edit an existing arrangment of images created by another author.
Contents
Column of 3 images (using wiki table syntax)
{|class=floatright
|
{{Flickr_image
|image_source= http://www.flickr.com/photos/hartacnut/1818768233/in/pool-camerapedia/
|image= http://farm3.static.flickr.com/2293/1818768233_40d51406ca_m.jpg
|image_align= right
|image_text= Diana Deluxe
|image_by= Hartacnut
|image_rights= non-commercial
}}
|-
|
{{Flickr_image
|image_source= http://www.flickr.com/photos/analog/270319336/in/pool-camerawiki
|image= http://farm1.static.flickr.com/103/270319336_babab6f1b2_m.jpg
|image_align= right
|image_text= Original Diana
|image_by= Paul Analog
|image_rights= with permission
}}
|-
|
{{Flickr_image
|image_source= http://www.flickr.com/photos/32212028@N02/5634412501/in/pool-camerawiki
|image= http://farm6.static.flickr.com/5187/5634412501_4088de9496_m.jpg
|image_align= right
|image_text= Faux meter-cell variant
|image_by= Boxy Brown's Bling
|image_rights= non-commercial
}}
|}
Large grid table
The following code creates a table of four rows, each with three images (from the page Diana). This creates a large page element which may cause problems in smaller browser windows. It is only recommended with small-size images, such as these.
{|
|-align=center
|[http://www.flickr.com/photos/uberj/2724249068/in/pool-camerawiki http://farm4.static.flickr.com/3102/2724249068_490d86fc3d_m.jpg]<br />Stellar<br /><small>by Jeff Rawdon {{with permission}}</small>
|[http://www.flickr.com/photos/49656291@N00/3678572868/in/pool-camerawiki http://farm3.static.flickr.com/2439/3678572868_ddf208fa5a_m.jpg]<br />Windsor<br /><small>by Kenneth Dwain Harrelson {{with permission}}</small>
|[http://www.flickr.com/photos/davedunne/1304459489/in/pool-camerapedia http://farm2.static.flickr.com/1155/1304459489_5e63ec5ddd_m.jpg]<br />Harrow<br /><small>by BlurDotBlog {{creative commons}}</small>
|-align=center
|[http://www.flickr.com/photos/hartacnut/2281675052/in/pool-camerapedia http://farm3.static.flickr.com/2154/2281675052_f5e5274c7e_m.jpg]<br />Reader's Digest<br /><small>By Hartacnut {{non-commercial}}</small>
|[http://www.flickr.com/photos/awcam/3319047225/in/pool-camerawiki/ http://farm4.static.flickr.com/3661/3319047225_b00aabcf7c_m.jpg]<br />Debutante<br /><small> by {{image author|AWCam|awcam}} {{with permission}}</small>
|[http://www.flickr.com/photos/32212028@N02/5048059792/in/pool-camerawiki http://farm5.static.flickr.com/4144/5048059792_55d140680e_m.jpg]<br />Dories<br /><small>by Boxy Brown's Bling {{with permission}}</small>
|-align=center
|[http://www.flickr.com/photos/49656291@N00/5145400744/in/pool-camerawiki http://farm5.static.flickr.com/4033/5145400744_f0c87d4f4b_m.jpg]<br />Flocon RF 222<br><small>by Kenneth Dwain Harrelson {{with permission}}</small>
|[http://www.flickr.com/photos/uberj/4395827878/in/pool-camerawiki http://farm5.static.flickr.com/4016/4395827878_279164ec29_m.jpg]<br />Arrow<br /><small>by Jeff Rawdon {{with permission}}</small>
|[http://www.flickr.com/photos/32212028@N02/5426152882/in/pool-camerawiki http://farm6.static.flickr.com/5256/5426152882_750f105122_m.jpg]<br />Mark L<br /><small>by Boxy Brown's Bling {{with permission}}</small>
|-align=center
|[http://www.flickr.com/photos/32212028@N02/4949382988/in/pool-camerawiki http://farm5.static.flickr.com/4145/4949382988_1a6aa075cd_m.jpg]<br />Zip Instant Load<br /><small>by Boxy Brown's Bling {{with permission}}</small>
|[http://www.flickr.com/photos/davedunne/1449949581//in/pool-camerapedia http://farm2.static.flickr.com/1176/1449949581_e3cdde6954_m.jpg]<br />Lomography Diana+<br /><small>by BlurDotBlog {{creative commons}}</small>
|[http://www.flickr.com/photos/alspix/294021252/in/pool-camerawiki http://farm1.static.flickr.com/115/294021252_87ea9ef968_m.jpg]<br />Sample Diana image with light leaks<br /><small>by Alan Cooper {{with permission}}</small>
|}
This may be seen in older wiki pages. When an image arrangement does not use the Flick image template, the photo attributions do not automatically add the page to an image-by-photographer category. You can add this manually to the bottom of the page if you like.
{| class="plainlinks" align="center" style="text-align: center;"
|| [http://www.flickr.com/photos/rebollo_fr/3344763796/in/pool-camerawiki/ http://farm4.static.flickr.com/3306/3344763796_c476d3be91_m_d.jpg] [http://www.flickr.com/photos/rebollo_fr/3343928685/in/pool-camerawiki/ http://farm4.static.flickr.com/3573/3343928685_1c8a66ff6e_m_d.jpg]
|-
|| ''Bonny Four no. 2677, Bonny Anastigmat 50mm f/4.5 lens no. 3016.<br>Pictures by John Knott {{with permission}}''
|}
A variation where the caption is not in italics; and the image credit is is in small type. This would be a better visual match for the appearance produced by the Flickr image template:
{| class="plainlinks" align="center" style="text-align: center;"
|| [http://www.flickr.com/photos/rebollo_fr/3344763796/in/pool-camerawiki/ http://farm4.static.flickr.com/3306/3344763796_c476d3be91_m_d.jpg] [http://www.flickr.com/photos/rebollo_fr/3343928685/in/pool-camerawiki/ http://farm4.static.flickr.com/3573/3343928685_1c8a66ff6e_m_d.jpg]
|-
|| Bonny Four no. 2677, Bonny Anastigmat 50mm f/4.5 lens no. 3016.<br><small>Pictures by John Knott</small> {{with permission}}
|}
Which looks like so:
 
|
| Bonny Four no. 2677, Bonny Anastigmat 50mm f/4.5 lens no. 3016. Pictures by John Knott (Image rights) |
This code uses an excerpt of the Flickr_image template, to give a row of three images with a common caption:
{|class=plainlinks align=center
||[http://www.flickr.com/photos/century_graphic/5486260029/in/pool-camerawiki http://farm6.static.flickr.com/5013/5486260029_bdb32b4727_m.jpg]
||[http://www.flickr.com/photos/century_graphic/5486263919/in/pool-camerawiki http://farm6.static.flickr.com/5134/5486263919_40fb9cc6d3_m.jpg]
||[http://www.flickr.com/photos/century_graphic/5486864606/in/pool-camerawiki http://farm6.static.flickr.com/5213/5486864606_3da76eac14_m.jpg]
|-
| colspan=3 align=center |
{{Flickr_image_caption
|image_text= This caption is shared between three images of a Zenit 1.
|image_by= Dustin McAmera
|image_rights= creative commons
}}
|}
This arrangement has the advantage of using only one short template. Each cell contains a Flickr page address and its .jpg image file URL, separated by a space and enclosed in square brackets. The template Flickr_image_caption gives a single caption, for image groups all from the same photographer (and with the same image rights). As you may have guessed, "colspan" means that the caption spans three columns of the table structure. If you put a different number of images in the row, change the number colspan=3 to match.
