Images Help
From Acorn
Before Uploading
1. Ensure the image is one of the following file types: .gif, .jpg or .png. Do not upload other file types, such as tiff, bmp, etc.
2. Before uploading the image, give it a short name, using only letters, numbers, dashes and underlines (no spaces), and the proper three-letter extension. If any image with the same title has already been uploaded, it will be replaced with your new one. Only administrators can delete images.
3. Ensure the image's dimensions are not too large. As the lowest common monitor resolution is 1024 x 768 pixels, the widest the image should be is 800 pixels, the highest should be 550 pixels. This will enable the entire image to be viewed without scrolling. See the illustration at the bottom of this page.
4. Ensure the image is the correct resolution. Ideally, this should be 72 dpi, although other resolutions at or below 150 dpi can work. Image dimensions and resolution can be changed in Photoshop or Photoshop Elements, most computers in Shain Library have this software.
5. Ensure the image's data size is not too great. A smaller image, 320 x 240 pixels, should be about 100 K (kilobytes) or less. The largest one, such as 800 x 550, should not go over 400 K. If the image goes above this, you can reduce the size in Photoshop, by either making the image smaller in dimensions, or by compressing to Medium when creating the JPG. You can determine the image's data size, before uploading, by selecting it and, on a PC, right-click on Properties, on a Mac, select it and go to File>Get Info.
Uploading
When you are logged in as a user, an "Upload file" link appears in the toolbox. This enables you to upload and use images in this wiki.
Every time you upload an image, a new page is created for that image. If you click on Edit, you can change the image description. If you wish to see all uploaded images, go to toolbox>Special pages>Gallery of New Files.
Using Images
1. The wiki syntax for using images is very simple: writing [[Image:Rose.jpg]] , where "Rose.jpg" is the name of the uploaded image, will result in the follwing. Clicking on the image takes you to the image description page.
Your text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris tempor. Donec suscipit nulla ut tellus faucibus vehicula. Fusce tincidunt, tellus pharetra malesuada sagittis, ante velit cursus felis.
2. VERY IMPORTANT!
If you are going to change image styles on one page, you have to insert the following line after each style, or the word-wrap around the next images will be wrong:
<br style="clear:both" />
3. If you want the text to wrap alongside the image, use this syntax: [[Image:Rose.jpg|right]] . Use "left" instead of "right" to left-justify the image. The option is separated from the file name using a vertical bar character. While "center" will center the image, the text will not wrap around it, but will be displayed below it.
Your text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam tellus. Maecenas adipiscing urna vel nulla. Vestibulum gravida sodales ligula. Aliquam fringilla. Nulla adipiscing. Integer elementum consectetuer lacus. Nullam tempor massa dictum urna. Integer a orci. Sed massa. Aliquam quis quam.
Vestibulum sed nisi. Sed scelerisque vehicula risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus varius cursus justo. Phasellus commodo arcu. Phasellus tincidunt dictum magna. Praesent porta tellus eu odio. Nunc at dui. Duis nisl augue, consequat in, malesuada scelerisque, ullamcorper ac, ante. Integer varius molestie lacus sit amet iaculis varius, lacus metus ultricies urna, ut molestie turpis ligula sit amet mi. Aenean tristique. Vivamus varius leo ac lacus. Donec lacus ante, sollicitudin vitae, tincidunt at, suscipit elementum, massa. Fusce nisl ante, luctus vitae, hendrerit et, fermentum id, arcu. Proin nulla. Vestibulum ac nisl.
4. Smaller images (or thumbnails) can also be automatically created. This syntax [[Image:Rose.jpg|left|100px]] will create an image 100 pixels wide, the height is automatically scaled proportionally. Clicking on the thumbnail takes you to the full-size image in its page description page.
Your text: Pellentesque id lacus. Donec tellus. Fusce sodales mattis enim. Donec adipiscing, sem id tincidunt blandit, est augue ultrices enim, id vestibulum dui lectus placerat pede. Nam ac tortor eu nisl mollis pretium. Donec eu lacus non felis dignissim vulputate. Nam sit amet nibh et nibh adipiscing vulputate. Nunc sed sapien. Fusce et eros. Sed id augue eget diam eleifend dictum.
5. To add a frame with or without a caption with an image, use this syntax: [[Image:Rose.jpg|frame|left|This is a rose]] . The words after the last vertical bar will be the caption, which will be left-justified.
Your text: Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean nisi nisl, hendrerit sed, tempus sed, volutpat eleifend, eros. Vestibulum ultricies, arcu non suscipit imperdiet, est neque viverra enim, non viverra augue nisi et metus. Nullam facilisis. Praesent tincidunt cursus enim. Donec sed nisi. Etiam quam nunc, volutpat ut, vehicula at, consequat nec, diam. Nam mauris ipsum, sollicitudin gravida, fermentum eget, dictum nec, urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dolor metus, pellentesque vitae, aliquam eu, elementum quis, massa.
6. Thumbnails can have frames and captions. This syntax [[Image:Rose.jpg|thumb|left|72px|This is a rose]] will create a thumbnail 72 pixels wide, the "thumb" parameter creates the frame, the caption is at the end of the code. Clicking on the thumbnail takes you to the full-size image in its page description page.
Your text: Pellentesque id lacus. Donec tellus. Fusce sodales mattis enim. Donec adipiscing, sem id tincidunt blandit, est augue ultrices enim, id vestibulum dui lectus placerat pede. Nam ac tortor eu nisl mollis pretium. Donec eu lacus non felis dignissim vulputate. Nam sit amet nibh et nibh adipiscing vulputate. Nunc sed sapien. Fusce et eros. Sed id augue eget diam eleifend dictum.
7. The caption in the thumnail can be a link. In the first example, it is an internal link, the syntax is [[Image:Rose.jpg|thumb|left|72px|[[Wiki Help]]]]
In the second example, the link is an external one, the syntax is [[Image:Rose.jpg|thumb|left|72px|[http://www.ars.org/ Rose Society]]] .
In both cases, the syntax is the same as you would use for regular wiki linking. Note, however, that clicking on the image itself still links you to the image description page.
Advanced Image Use
1. To link to an image description page, without using a thumbnail, use this syntax [[:Image:Rose.jpg]]
Example: Image:Rose.jpg
2. To link to an image description page, using a name different from the image and without displaying the image, use this syntax [[:Image:Rose.jpg|Flower]]
Example: Flower
3. To link directly to the image file, without displaying the image, use this syntax [[Media:Rose.jpg]]
Example: Media:Rose.jpg
4. To link directly to the image file, using a name different from the image and without displaying the image, use this syntax [[Media:Rose.jpg|Red Flower]]
Example: Red Flower
Guide to image sizes
Resizing Images
Images from a digital camera are usually at least 3000 x 2000 pixels in dimension (width x height), and 2-3 megabytes in size. Pixels are little individual color "tiles" that make up the image. This large size makes it difficult to upload them to a wiki. If possible, try to make a smaller copy. A good size for a wiki is no more than 800 pixels in each dimension, at the most. An image this size will be about 100-200 kilobytes, less than one tenth of the original image. This is when saved as a jpg, the usual default format. The image is usually reduced further when inserted in a wiki page, by using wikitalk.
Larger images WILL work, the wiki software will automatically resize them, but it will take much longer to upload the large image, which will not be used. You do not want to discard this larger image on your own computer, as it is better for future printing, zooming in, etc. later on.
There are many ways to make images smaller. The easiest, on the PC, is to download the free program Picasa. This program will automatically download images from your digital camera to your computer, if you have Windows XP. After doing this, you can export and resize the images with the following directions:
Resizing Photos with Picasa or
Set the "Resize to" slider to 800 pixels. For Quality, set Custom Quality, and set it to 90%. Or JPEG quality 90%. The exported files are those that should be uploaded to the wiki, they should not be more than 200 or so kilobytes in size. Save the file where you can find it later, and make sure it has the .jpg extension.
If you have a Mac, the free included application iPhoto can be used. This automatically opens when a digital camera is connected, and you can then import the images. After importing, select one or more images, and go to File>Export. For horizontal images, scale image no larger than 800 pixels wide. For vertical images, scale them no larger than 800 pixels high.
There are many photo editing applications, such as Photoshop, that can also resize images. If you have a choice, resize to 72 dpi (this is not an option in Picasa or iPhoto). This is not absolutely necessary.
If you have some great images, and don't have time to resize them, you can still upload and use them, they will just take longer to upload. We can resize them later.
Copyright issues
1. Ensure you are not breaking copyright guidelines in using the image. A thorough review of the Wikipedia guidelines can be found here and here.
These can serve as general guidelines also. Basically, make sure that either:
- You own the rights to the image, or you created the image yourself.
- You can prove that the copyright holder has licensed the image under a Free Content License
- You can prove that the image is in the Public Domain.
- You believe a Fair Use rationale for the specific use of the image that you intend.
2. Provide proper attribution. Use the image description page to describe an image and its copyright situation. Always specify on the description page where the image came from, such as a URL, and a name for the creator or copyright holder. Unfortunately, you cannot copy/paste long URLs into MediaWiki.
Image Syntax there are also a lot of helpful links at the bottom of this page


