Wikipedia:Picture tutorial - தமிழ் விக்கிபீடியா (Tamil Wikipedia)

# Wikipedia:Picture tutorial

### கட்டற்ற கலைக்களஞ்சியமான விக்கிபீடியாவில் இருந்து.

குறுக்கு வழி:
WP:PH

This is a tutorial on how to insert pictures in Wikipedia articles using Wikiformat. வார்ப்புரு:Style If you need help uploading an image, or selecting a suitable image for an article, you should also read our image use policy.

Note that before you add an image to an article, you should edit the image description page to explain the source of the image and make sure the copyright status of the image is clearly stated. It is preferred that you use one of the Wikipedia:Image copyright tags, as appropriate.

For the purposes of this article, all examples will be done using Stevertigo's Wikipedia logo.

## [தொகு] Plain picture

  A plain picture with no formatting can be inserted with the statement:

    [[Image:Wikipedesketch1.png]]

  The picture is the same size as the user originally uploaded. The placement in the article is arbitrary, and text does not float (wrap around) it. For example:

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

Notice how the picture cut the text into two pieces, depending on where I put the tag.

## [தொகு] Specifying placement

Now, let's say we want either (a) text to float (wrap around) the picture, or (b) to specify where it gets put (left, right, inline, etc). To to this, we simply append the placement statement.

### [தொகு] Example 1 - Right align, float

    [[Image:Wikipedesketch1.png|right]]

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

### [தொகு] Example 2 - Right align, float, with caption

You'll usually put these at the start of a paragraph so the image floats to the right of the paragraph - it's common to see these at the start of an article.

    [[Image:Wikipedesketch1.png|frame|right|Here is a boring caption]]

Here is a boring caption

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

### [தொகு] Example 3 - Left align, float

    [[Image:Wikipedesketch1.png|left]]

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

### [தொகு] Example 4 - Don't float

    [[Image:Wikipedesketch1.png|none]]

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

## [தொகு] Framing, adding a caption

It's usual to include a caption to describe the image and give credit as necessary. This means that the image will need a "frame"

    [[Image:Wikipedesketch1.png|frame|Here is a boring caption]]

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

This picture was Stevertigo's entry in the Wikipedia mascot contest

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

## [தொகு] Resizing

Let's say that picture is too big. Let's say we want the user to get a smaller version (a "thumbnail") when he/she looks at the article. Thumbnails always include a frame, so when thumbnailing, you almost always want to specify a caption.

Wikiformat supports auto-resizing; that is, our contributors upload a picture of one size, and that picture gets automatically resized when a viewer looks at an article. For example, let's say we want it to be 100 pixels wide:

    [[Image:Wikipedesketch1.png|100px]]

In typical graphical browsers, this image shows '100px' as a hint when the user moves the mouse over the image; in text browsers, '100px' will appear instead of the image. We should be able to improve on this by specifying alternative text, as follows:

    [[Image:Wikipedesketch1.png|100px|Proposed Wikipedia mascotte]]

Let's say we want it 500 pixels wide:

    [[Image:Wikipedesketch1.png|500px|Proposed Wikipedia mascotte]]

As you can see, the image is not scaled to 500 pixels. The wiki software limits the size of unframed images to that of the original. In other words, you can't enlarge pictures unless they are in a frame, which is what we will get to next.

## [தொகு] Thumbnailing

A thumbnail frames a picture. It puts a gray border around a picture. This is a good way of letting a user know that a bigger version is available. It also lets you put a caption on the picture. (See Wikipedia:Captions for caption writing tips.)

    [[Image:Wikipedesketch1.png|thumb|The Wikipedia logo]]

These words-their aspect was obscure-I read inscribed above a gateway, and I said: "Master, their meaning is difficult for me."

And he to me, as one who comprehends: "Here one must leave behind all hesitation; here every cowardice must meet its death.

The Wikipedia logo

For we have reached the place of which I spoke, where you will see the miserable those who have lost the good of the intellect."

And when, with gladness in his face, he placed his hand upon my own, to comfort me, he drew me in among the hidden things.

## [தொகு] Combining different options

Ok, all this so far as has been cool, but it's not really useful unless you combine it all. Let's say we have a picture that we want floating, right aligned, thumbnailed, resized to 100 pixels, and with a caption. You can combine all of the above. Order does not matter, except that the picture name must come first and the caption must come last:

    [[Image:Wikipedesketch1.png|thumb|100px|right|The Wikipedia logo]]

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

The Wikipedia logo

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

## [தொகு] Avoiding image "stackups"

One of the problems many users of floating images hit is that multiple images sometimes "stack up" horizontally, particularly with large screens and wide images. The best solution to this is simply to add more text, but this sometimes isn't possible. This section shows some solutions to this problem.

The Wikipedia logo

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun.

The flag of Scotland, with (roughly) Pantone300 field

### [தொகு] Co-aligning like images

It's very common to have two very similar images that logically should be grouped together. To achieve this, it's currently necessary to use some html markup:

      <div style="float:right;width:315px;">
      [[image:Wikipedesketch1.png|none|thumb|300px|Wikipedia logo]]

      [[image:Flag of Scotland Pantone300.png|none|thumb|200px|The flag of Scotland, with (roughly) Pantone300 field]]
      </div>

Wikipedia logo

The flag of Scotland, with (roughly) Pantone300 field

