Help:Arranging images reference

From Camera-wiki.org
Jump to: navigation, search

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 certain punctuation marks (curly brackets, hyphen, vertical "pipe" character, and exclamation point).

But contributors to a wiki may come from a variety of backgrounds. Some may find it easier to create the tables directly in XHTML with CSS, or may want to add their own CSS to MediaWiki table syntax. In the end, the MediaWiki software will do conversion into XHTML and CSS that will be served to the visitor's browser.

For this reason, when you examine the page source behind articles in Camera-wiki.org, you may find unfamiliar code. This particularly true for image placement, where over the years different editors have employed a wide variety of ways to achieve the desired result. This reference page explains some of the variations you may see.

It is not essential that you know any of this. To add a group of two to four 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 some existing arrangement of images.

Image author attribution

Camera-wiki.org always wishes to acknowledge and thank all the photographers who have generously made their images available to illustrate wiki articles. Images placed in wiki pages should always include attribution to the photographer (except in rare cases where numerous tiny thumbnails are shown).

The standard Flickr image template uses the name entered in the image_by= field to automatically include the page in a Category "Image by (photographer's name or Flickr ID)." The category page for each photographer provides a link back to their Flickr stream, and to all their images contributed to the Camera-wiki.org Flickr pool. The Flickr image template also turns the photographer's caption byline into clickable link, going to that contributor's category page. (If the link is red, the contributor page has not yet been created; but the category will still display all the other pages displaying that photographer's images.)

When arranging larger groups of images, it is perfectly acceptable to nest multiple instances of the Flickr image template within a wiki table structure. However some editors may wish to use a different syntax for a particular reason, such as making the markup more compact within in the page source. In this case, it is up to the editor to emulate the image-by attribution of the Flickr template. A useful tool for this is the Image author template. Wherever on the page you wish to show attribution to a photographer, replace "Named Photographer" with:

{{image author|Named Photographer}}

In the rare cases where attribution might be omitted from the body of a page (e.g. you are placing your own images in some tricky arrangement), the page markup should still have the image-by category added to the bottom, along with the other page categories:

[[Category: Image by Named Photographer]]

Three images in a row: left, centered, right



----
{{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= left
 |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= center
 |image_text= Faux meter-cell variant
 |image_by= Boxy Brown's Bling
 |image_rights= non-commercial
}}
----

This uses (technically, it transcludes) three instances of the "Flickr image" template. Note the counterintuitive order:

  1. align=right
  2. align=left
  3. align=center

(With a different order, the three images wouldn't be in one row.)

The set of four consecutive hyphens at the start of a line is what produces the horizontal rule.

Image pair using Flickr template extension

If you have just two images to group side-by side, with one common caption, here is a shortcut for doing so using an extension of the Flickr image template. Both images should be from the same source and use the same image rights. This two-image option is only recommendable for two images of equal dimensions. You may wish to use this option with caution, as a future version of the Flickr image template may no longer support this function (image2 may stop displaying, although the rest of the fields should work normally).

{{Flickr_image
|image_source= 
|image= 
|image2_source= 
|image2= 
|image_align= 
|image_text= 
|image_by= 
|image_rights= 
}}


Column of three images (using wiki table syntax)

sample code
{|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
 }}
|}

Technically, this is a table that has been "floated" to the right. (Floating means that other material — such as the text you are reading now — is allowed beside it.)

The table consists of three rows. Each row consists of a single cell. Each cell contains one image and its caption.

Large grid table

The following code sample 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 images, such as these.

{|class=plainlinks
 |-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>
|}

And here is the result:

Hint: With class=plainlinks for the whole table the images won't be presented like external links with the related special character (special character "two overlapping squares").

Row of two images with a shared caption

This may be seen in older markup. When an image arrangement does not use the Flickr 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 in a smaller font better matches 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}}
 |}

whose result is:

Row of three images with a shared caption

This code uses an excerpt of the Flickr image template for a row of three images with a shared caption:

{|class=plainlinks align=center
 |[http://www.flickr.com/photos/century_graphic/5486260029/in/pool-camerawiki http://farm6.static.flickr.com/5013/5486260029_bdb32b4727_t.jpg]
 |[http://www.flickr.com/photos/century_graphic/5486263919/in/pool-camerawiki http://farm6.static.flickr.com/5134/5486263919_40fb9cc6d3_t.jpg]
 |[http://www.flickr.com/photos/century_graphic/5486864606/in/pool-camerawiki http://farm6.static.flickr.com/5213/5486864606_3da76eac14_t.jpg]
|-
| colspan=3 align=center |
 {{Flickr_image_caption
 |image_text= Caption shared by 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 an external link (enclosed in square brackets): the URL of the Flickr page, and that of the image, separated by a space. 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=3" means that the caption spans three columns of the table; to span a different number of images in the row, change the number after colspan= accordingly.