 |
| not quite 1000 words |
Sometimes it's easier to show it with a picture.
If you want to dive right into the syntax of posting pictures, Wikidot has this guide about images. We've also got this easy layout tool. Otherwise this page has some basic pointers.
To show your image in the wiki, you'll need to pull it from the internet. There are a few ways to do that, so let's split this how-to into three parts:
- flickr images (pictures hosted on flickr)
- off-site images (pictures found elsewhere on the internet)
- on-site images (pictures loaded to ColumbiaCitizens.net)
insert image wizard
In the editor box, there's a control button that helps you add images — the insert image wizard. It walks you through some of the steps described below.
flickr images
Our site works well with flickr, a free photo sharing service. If you use it, you can pitch your favorite neighborhood pics into our image gallery where more neighbors will see them (see our how-to). Through flickr, our image sharing is generally much more flexible.
|
Step 1 locate your image on flickr |
Haven't posted to flickr yet? We've got a how-to for that.
Each image loaded to flickr has its own number, a photo_id. From the photo's flickr page, you can locate the photo_id in the web-address (URL) located near the top of your browser. For example,  |
| Step 2
call your image |
In the editor box of your wiki-page or your discussion board comment, you can call the image by inserting [[image flickr:photo_id]].
From the example, this would work:
|
| Step 3 | Now skip down to step 4, below. |
off-site images
It's possible to pull images stored on other sites, and to show them on this one — called hotlinking. It's a quick & easy method, though hotlinked images quietly use a little bit of the other site's bandwidth — so please use your judgement and good faith. Here's some discussion about the practice.
It's probably OK if you're hotlinking from your site or your organization's, or when you're posting specifically about that organization. In general, it's good to provide readers a direct link through to a target page on the host site, or even to label the image with a credit (see below). Note that the hotlinked image may eventually change, move, or disappear from the host site.
|
Step 1 locate your image on its host site |
|
||||
| Step 2
call your image |
From the editor box of your wiki-page or your discussion board comment, you can call the image by inserting [[image URL]] in your text. So in the example, this would work:
|
||||
| Step 3 | Now skip down to step 4, below. |
on-site images
First a note about file size. We recently (2010) increased our site's storage space, so now we can host larger images on-site. But larger images take longer for everybody to load, especially for neighbors with slower connections. For screen viewing, most image files rarely need to be any larger than 500K. Usually ~100K images look just fine.
|
Step 1 sign in |
To upload a file to our site, you'll need to sign in. A Wikidot account is free and signup is pretty painless. The sign-in link is at the top right of the page.
 |
|||
| Step 2
load your image |
Images stored on our site are connected to wiki-pages. Where should you put yours?
If you're working in a wiki-page, you can upload it there. Save the page first — you'll come back to editing it later. If you're posting a comment in the discussion board, then our central files page is probably the best place. At the bottom of the page, click the files button. That opens a list of files already loaded to the page. 
|
|||
| Step 3
call your image |
From the editor box of your wiki-page or your discussion board comment, you can call the image. If you loaded the image to the subject page, then insert [[image FileName.(extension)]] into your wiki-text. So in the example, this would work:
If you loaded the image to the files page, then insert [[image files/FileName.(extension)]] into your wiki-text. For example:
|
|||
| Step 4
(optional) style your image |
Inside the double brackets, you can also control your image's layout. You can align your image — left, right, center. A leading "f" makes the image "float", so text wraps around the image.
Wikidot has more information about image styling. |
|||
| Step 5
save your work |
The save button is below the editor box. Ctrl-s also works.
 |
followup
Insert an image caption
When you use images from our gallery, it's good to credit the photographer. That can be as simple as a line of text beneath the image.
Image layout
We've got this image layout tool — it makes captions easy, and it helps to standardize layout across the site. Otherwise, Wikidot has this guide about images.
What about PDFs?
Portable Document Format is a popular file type supported by Adobe Reader. You can show reduced images of a PDF by loading the file to a Columbia Citizens page and calling it from that page.
[[image YourFile.pdf]]
It's harder to call PDFs from other pages or from off-site sources — better to rely on standard image formats: jpg, png, gif, bmp, and so on.