One thing was certain, that the WHITE kitten had had nothing to do with it: -- it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it COULDN'T have had any hand in the mischief.

The way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr -- no doubt feeling that it was all meant for its good.

But the black kitten had been finished with earlier in the afternoon, and so, while Alice was sitting curled up in a corner of the great arm-chair, half talking to herself and half asleep, the kitten had been having a grand game of romps with the ball of worsted Alice had been trying to wind up, and had been rolling it up and down till it had all come undone again; and there it was, spread over the hearth-rug, all knots and tangles, with the kitten running after its own tail in the middle.

### [தொகு] Alternating left and right floats

Perhaps the easiest way is to make floating images alternate left then right - this way they don't come into contact with one another, and so can't stack up in an unattractive way.

The Wikipedia logo
The flag of Scotland, with (roughly) Pantone300 field

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

### [தொகு] Forcing a break

As a final resort, you can force the browser to insert a break, making all text and images appear below the bottom of the first image. This can produce rather unattractive gaps, particularly in the accompanying text. Remember that text will flow and wrap differently for other users, based on their chosen browser, screen resolution, default font size, accessibility options, number of toolbars and sidebars (such as instant messaging panes) and more -- don't force page design just so that it looks pretty on your machine. Hack only where absolutely necessary. Wherever possible, just use the simplest logical page flow.

       <br style="clear:both;">

The Wikipedia logo

All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy. All work and no play makes jack a dull boy.

The flag of Scotland, with (roughly) Pantone300 field

Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun. Tension, apprehension, and dissention have begun.

### [தொகு] Photo gallery

#### [தொகு] Wiki markup and CSS

To display a series of photos in a gallery, there is a simple method using wiki markup and Cascading Style Sheets: Float all images in the gallery to the left, and clear their left float at the end to avoid having the images run into following content.

    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    [[Image:Wikipedesketch1.png|128px|thumb|left|The Wikipedia logo]]
    <br style="clear: left"/>

Advantages: Adapts to screen width by wrapping, simple markup.

The Wikipedia logo
The Wikipedia logo
The Wikipedia logo
The Wikipedia logo
The Wikipedia logo
The Wikipedia logo

#### [தொகு] Templates

Another method which may become possible in the future makes use of the `{{gallery}}` template. Its syntax is:

  வார்ப்புரு:Template2
  வார்ப்புரு:Template

The following alternative syntax allows image widths to be specified (as `###px`). This may be merged with `{{gallery}}` if conditional parameters are implemented.

  வார்ப்புரு:Template2
  வார்ப்புரு:Template

Advantages: Adapts to screen width with wrapping, simpler markup, no HTML, no visible CSS.

Disadvantages: Puts scroll bars and other nasties in some browsers. Can't specify image size.

வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery வார்ப்புரு:Gallery end

#### [தொகு] New MediaWiki <gallery> tag

The new MediaWiki software has support for a <gallery> tag, which vastly simplifies making image galleries in pages:

    <gallery>
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    Image:Wikipedesketch1.png|The Wikipedia logo
    </gallery>

Advantages: Really simple markup. Probably will get more support as MediaWiki matures (hopefully?), no wasted space between images

Disadvantages: Does not adapt to screen width by wrapping, can't specify image size (hopefully both will be fixed in the next version).

The Wikipedia logo | The Wikipedia logo | The Wikipedia logo | The Wikipedia logo
The Wikipedia logo | The Wikipedia logo | The Wikipedia logo | The Wikipedia logo

## [தொகு] Linking to pictures without displaying them

Let's say you want to link to the picture without displaying it. There are two ways to do it.

  [[Media:Wikipedesketch1.png]]

Media:Wikipedesketch1.png

Notice that it says "media" instead of "image". When the user clicks on the link, the browser goes directly to the image. Also, notice that you can change the text so it says anything you want.

    [[Media:Wikipedesketch1.png|This is the wikipedia logo]]

This is the wikipedia logo

Now let's say that instead of taking the viewer directly to the picture, you want to take them to the image page (where it tells them who uploaded it, when, what the copyright status is, etc). You can do that with:

    [[:Image:Wikipedesketch1.png]]

Image:Wikipedesketch1.png

The only difference between this picture and the very first picture in this tutorial is that I put a colon before "image".

As above, I can make the link say anything I want.

    [[:Image:Wikipedesketch1.png|This links directly to the logo's image page]]

This links directly to the logo's image page

## [தொகு] See also

- m:Help:Images and other uploaded files.
- Wikipedia:Graphics tutorials -- how to make your own pictures.

இக்கட்டுரை ( அல்லது இதன் ஒரு பகுதி ) தமிழாக்கம் செய்யப்பட வேண்டியுள்ளது. இதைத் தொகுத்துதமிழாக்கம் செய்வதன் மூலம் நீங்கள் இதன் வளர்ச்சியில் பங்களிக்கலாம்.
"http://ta.wikipedia.org../../../p/i/c/Wikipedia%7EPicture_tutorial_cbf3.html" இலிருந்து மீள்விக்கப்பட்டது

பக்க வகைகள்: தமிழாக்கம் செய்யப்பட வேண்டியுள்ள கட்டுரைகள் | தொகுத்தல் உதவி

##### Views

- Project page
- உரையாடல்
- நடைமுறையிலுள்ள திருத்தம்

##### தேடு

##### ஏனைய மொழிகள்

- Nederlands