Image pages

See mw:Help:Images for updated information on how images work.

I think this is resolved now with the new Image markup! :)

Problems with image pages:

• adding an image to a page often involves a ton of ugly HTML markup
  • for the caption (smaller text, centered, link to larger etc)
  • to get it to float
• Various accessibility problems to do with use of div, etc.

What can we do about this?

• Store captions, ALT text, etc on the image description page in some way
• provide a wiki syntax that specifies positioning

Auto captions

Caption and ALT text are somehow stored on the Image page itself, and on page display plucked out.

Various syntax proposals: Image pages/Data syntax

Captions should be generated as TITLE text, with an appropriate CSS to display them in italics underneath the image. In addition a longdesc attribute would be auto-generated.

You should be (at least) able to override the alt text in the image description page if you wish, which may be useful in some cases where one image is used on multiple pages. The image description page would just provide a default.

Positioning

Use simple wiki markup to specify the positioning of the image.

The syntax proposals below should be considered superseded by LDC's proposal

This can then:

• generate "<img class="foo" ... >" in HTML, and let the CSS float. (markup in the articles used to float uses CSS float: too, so whatever compatibility problems with old browsers aren't made any worse)
• it could be made so that a person can set in their Special:Preferences whether to get the [[left;image]] and [[right;image]] as CSS or HTML; perhaps it could do it as a table if a person can't do CSS, although that might involve the complication of having to indicate somehow where the text side of the table ought to end.

Suggested syntax:

[[left;image:image.png]] - float left
 [[right;image:image.png]] - float right
 [[block;image:image.png]] - block (ie no text either side)
 [[inline;image:image.png]]

The default behaviour for [[image:image.png]] would be "inline" to ensure compatibility with all the current image tags. Though if at some point all images are changed over to this system, it would make sense to adopt "block" as the default - this point can be left open for now.

You should be able to do floating images inline to a paragraph: eg:

The Moon is a satellite of the Earth. [[left;image:image.png|From space, the Moon appears as a grey sphere, pocked by craters.]] The Moon has no atmosphere.

This has accessibility benefits.

Link to larger version

This could be coded in to the end of the caption. Suppose on the image page we put:

#LARGER [ [image:image name ] ]

Have the script turn this into a link at the end of the displayed caption:

see a <<larger version>>.

I prefer just

<<larger version>>

Another suggestion - could the larger version link open as a new, appropriately sized, "popup" window when clicked on? I guess that might not be to everyone's aesthetic taste, though...

Display what alt text is used on image description page

On the image page, there's currently a list of "what links here". It might be good to display the alt text used by each page next to the link (if it doesn't use the default). This would allow folks who particularly care about correct ALT text to check that all uses of an image have decent alt text.

Larger version on image description page display

On the actual image description page, #LARGER [ [image:image name ] ] would get converted into:

• a link to the image description page of the larger image
• a link to the actual larger image.

For example, the equivalent of:

[[Media:larger-version.jpg|larger version]]
[[:Image:larger-version.jpg|info on larger version]]

I also think we should display the actual image on the image description page, at the bottom. This would avoid problems of putting the wrong copyright notice on the wrong page, which I've done before. Plus, people viewing the image description page probably have the image cached anyway, so it costs no bandwidth.

Alternatively, the larger version of an image could share the same image description page. Essentially this would mean that the larger version image description page would redirect to the smaller version image description page. In this case, we only need the [ [:Media] ] link, not the [ [:Image] ] link.

Image maps

Clickable image maps would be very desirable for some circumstances, such as maps, where one may wish to visit the article on a subentity by simply clicking on the map.

A definition for the image map could be written into the image description page and automatically provided in pages that import the image.

There are several standard formats for image maps, both client side and server side. What the wiki engine needs to do is translate the regions to a client side image map in HTML. http://phpwiki.sourceforge.net/phpwiki/ImageMap shows an example implementation for PhpWiki. The image map regions are stored in a separate wiki page.

