post an image
flickr:4215109961
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:

  1. flickr images (pictures hosted on flickr)
  2. off-site images (pictures found elsewhere on the internet)
  3. 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.

insert image wizard

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,

photo_ID
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:

[[image flickr:2442467275]]

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

From the host site (in this example, rvfb.org), right click on the image. Select "properties". image properties
Select the image's address (location), right-click, and copy it. image location
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:

[[image http://rvfb.org/images/logo.png]]

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.
sign-in
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.

files button
  • At the bottom of the list, click Upload a file from your computer.
  • Click Select Files. That opens a dialog box listing files on your computer.
  • Select your file(s), and click open.
select files
  • Click Upload Files
  • Refresh the files list.
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:

[[image logo.png]]

If you loaded the image to the files page, then insert [[image files/FileName.(extension)]] into your wiki-text. For example:

[[image files/logo.png]]

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.

logo.png

[[f<image logo.png]] (float left)

logo.png

[[f>image logo.png]] (float right)

[[=image logo.png]] (center)

logo.png

logo.png


You can make it link to somewhere else.

[[image logo.png link="http://rvfb.org"]]


logo.png


You can change its size.

[[image logo.png width="50px"]]

Wikidot has more information about image styling.

Step 5

save your work

The save button is below the editor box. Ctrl-s also works.
save your item

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.


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License