Help:Images

From ChemPRIME

Jump to: navigation, search

Images are an integral part of articles on ChemPRIME. They can be used to illustrate a chemical concept or simply to provide an eye-catching "lead-in" to an exemplar. Unlike videos and other media usable on ChemPRIME, anyone can upload an image and customize how it is displayed on an article.

Contents

Images: Introduction

You can upload an image via Special:Upload, which is linked to on the left sidebar under "Upload file". When uploading, it is important to license your file correctly in order to avoid copyright violation. In the summary field of your file, insert the Information template and fill out all fields.

To display an image on a page, link to it with square brackets as you would a page. The term "File:" must be retained when linking, as well as the image type (.png, .jpg, etc.). The basic syntax for linking to an image is:

[[File:name|type|location|size|caption]]
  • Type - how the file is enclosed
  • Location - where the file is aligned on the page
  • Size - The size of the image in terms of pixels (px)
  • Caption - Text here is displayed when mousing over the file, or in an enclosed box when the "thumb" type is used.

With the exception of the filename placed at the beginning of the link, the other fields may be omitted or organized in any order. Note that filenames are case sensitive. Here is an example of the preferred formatting of an image. The picture is of moderate size, enclosed in a thumbnail, and given a bolded, appropriate caption, along with a Figure number for reference.

Image Wiki Code
Fig 1. Hexane is a member of the alkane family. The three dimensional structure shows the tetrahedral and nonpolar geometry around each carbon atom.
[[File:Hexane BallandStick.png|300px|thumb|'''Fig 1. Hexane is a member of the alkane family. The three dimensional structure shows the tetrahedral and nonpolar geometry around each carbon atom.''']]

The remainder of this page describes in detail the three important steps when adding an image: uploading files, licensing files, and formatting images on the intended page.

Uploading

The first step in adding an image to a page you are creating is to upload it to the ChemPRIME wiki. This can be done by clicking on the upload file link found under "toolbox" in the bar on the left side of your browser when viewing any page on the wiki. Before uploading a file, make sure it is in a supported format (png, gif, jpg, or jpeg), and is under 8MB in size. It is also a good idea to resize the image to the size you would like to see it on the page before uploading. The maximum width of images on ChemPRIME should be 500 pixels.

In the first box, Source filename, on the upload file page, you may either enter in the name of the file you wish to upload, or click Browse, which will allow you to look for the file on your computer, click on the file name, and then click open to have the file name inserted into the box.

This should fill in the second box, Destination filename. This is the name of the page on the wiki that will be created for your image. The wiki will use the name of the file by default. If this name is not a useful description of the content of the image, change to a better description. This will make finding the image easier for you and other ChemPRIME users.

In the final box, Summary you may write a description of the image you are uploading. Note that even if you put in a description here, you will still need to add a description, keywords, date, source, author, and permission in the licensing step, after the image is uploaded.

You may click on Watch this file if you want email notifications when the image page is altered. Clicking on Ignore any Warnings prevents notifications from appearing if you are uploading an image to an already existing page.Do not click Ignore any Warnings  if you believe you are creating a new image page, because you want to be warned if you have duplicated a destination filename for an image already on ChemPRIME.

Finally, click upload file to create a new file page.

Licensing

Now that your image is uploaded, it is important to add information like keywords, author, source, and copyright permission to the image page. There is a specific template for adding information: Template:Information.

Once an image is uploaded, click the edit tab on the top of the page as you would for any other page on ChemPRIME. Then, enter the information as seen on the template. Below is an example of the code format:

{{Information
 |Description=Heme B
 |Keywords={{ListCategory| Bioorganic Chemistry}}
 |Source=http://en.wikipedia.org/wiki/File:Heme.svg
 |Author=Lennert B
 |Date=2005
 |Permission=released to the public domain
 }}

This appears on the image page as:

Description

Heme B

Keywords

Bioorganic Chemistry

Date

2005

Source

http://en.wikipedia.org/wiki/File:Heme.svg

Author

Lennert B

Permission

released to the public domain


This format can be copied and pasted in while editing the image page, replacing each field appropriately. Below are descriptions of what belongs in each field:

Description

Write a description of the image.

Keywords

These are the JCE Keywords that relate to the image. They can be found at <http://jchemed.chem.wisc.edu/Contributors/Authors/Journal/keywords.html>. To quickly find the appropriate keyword you can hit control or command "F" and then search the whole page for matching keywords. The keywords need to match the keywords on the JCE website exactly with regard to spacing and capitalization, so its best to copy and paste them.The JCE keywords used to classify an image organize the images into category pages. These category pages can be seen here Special:Categories. It is because of this organizational system that it is essential that you copy and paste the JCE Keywords exactly as they are shown on the JCE page linked to above.

Date

Date of the image. If unknown type "unknown".

Source

This is the web source of the image. The website should link directly to the image being used. For example do not link to the Wikipedia page that uses the image as this can change. Rather click on the image in Wikipedia and link directly to the image page. It will have a page name similar to the example shown above: "File:filename.jpg"

Author

The author of the image. If unknown type "unknown".

Permission

Type the copyright permission here. Only images with equal or less restrictive access than the "Attribution-Noncommercial-Share Alike 3.0 Unported" can be used on the wiki. For more information on the permission of the wiki, "Attribution-Noncommercial-Share Alike 3.0 Unported" click here <http://creativecommons.org/licenses/by-nc-sa/3.0/> Also, at the bottom left of each page on this wiki is a Creative Commons logo which links to the standard license used on this wiki.



Formatting

