Ireland Information Guide , Irish, Counties, Facts, Statistics, Tourism, Culture, How

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

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

[edit]

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.

[edit]

Example 1 - Left align, float

 [[Image:Wikipedesketch1.png|left]]

[edit]

Example 2 - Right align, float

 [[Image:Wikipedesketch1.png|right]]

[edit]

Example 3 - Don't float

 [[Image:Wikipedesketch1.png|none]]

[edit]

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. Wikiformat supports auto-resizing; that is, our contributors upload a picture of one size, and that picture gets automatically resized when a viewer looks an 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 Ireland Information Guide mascotte]]

Let's say we want it 500 pixels wide:

 [[Image:Wikipedesketch1.png|500px|Proposed Ireland Information Guide 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.

[edit]

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 Ireland Information Guide:Captions for caption writing tips.)

 [[Image:Wikipedesketch1.png|thumb|The Ireland Information Guide logo]]

The Ireland Information Guide logo

[edit]

Framing

You can also create a frame around a picture without making it into a thumbnail. It also puts a gray border around the picture and lets you put a caption in the picture using only image markup. (See Ireland Information Guide:Captions for caption writing tips.)

 [[Image:Wikipedesketch1.png|frame|The Ireland Information Guide logo]]

The Ireland Information Guide logo

[edit]

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 Ireland Information Guide logo]]

The Ireland Information Guide logo

[edit]

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 article shows some solutions to this problem.

The Ireland Information Guide 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

[edit]

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|Ireland Information Guide logo]]

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

Ireland Information Guide 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. 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.

[edit]

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 Ireland Information Guide logo

The flag of Scotland, with (roughly) Pantone300 field

[edit]

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 Ireland Information Guide logo

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.

[edit]

Photo gallery

[edit]

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 Ireland Information Guide logo]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Ireland Information Guide logo]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Ireland Information Guide logo]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Ireland Information Guide logo]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Ireland Information Guide logo]]
[[Image:Wikipedesketch1.png|128px|thumb|left|The Ireland Information Guide logo]]
<br style="clear: left"/>

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

The Ireland Information Guide logo

[edit]

Templates

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

Template:Template

The following alternative syntax allows image widths to be specified (as <code>###px). This may be merged with {{gallery}} if conditional parameters (http://meta.wikimedia.org/wiki/Extended_template_syntax#Inserting_multiple_elements:_the_.22for_each.22_construct) are implemented.

Template:Template

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

Template:Gallery Template:Gallery Template:Gallery Template:Gallery Template:Gallery Template:Gallery Template:Gallery Template:Gallery

Currently this does not produce what intuitively it should, for a variety of reasons:

any particular template is currently limited to five occurrences in a page
<code>{{subst}} templates (http://meta.wikimedia.org/wiki/Help:Template#subst) with parameters are not implemented yet
- If this was implemented, a workaround for the template limit would substitute the template instead:

Template:Substemplate

links constructed from parameters are treated as if their target doesn't exist
- Presumably when this bug is fixed, the above gallery will display correctly.

[edit]

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 Ireland Information Guide logo]]

This is the Ireland Information Guide 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

[edit]