Any chance we're gonna have ImageMaps around? It might be less work to just use the HTML tags in here and to have the wiki support them. F16 13:17, 31 Oct 2004 (UTC)

Generalizations

Could this sort of thing be extended to tables? Again, the aim being to keep HTML off article pages.

There are debates on wiki syntax for tables at Wiki markup tables and WikiShouldOfferSimplifiedUseOfTables, but this would give us an intermediate step: move off HTML table markup to [[table:taxobox Tastyus Supersonicus]]. Then at a later stage we can implement wiki markup -- but that takes care of the key task of making article source look non-horrendous.

Vector Graphics

Vector graphics need to be rasterized by the person who uploads them. If SVG image support were added this would not be a problem.

---

A modest proposal

See Wikipedia:Alternate text for images for notes on some of the accessibility bugs with Wikipedia's current image handling (as well as an explanation of why it is unlikely to be appropriate to use the same alt text for the same image in multiple articles).

In my view, to improve Wikipedia's accessibility, the following needs to be implemented (in descending order of importance):

1. Defaulting alt to "", rather than to the filename.
2. Implementation of Wiki markup which maps to an img’s title attribute (perhaps [[Image:source-of-image|alt text|title]]), so descriptions/captions can be put there.
3. Implementation of Wiki markup which maps to <img class="illustration" … > (perhaps [[Illustration:source-of-image|alt text|title]]), where Wikipedia's style sheet specifies .illustration {float: right; clear: right; margin-width: 0 0 1em 1.5em;}, so floating images no longer need to be wrapped in div (getting rid of the "ton of ugly HTML markup" described above), so images can be coded wherever their alternate text would most appropriately fit without altering their visual presentation. (Warning: I have not tested that CSS, so the margins may not be quite correct.)
4. The addition of the rules .illustration[title] {display: inline-block; margin-bottom: 0.75em;} .illustration[title]:after {display: block; margin: 0 auto 1em; font-style: italic; font-size: smaller; text-align: center; content: attr(title);} to Wikipedia’s style sheet, so descriptions/captions will be displayed by modern visual browsers in the page itself, without annoying non-visual readers with captions for images they can't see. (Ditto for that CSS.)

-- Mpt 2003-06-13

1 - Why do this? I always give very descriptive file names so that those names then become alt text. It would create more work for me if I had to manually insert alt text for each image. --Maveric149

At a minimum, it would be nice if the alt-text auto-dropped the file extension, so it was "prince-of-wales-goes-fishing", not "prince-of-wales-goes-fishing.jpg". --mrd

I agree. Also drooping anything in parenthesis would be nice too since parens could be used to indicate image size. --Maveric149 08:37 13 Jun 2003 (UTC)

2 - the suggestion above is to use right;image:blah-blah.jpg, which would be consistent with all images. --mrd

Maveric149, no matter how descriptive your filenames are, they're extremely unlikely to be suitable as alternate text, precisely because they're descriptive rather than alternative. That's what I tried to explain in the article. For example, "prince of wales goes fishing" might be an acceptable title, but it would make no sense as alt text. Appropriate alternate text might be something like "The Prince enjoys outdoor pursuits, including angling.", in an article about the Prince of Wales. In an article about recreational fishing, on the other hand, appropriate alternate text for exactly the same image might be ", such as the Prince of Wales", where the image was coded just before the full stop at the end of a sentence about celebrities who enjoyed fishing.

I am trying to make less work for authors, not more -- that's why I'm proposing that alt default to "", because "" is usually the best choice. -- Mpt

How is having nothing as the default helpful to anyone? The way we have it now at least there is something for alt text. --Maveric149

Anybody joining this discussion should read en:Wikipedia talk:Alternate text for images. For one thing, it answers mav's question, and even though I may not find the answer entirely convincing, I'm certainly in a better position for further discussion! -- Toby Bartels 17:24 1 Jul 2003 (UTC)