Help:Images

From CGWiki

Images are a great way to enhance an article and since this is a wiki for webcomics, it's highly encouraged.

Contents 1 Uploading images 2 Image guidelines 3 Using images 3.1 Basic 3.2 Floating 3.3 Captions and frames 3.4 Thumbnails and resizing 3.5 Combining everything 3.6 Creating galleries

Uploading images

• Click on the Upload file link on the left hand side in the toolbox.
• Browse and then select the image you wish to upload.
• Fill out the summary, copyright status, and source boxes. These must all be filled out, otherwise the wiki will not accept it.
  • Summary is just a summary of what the image is.
  • Copyright status is who owns the copyright. Either note the copyright holder's name or whether the image is in the public domain, used by fair use, or free use. There are a few templates which apply to images which can be used here: {{Sovietpublicdomain}}, {{Publicdomain}}, {{Avatar}}, or {{Freeuse}}.
• Source is where the image originated.

Image guidelines

• Images should be carefully and specifically named. If you are uploading a banner, do not name it banner.jpg, give it a specific name like your comic name (sfpocomicbanner.jpg). This is to avoid name collisions if another user decides to upload an image with the same name.
• Images which are copyrighted should not be uploaded unless:
  • You are the copyright holder.
  • The image falls under fair use.
• Images should not be excessively large in filesize.
• Images should be uploaded only when needed.

Using images

Basic

Here is the image we want to use. The basic code for inserting an image into a wiki article is simply this:

[[Image:imagename]]

This is just the basic code, though. It doesn't format the image in any way and it simply inserts the image where the code is, just like using <img src> in HTML.

Floating

You can float an image in an article so that it appears on one side or another and the text wraps around it. The code for this is simply:

[[Image:imagename|alignment]]

Where alignment is either left or right.

Note that it may be necessary to use this line of code so that the image does not float down into an unrelated area of the article if the paragraph text is not long enough:

<br style="clear:both;">

However, this can produce unsightly gaps in the text which you can see below.

---

When you put the image code before the text, the text following it will wrap around it automatically so that the image doesn't intrude on the paragraphs. This is an example of right floating.

Here again we have a floating image, but this time it's been floated to the left of the page. In general for long articles with several pictures, it's a good idea to vary the images so that they float on opposite sides of one another instead of having a row of images on one side or the other.

Captions and frames

It's generally a good idea to caption an image which has been used in an article. The code for using this is:

[[Image:imagename|frame|caption]]

The "frame" bit is important as the caption will not display without it.

---

Captions should be a brief description of the image as it relates to the article. Write enough of a caption so that the image is explained without taking up too much space.

Thumbnails and resizing

If you have a large image, it's better to use a thumbnail which links to the large version of the picture.

[[Image:imagename|thumb]]

Thumbnails allow you to use more room on the page for the article and less for the picture.

To resize an image, you just have to put in the desired pixel size.

[[Image:imagename|Xpx]]

Replace X with the desired number for the pixel size.

---

Since the image which was being used is too small to turn into a thumbnail, we'll be using a larger substitute.

As you can see, the thumbnail constricts the image down into a 180px box and clicking on it will take you to a larger version.

You can also resize an image by yourself by inputting the pixel size you wish to use. In this case the image to the left has been resized down to 100px wide.

Combining everything

Now, taking what's been shown in this article, you can combine most all of these elements when inserting an image.

[[Image:imagename|Xpx|thumb|alignment (left or right)|caption]]

In this case the image has been thumbnailed, scaled down to 100px, floated off to the right, and given a caption.

Creating galleries

There are two ways of making galleries in the wiki system.

[[Image:imagename|Xpx|thumb|left|caption]]
[[Image:imagename|Xpx|thumb|left|caption]]
[[Image:imagename|Xpx|thumb|left|caption]]
<br style="clear:left;">

In this case, the images are set to float to the left, then they're all set to stop floating in the <br> using CSS.

Creating galleries like this is easy, the rows will wrap to accomodate larger and smaller browser sizes and you can adjust the size of the image.

---

There is also a <gallery> tag which is still being developed. The code is:

<gallery>
Image:imagename|caption
Image:imagename|caption
Image:imagename|caption
</gallery>

Da

Nyet

Borscht

However, currently the gallery tag does not support resizing the images or adding captions and it can stretch the page for people with smaller resolutions or browser sizes. The advantages to the gallery tag is that it's simpler to use than the previous method.