Help:Pictures

From Wiki

Pictures are great. Adding pictures takes a little time and involves a few steps. Making them look just right, even more. However, at any stage you can get someone to help you. We will start with some simple instructions, then get into some more advance kinds of things.

The basic steps

1. Upload the picture as a file
2. In the page you want the picture, create a link to the picture that was uploaded
3. Maybe add a title, re-size the displayed picture and position it.

Adding a picture example

With the "new" WikiFON, you can upload a picture. We recommend something no wider than 600 pixels (so the reader does not have to use the lower scroll bar to see the whole thing).

• go to upload file over there on the left, under "useful site links".
• Browse to find the picture.
  • I found "A Picture to use as a blank in the WikiFON.jpg" on my home computer's hard drive.
• Check the name of the WikiFON file before you upload. It should be descriptive but not long. Remember you can add a lengthly description to a picture later.
  • I changed the WikiFON name to "A Picture.jpg"
• Upload it. You will probably get a warning that your file is too big. Ignore it or maybe you will say:
  • "Wow, I don't need to upload a 1800 x 1800 picture that is 15 megs" and do something reasonable like under 500k.
• Copy the file name or make a note of it. This is what you will put into a page later.
  • Yes you can use the same picture more than once in the WikiFON.
• Type or copy the file name where you want the picture. Block the name and click on the embedded image icon on the tool bar. It will change A Picture.jpg to [[Image:A Picture.jpg]]

You will see a

Adding a picture placeholder trick

Not sure about uploading a picture? Want Chris or some other RPCV to upload it for you? Maybe you want to come back and add a real picture later. Use a placeholder.

Copy the code below (not in edit mode), then go to your page and in edit mode, paste the code where you want the picture.

 [[Image:A Picture.jpg]]

You will see a please add picture of raffia palm tree here.

Common questions

How big?

In our WikiFON, we are not that worried about adding pictures which would make our site use too much storage space. Generally speaking, the pixel width of a displayed picture should not be larger than 800 (adjust picture size help). However, the uploaded picture can be wider, then adjusted by the display settings.

What adjustments can be made to a displayed picture

Once a picture is uploaded, the image is displayed by adding a link. An image link can have Type, Location, Size, and Caption information as elements. This information is separated by | into what are called elements.

We will cover Type below. Location determines placement of the image on the page. Size is the displayed {width}px or {width}x{height}px, which scales the image to be no greater than the given width and height, keeping its aspect ratio. Caption is any element which cannot be identified as one of the above is assumed to be caption text.

Format a picture

Once the picture has been uploaded, we can change the way it looks. For example: How did we add the box and text to our picture? thumb' / 'thumbnail' or 'frame'. Causes image to be displayed with specific formatting (see below).

Type

• "thumbnail" or "thumb": Image is scaled down to a standard, user specified width, by default 180 pixels, and a box is added around the image. If a caption is written, it is shown below the image. Image defaults to placement on the 'right' unless overridden with the 'Location' attribute (see above).
• "frame": Original image size is preserved, and a box is added around the image. If a caption is written, it is shown below the image.
• (nothing specified): Original image size is preserved, no border is added around the image. If a caption is written, it is not shown.
• "border": Same as if nothing is specified, but a border is added around the image.

Example of a thumb

The picture holder, "225 x 225 px". The picture itself has a blue border and black text is on a white background

• We added | to seperate the elements and words to define each element. Order of the elements is not important. The code looks like this:

[[Image:A Picture.jpg|center|thumb|250px|The picture holder, "225 x 225 px". The picture itself has a blue border and black text is on a white background ]].

• • The code says link to an image file called "A Picture.jpg. Center the picture on the page. Create a thumb (which puts the boarder and allows captions at that bottom). Size the width to 250 px. Put "The picture holder" etc as a caption. Notice that 250px display size width is slightly larger than our iniital image size of 225 px.

Here is a frame

[[Image:A Picture.jpg|center|frame|The picture holder, "225 x 225 px" in a frame]] Notice that since we have not told it a size, the frame defauts to 180 px, slighly smaller than the original. [[Image:A Picture.jpg|center|frame|The picture holder, "225 x 225 px" in a frame]] put below in edit mode shows us this picture:

The picture holder, "225 x 225 px" in a frame

Picture tricks and tables

Did you know that if you click on a picture, it brings up the original that was uploaded. Thus, if you resize your pictures down in size, anyone who wants to see it full size, can do so.

Table trick

Here are a couple of pictures inserted in a 2 column and 3 row table. Both pictures are 100 px wide.

Original 225 wide	Original 491 wide
pic1	pic2
Empty cell	Add picture?

Gallery trick

The "gallery" format allows a quick way to format a page with lots of pictures. Each picture must be uploaded.

Here are some hints. You can insert lines to add photos. Each line should contain

• Image:Image_file_name | Caption below the picture
  • Make sure you have the vertical line that seperates the file name and the caption.

You can set the number of pictures by changing the "perrow" #. Make sure the number is in quotes.

• perrow="2"
  • This would place two pictures per row.

Here is what the code looks like if you viewed it in edit mode.We only have 3 images but the perrow is set for 6.
<gallery caption="James Barkley pictures - click on any to enlarge" widths="100px" heights="100px" perrow="6">
Image:PC-NIgeria Ag Road Dog and Ukoh Ukot.jpg|The Road Dog veteran and The Rookie - James Barkley XII and Chris Collman XVI
Image:PC-Nigeria Ekpo.jpg|Ekpo
Image:PC-Nigeria MOA Ikot Ekpene.jpg|Ministry of Agriculture - Annang Provence- Ikot Ekpene
</gallery>

The above code turns into:

James Barkley's pictures - click on any to enlarge

The Road Dog veteran and The Rookie - James Barkley XII and Chris Collman XVI

Ekpo

Ministry of Agriculture - Annang Provence- Ikot Ekpene

You may notice that we like set the image larger and set the perrow to 2 such as
<gallery caption="Pictures 01-09 - click on any to enlarge" widths="300px" heights="300px" perrow="2"> as in Group XIII Photos page.

See also

• Common pictures some common images and icons used in this wiki.
• Help:Adjust image size