How To Add Pictures

Question

Answer

This topic provides general help on additing pictures to any WikiGardens page. It also provides specific instructions for selecting the "feature photos" that are displayed in Plant and OurGarden topics.

Table of contents:

Prepare your photos for display on the web

In this step you've prepare your photos for uploading to WikiGardens. If you already have your photos optimized for display on the web, you can skip this step and proceed to Uploading your Photos.

Before uploading your photo to WikiGardens.com, you want to optimize it's size and compression for viewing on the web. Ideally, you want an image that is quick-loading (i.e. small in size) but not distorted due to over-compression or low resolution.

Size involves both the photo's dimensions (i.e. 3' x 4') as well as it's resolution (i.e. "dots per inch" or dpi). Compression of photos used on the web usually refers to the "quality" of a "jpeg" format picture and is measured as a percent. Without going into detail about these factors, here are some general rules-of-thumb:

• Size - Multiply the size you want to the picture to be displayed at by 72 to get the image size in pixels. For example, if you want the picture to be displayed 3' x 4' on the web, resize the image to 216 pixels by 288 pixels.
• Compression - Save the image in jpeg format (it will have a suffix of either .jpg or .jpeg) with quality set at 30-60%.

It is recommended that you size your photos for WikiGardens.com to maximum 800 pixels either width or height and medium compression. Attachments are currently limited to 0 kb.

The specific steps for resize your digital image depends on the software you are using. Most digital cameras come with software that can do this easily. Alternatively, you can usually find free, small programs specifically designed for resizing photos for the web or for attaching to emails.

If you would like to read some more about preparing your photos for use on the web, here is a good, introductory articles: Resizing Images for Web Presentation (opens in a new window).

Uploading your Photos

In this step, you will upload your photos to the WikiGardens.com page where you want to display them.

1. Go to the WikiGardens.com page where you want to add the picture.
2. Click on the "Attachment" or "Add Photo" link. In the next screen:
   1. Click on "Choose File" to bring up standard "open file" dialog and select a picture file from your computer.
   2. Enter a short comment for your picture which will be it's caption.
   3. Set properties:
      • For Plants and OurGarden topics: Leave both properties unchecked.
      • For other topics: Check the first property to create a link to the new attachment within the topic.
      • All topics: Leave the second property unchecked.
   4. Click on "Upload File" button at bottom of screen. 1 For Plant and OurGarden topics, jot down the name of your images and proceed to designating your feature photo. For other photos, proceed to controlling display.

For more information on managing images and other attachments to topics, see TWiki.FileAttachment.

Selecting a "Feature Photo" for Plant and OurGarden topics.

In this step, you will select which photo you want to feature at the top of the topic.

1. The topic must have some attached images before selecting the "feature image." If you need to do this step, see Uploading your Photos.
2. For topics with attached images, there is a "Photo Gallery" at the bottom of the topic. Click on any of the thumbnail images to view that image in larger format. You can then browse through all the images by clicking the arrows.
3. When you are viewing the image you want to set as the feature image, click on "Select this photo as the Feature image."

Controlling Display of Photos in Standard Topics

After uploading your photo into a standard WikiGardens topic, it will be displayed at the bottom, left of your topic. You can change some aspects of how the image is displayed as follows:

1. Edit the topic by clicking on an "Edit" link.
2. To change the location of the photo, "cut" the "tag" at the end of the topic (starting with %IMAGE{ ) which controls display of the photo and "paste" it before the paragraph by which you want the photo to be displayed.
3. Set basic options for the photo display by editing the following attributes in the IMAGE tag:
   • align - Controls how the image will be aligned in the topic and may be set to either none (the default), center, left or right . If left or right are selected, the text will "flow" around the image.
   • caption - Text displayed below the image.
   • size - The displayed width of the image. When then image is clicked, it will be displayed full size.
4. Click "Save".

For more advanced options for customizing the display of your image, see ImagePlugin.

.