This section covers placing and formatting images onto the ChemPRIME page you are working on. To display an image on a page, link to it with square brackets as you would a page. The term File: must be retained when linking, as well as the image type (.png, .jpg, etc.). Since the image page already has the correct name, it may be easiest to copy and paste the title of the image page. The syntax for linking to an image is:

[[File:name|format|alignment|size|caption]]

Below is an example of the formatting that most images on ChemPRIME use when placed on a page:

Image
Fig 1. Hexane is a member of the alkane family. The three dimensional structure shows the tetrahedral and nonpolar geometry around each carbon atom.
Wiki Code
[[File:Hexane BallandStick.png|thumb|none|500px|'''Fig 1. Hexane is 
a member of the alkane family. The three dimensional structure shows 
the tetrahedral and nonpolar geometry around each carbon atom.''']]


A more in depth description of useful syntax commands and examples are given below:


format - This controls how an image is displayed upon the page. The most commonly used commands are:

thumb This format adds an extra line, and a caption may be enclosed with the image. The image can be made smaller, but not larger than the original image. Since most images are usually too big to fit the width limit of the page (500 pixels), this should be the the default format used.
Figure 2.This is where the caption appears for thumb images
The wiki code for this image is:
[[File:Alpha Beta Particles, Gamma Rays in a Magnetic Field.jpg|thumb|none|'''Figure 2. This is where the caption appears for thumb images''']]
frame This format encloses the image similar to the thumb format, but the size of the image cannot be altered in this format. A caption may still be inserted.
Figure 3. This is where the caption appears for frame images.
The wiki code for this image is:
[[File:Alpha Beta Particles, Gamma Rays in a Magnetic Field.jpg|frame|none|'''Figure 3. This is where the caption appears for frame images.''']]

Other commands include border which adds a light gray boarder to the image, and frameless which is essentially the same as not specifying a format. Since both these formats do not display the caption specifically as text, but force the user to move their cursor over the image to see the caption, these formats are discouraged. It is better to use the thumb or frame format.


Location - where the file is aligned on the page. Possibilities include: right and left, which places the image on either the right or left side of the page, with text wrapping around it, center which places the image in the center of the page, but does not cause text to wrap around the image, and none which aligns the image on the left side of the page, but breaks the text so there is no wrapping around the image. Of these commands, either center or none are preferable, as the size and resolution of a reader's browser modify how the text wrapping and placement of the image are displayed when right or left are used, and can lead to an image being farther down the page than intended, or cause text to be broken up in a distracting manner.

Size - This controls the size of the image in terms of pixel width. For instance, if you wanted an image 300 pixels wide, the command would be 300px. The height scales, so the image retains the same proportions. Two examples are given below:

Figure 4. 300px
The wiki code for this image is:
[[File:Iodine Image.JPG|thumb|none|300px|'''Figure 4. 300px''']]
Figure 5. 150px
The wiki code for this image is:
[[File:Iodine Image.JPG|thumb|none|150px|'''Figure 5. 150px''']]


Caption - Text here is displayed when mousing over the file, or in an enclosed box when in the frame or thumb format. Examples of how this work can be seen in the wiki code of some of the other example images. Notice that wiki code syntax still works in captions as described on Help:Syntax. For instance, in the two images displaying the syntax for changing size, the text can be made bold using the same syntax as in the regular text. As convention of ChemPRIME, every image should have a caption, to make it clear to the reader how the image relates to the text, and the caption should be bold.

With the exception of the filename placed at the beginning of the link, the other fields may be omitted or organized in any order. Note that filenames are case sensitive.

More Information

More information on formatting images can be found on Wikipedia

Making Galleries

Most image needs in the ChemPRIME wiki can be taken care of using the formatting already described. If you want to show a set of pictures together, an image gallery may also be created. The syntax for doing this differs slightly from the syntax for adding a single image.

A gallery can be coded for by the general form:

{{Caption|<gallery widths= perrow= >
File:first image name|caption for first image
File:second image name|caption for second image
.
.
.
File:Last image name|caption for last image
</gallery>|caption=gallery caption}}

Notice that the details of a gallery's format are inside the <gallery> tag. You control the following details of the gallery through these commands:

widths= After this command, put in the pixel width you want for each picture in your gallery. For instance, if you wanted each picture to be 200 pixels wide, you would enter widths=200px in the gallery tag.

perrow= After this command, put in the number of pictures you want in each row before starting a new row. For instance, if you wanted 2 pictures in each row, you would enter perrow=2 into the initial gallery tag.

caption= After this command, put in the text you want as a caption to describe the entire gallery. If you just use the caption= in the the <gallery> tag, the caption will be outside of the frame. To get this caption inside the frame, you need to begin the code for the gallery with:

{{Caption|<gallery></gallery>|caption=gallery caption}}

This formatting is recommended, as it tends to look neater. Again, a caption is recommended for every gallery, so that the reader understands the relation of the images to the text.

Now that your gallery is set up, simply enter each image you want in between the <gallery></gallery> tags in the form:

File:Image name|caption for this image

Thus, every image, and the gallery as a whole may be captioned.

As an example, the wiki code:

{{Caption|<gallery widths=190px perrow=3>
File:Chlorine Image.JPG|Cl<sub>2</sub>, a yellow green gas
File:Bromine Image.JPG|Br<sub>2</sub>, a red brown liquid
File:Iodine Image.JPG|I<sub>2</sub>, a dark crystal
</gallery>|caption='''The halides show great physical variation'''}}

creates the image gallery:


The halides show great physical variation


Another useful source for image formatting, gallery formatting, and other image syntax is the MediaWiki Help Page on Images .

Personal tools