Wikipedia talk:Image markup with HTML

Proposed Software change

I've (Tarquin) made a suggestion to the tech mailing list which would simplify image markup for floated images. but this comes at a small cost. I'll explain the proposed changes here & people can comment on whether they like this trade-off or now.

Current

Here's what we currently have. For a floating image with a small caption:

<div style="float:right;margin:0 0 1em 1em;">[[Image:image name|alt text]]

''Caption''</div>

With a logner caption, you need to add in the width of the image, to limit the width of the div element. (otherwise it displays as wide as the caption and looks odd). This is the markup for a long caption, 300px for example:

<div style="float:right;margin:0 0 1em 1em;width:300px">[[Image:image name|alt text]]

''Caption''</div>

Proposed

All this involves is adding a CSS class to our stylesheet. For small-caption images, we'd write:

<div class="floatright">[[Image:image name|alt text]]

''Caption''</div>

I think this is much simpler. But for wide captions, we'd need to write:

<div class="floatright" style="width:300px">[[Image:image name|alt text]]

''Caption''</div>

Whether this is better, worse, or about the same as before is debatable.

PS I should have said that as I see it, this is very much a halfway house before we get better image markup!

Comments

I think every picture that has a caption should have a width specification, otherwise effects are unpredictable depending on browser, font size etc. Even a slightly overflowing picture box is highly annoying because it invades article space. I also think that the "margin:0 0 1em 1em" is not necessary, it's sufficient to just say "margin:10px" to get a margin of 10 pixels on all sides. Under these circumstances, I don't really see much of a simplification.

I would support this change anyway, if I wouldn't think that current image handling is fairly braindead and should be rewritten to a large extent. After that, DIVs will probably not be directly entered anymore, so I consider minor optimizations in that area of little help. But I won't scream if it gets into our stylesheet regardless. --Eloquence 11:08 24 Jun 2003 (UTC)

Why don't we modify the wiki markup to create the div and apply the style? [[Image:image name|left|alt text]] or something? I think any impure wiki markup is a bad idea. CGS 12:05 24 Jun 2003 (UTC).

---

Proposed

By Ævar Arnfjörð Bjarmason

Currently the syntax for a left aligned image with a alt text is this:
[[Image:Wikipedesketch1.png|Proposed Wikipedia mascotte]]

I propose the following syntax for images that are to have caption text:

[[Image:Wikipedesketch1.png|right|Proposed Wikipedia mascotte|This is the caption text to the proposed mascotte]]

which would render as:

( 200px is the width of the image, this information could be included on-the-fly by PHP

<div class="floatright" style="width:200px;">
<img src="http://en.wikipedia.org/uploat/what/ever/Wikipedesketch1.png" alt="Proposed Wikipedia mascotte">
<p>This is the caption text to the proposed mascotte</p>
</div>

OR

<div class="floatright" style="width:200px;">
<img src="http://en.wikipedia.org/uploat/what/ever/Wikipedesketch1.png" alt="Proposed Wikipedia mascotte">
<br>
This is the caption text to the proposed mascotte
</div>

(The only difference being

<p></p>

( which i personally favor ) and not

<br>

)

Pros

1. Using standard syntax and doesnt leave it up to people to mess with html which they might not get right
2. Always has the width line to avoid the problem User:Eloquence rightly pointed out before

Coins

1. The syntax might frequently miswritten since it presumes the following order of things:
   1. Image:
   2. right/left
   3. ALT Text
   4. Caption

if anyone else has a good idea about how the parser can seperate ALT text and caption please point it out. Perhaps we could use the following: [[Image:Wikipedesketch1.png|right|Proposed Wikipedia mascotte||This is the caption text to the proposed mascotte]]

Which is exactly the same as the above, except it presumes that the caption text is always the text after the ||, this is however unstandard since a dauble pipe is not currently used in the wikisyntax, i reccomend the first idea, to just presume that we have that order.

---

Table auto-size

This is a rather long caption, but thanks to the table tag (replacing the div tag), it does not increase the width of the whole construct! It still uses the "style" element for the left and lower borders.

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Tables are for tabular data. You can tell this because it is called the table element. Pet peeve. CGS 12:24 24 Jun 2003 (UTC).

---

I'd also like to see text-align:center in the floatright class. It's not always what's desired, but it can always be overridden by a style="text-align:left" if need be. -- John Owens 12:34 24 Jun 2003 (UTC)

very tricky. The text can be centered, but if I combine this with the suggestion below to set the width of the caption paragraph, it looks odd. (non-centered block with centered text). I suspect there is no way to center the caption block within the floating block. -- Tarquin 16:05 24 Jun 2003 (UTC)

Ideally, we'd have practically no HTML in Wikipedia code. I really like the [[Image:blah|left|alt-text]] idea, since it could be done without any DIVs at all (but gets tricky if a caption is needed). The DIV width hack just seems ugly to me, but I am not sure how it can be worked around. Here's one possibility that may make things simpler:

<div class="floatleft">[[Image:blah|alttext]]<p style="width: 200px;">This is a really long caption which will be restricted to 200px in width</p></div>

That way, the div code can stay the same, and only the paragraph containing the caption need be modified. Even better, perhaps we could define a "caption" class that causes all captions to be displayed in a certain way (small font, emphasized maybe), but again, there's that width problem. I really dunno. All I'm sure of is that I strongly vote against using tables of any kind for this. -- Wapcaplet 13:36 24 Jun 2003 (UTC)

*reads again* Ah, that's quite a neat idea. The caption paragraph can be selected with ".floatright p " -- Tarquin 16:05 24 Jun 2003 (UTC)

... but some images may be narrower than 200px. Any further thoughts on this? A rough show of for /against would be interesting -- Tarquin 13:53 27 Jun 2003 (UTC)

I'm for, but I think it should be incorporated into the [[Image:...]] markup. Having HTML in the Wiki should be a last resort, not common practice. CGS 15:22 27 Jun 2003 (UTC).

it's meant as a halfway step until we get better markup. The idea is that the CSS classes are the same as for future "smart" wiki markup. -- Tarquin 16:03 27 Jun 2003 (UTC)

---

First off, I think that the "Proposed" is far superior to the "Current", because the current form of the style attribute is highly abstruse.
As far as replacing the whole div construct with a Wikitax construct, I don't think it's necessary. How to edit a page includes a good number of practically irreplaceable HTML tags, such as <table> and <math>, not to mention the special-character codes. If we're going to eliminate the HTML, we need to eliminate all that too.
On top of that, it would require a dramatic expansion of Wikitax. Wikitax has very half-hearted tags - they're made up entirely of special characters, and have a very primitive implementation of attributes. I think it would be nice to have something like this:

[[imgbox img="coolpic.png" alt="some text" style="center" cite="a special attribute for citing sources" caption="write the caption here"]]

but it looks like such a fundamental rewriting of wiki code that nobody would want to do it. So we might as well do the same thing as a stylesheet-defined HTML tag. (Stylesheets can define brand-new tags, right?) -Smack 22:32 1 Jul 2003 (UTC)

how to pad

The value of the width (here 270) should be slightly larger than the actual width of the thumbnail.

This is really just a hack, and not recommended for a number of obvious reasons. padding is better, but margin-lefg is even better because it places the spacing only where it is needed. Which I think looks better. -- Egil 13:43 May 5, 2003 (UTC)

PS: I also have left out the <small> for captions, since it decreases readability. The Wikipedia:Manual of Style recommends straight italics, and at least to my taste that makes the image caption stand out to a sufficient degree. -- Egil

Sequence of images

Moved from the village pump:

Can some kind soul show me how to put a sequence of four images down the right hand side of the page so that they form one unit and no text can sneak in between them. I'm referring to Sistine Chapel that I illustrated. I reckon the page would look nicer if I had all four pics together and there would be no problems with pics overlapping in different browsers. Thanks.
Adrian Pingstone 09:01 14 Jun 2003 (UTC)

LittleDan told me something like this a few weeks ago:

<table align=right>
  <tr><td>
     <div style="float:right;">
         [[image:___Name___ | __Description_]] <br>
         <small>''More detailed explanation<br>
         [[media:___Name___ | Larger version]]''</small> 
         <br><br>
         [[image:___Name2___ | __Description_]] <br>
         <small>''More detailed explanation<br>
         [[media:___Name2___ | Larger version]]''</small>
         <br><br>
         [[image:___Name3___ | __Description_]] <br>
         <small>''More detailed explanation<br>
         [[media:___Name3___ | Larger version]]''</small> 
         <br><br>
         [[image:___Name4___ | __Description_]] <br>
         <small>''More detailed explanation<br>
         [[media:___Name4___ | Larger version]]''</small>  
     </div>
  </td></tr>
</table>

--Menchi 09:08 14 Jun 2003 (UTC)

It's easier than that, no need for tables. I've done the first two -- Tarquin

Thanks, Menchi for your info. I'm sorry you had to do so much typing but I'll use Tarquins method (Tarquin, thanks).

Adrian Pingstone 09:46 14 Jun 2003 (UTC)

Not much typing, just copy-and-paste. If Tarquin's method is simpler, the better. :-) --Menchi 09:57 14 Jun 2003 (UTC)

OK, the code is now in place in Sistine Chapel to put four (or whatever) pics in a column, which are then effectively one pic. Thanks to Menchi and Tarquin for their replies.

Adrian Pingstone 11:22 22 Jun 2003 (UTC)

---

Thanks to wapcaplet for the section on markup.
In the interests of scalability and uniformity, it might be better to always use the version of the <div> tag with the text-align attribute. -Smack 17:09 20 Jun 2003 (UTC)

Side by side images

There was discussion of side by side images on the pump a while back (now archived) and I asked for comments about what I've done in the mandolin article and got no response.

I raise it again here because if it's a good answer that I've given I'll add it to this gallery, so others can use it.

I think this gallery is an excellent idea. If we just link to pages for markup examples there's the danger it will change (an acceptable risk for the pump but not for longer-lived pages), to link to old versions is cumbersome (but may be appropriate in some circumstances), and to put all the examples that I hope will eventually be here into the markup section of the image policy page seems excessive.

But obviously, if there are pitfalls to what I've done I want to fix it, not spread it. The obvious circumvention is to combine the two photos into one image using a photo editor. I've not done this because:

• This seemed simpler.
• This way, future editors of the page have far more easy options.
• For anyone using a really narrow screen, but still wide enough for one of the images, this seemed to work best.

But, there may well be other ramifications I haven't thought of. Andrewa 20:57, 4 Oct 2003 (UTC)

I think this works quite well. See also Geyser#Exploding_geyser. When downsizing my browser's window (IE), the images simply form a single column. Gorm

Alt versus title attributes

I've just spotted - and changed - what I consider to be an error on the Extended image syntax page. Namely, it repeatedly described the images associated text as its alt text, when in fact it is (quite rightly) also used for the related but different purpose of a title attribute - one is instead of the image, the other is as well as it. On that page, I went through and called it caption text throughout, but this page already uses alt text and caption for two different things, so I'm not sure how it could better be worded.

And as for Wikipedia:Alternate text for images - surely the whole article is based on a false assumption. Am I going mad, or has everyone else decided to ignore the fact that it's also a title attribute?

- IMSoP 12:39, 30 Jan 2004 (UTC)

Article link using Image?

Is there any way to use a small image icon as a link to an article? Having clickable icons would be very handy for data tables and the like. Over at Talk:Ryanair we have been discussing using a Unicode airplane (✈) as a link to the destination airport, like this Cork ✈. Unfortunately, this doesn't work with many browsers. What I'd like to do is link the image File:1a2.png to the airport. Easy to do in HTML, but is it possible in Wiki? Seabhcán 14:31, 26 Nov 2004 (UTC)

Currently, there is no way of doing this. A rather odd hack is being used, for instance, for the links to sister sites on the front page, where the description page ("Image:whatever") is made into a redirect; thus, clicking the image gets you redirected. But this isn't much good for you, since you'd need a copy of the image for every airport, which would be silly. There is a pending feature request at Bugzilla:539 to allow exactly this, which I started working on, but I'm afraid I haven't finished coding a proper version yet (I got distracted tidying up a whole section of the code, in the hope of making things easier for myself). Of course, if I (or someone else who gets fed up waiting for me to do it) hard-code a description-link in as described there, that's going to be a bit of a pain for this particular use too; hmm... - IMSoP 15:10, 26 Nov 2004 (UTC)