Wikimedia Meta-Wiki

Thumbnailed images

You know the image box of the new image syntax? No? It looks like this:

Henry VIII

Do you like it? No? You would prefer a pink background? A thinner border? Or a thicker one?

Design contest

edit

Let's have a design contest! Add your proposals to this page, add your name and a name for the design. I'd propose to start voting on March 15. If more than 20 designs are around, the voting should have two phases, a nomination phase and a final vote. The rules of the logo voting shall apply in that case. -- JeLuF 18:30, 28 Feb 2004 (UTC)

We are also trying to define the standard XHTML/XML code that will be used to generate the thumbnailed images. A fine example can be seen at doublep's design in this page. If you want to participate in the dicussion of the code, please do so at the discussion page. For more information, visit Layout development. --Maio 16:58, 7 Mar 2004 (UTC)

Voting

edit
  • Voting will end on Sunday, March 21, at 23:59:59 UTC.
  • Everyone has three votes.
  • Vote by adding a new item to the list and sign it with three tildes: # ~~~.
  • Please use the Votes-sections to place your vote.
  • Clarification: You need an account for at least one MediaWiki project to vote.

See also: /Feature Poll


Two important questions--one, should people really be able to cast three votes on one design? We might as well only have one, then. And two, must people have a meta account to vote (i.e., should I delete anon votes below?)? I would advocate that. Jwrosenzweig 18:27, 17 Mar 2004 (UTC)
Anonymous votes are not allowed, since they can't be verified. Voting with three votes for one design - well, I fear it's to late to address this. -- JeLuF 21:25, 17 Mar 2004 (UTC)
Why is it too late? Anyone with the slightest amount of common sense knows that "three votes" means you have to spread your votes. Evidently the first user who did this was either stupid or testing the system - and others have followed his/her example. I can't see how anyone could support such a system but I suggest we put it to the vote anyway. Let's not get all anal and say we can't change the voting system half way through.

Voting on voting system clarification

edit

1 vote maximum per design

edit
  1. Ed_g2s 81.128.25.120 03:39, 18 Mar 2004 (UTC) (yeah, I know - no meta account).
  2. Hajor (that's two people above me, right?)
  3. Noldoaran 17:04, 19 Mar 2004 (UTC)
  4. Marshman 23:54, 19 Mar 2004 (UTC) (only makes sense)
  5. James F. (talk) 21:21, 20 Mar 2004 (UTC)

up to 3 votes

edit
  1. \Mikez 14:06, 20 Mar 2004 (UTC) Of course - either you have one vote and thats it, or you have three and then noone should set up any rules about how to use them!
  2. GerardM 23:58, 20 Mar 2004 (UTC) Problem is, when someone voted three times on seperate designs it counts three times and when they are in one place they are not? It is bad practice to change voting rules while voting!
  3. Fruggo (don't change voting rules while voting)

Designs

edit

Current

edit
 
Henry VIII
 CSS: 
div.thumbnail-none, div.thumbnail-right, div.thumbnail-left {
	padding: 2px;
	border:1px solid #8888aa;
	background:#CCCCCC;
	margin: 0.3em 0 0.5em;
	font-size: 85%;
	text-align: center;
}

div.thumbnail-none p, div.thumbnail-right p, div.thumbnail-left p {
	margin-top:3px; margin-bottom:3px;
	text-align: left;
}
 
Wikipedia logo
 HTML: 
<div class="thumbnail-none" style="width:100px;">
 <a href="/wiki/Image:Hans Holbein d. J. 049.jpg" class="internal" title="Henry VIII">
  <img border="0" src="/upload/thumb/7/7d/100px-Hans Holbein d. J. 049.jpg"
  alt="Henry VIII" width="100" height="140">
 </a>
 <a href="/wiki/Image:Hans Holbein d. J. 049.jpg" class="internal" title="Enlarge">
  <img border="0" src="/upload/magnify-clip.png"
  width="26" height="24" align="right" alt="Enlarge">
 </a>
 <p>Henry VIII</p>
</div>

By JeLuF

Votes (18 votes, 10 unique)

edit
  1. JeLuF
  2. Gwicke (with the new icon   and a white background)
  3. Gwicke vote #2..
  4. Gwicke vote #3..
  5. Den fjättrade ankan (first vote)
  6. Den fjättrade ankan (second vote)
  7. Den fjättrade ankan (and third vote)
  8. Hagbard
  9. Seth Ilys
  10. Shizhao
  11. DaB.
  12. 217.215.149.20
  13. 217.215.149.20
  14. 217.215.149.20
  15. Lorax
  16. Rudolf 1922 12:47, 20 Mar 2004 (UTC) (1st vote)
  17. Rudolf 1922 12:47, 20 Mar 2004 (UTC) (2nd vote)
  18. Rudolf 1922 12:47, 20 Mar 2004 (UTC) (3rd vote)
  19. Elinnea
  20. Elinnea
  21. Elinnea

Melkom

edit
 

Henry VIII
bigger image

 

Wikipedia logo
bigger image

HTML: 
<div style="width:100px; margin:5px; border:1px solid #ababab; float:left;">
[[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]
<p style="font-size:smaller; margin:2px;">
Henry VIII<br>
[[:image:Hans Holbein d. J. 049.jpg|bigger image]]
</p>
</div>

From [1], by user Melkom, nominated by JeLuF.

Votes (3 votes, 3 unique)

edit
  1. JeLuF
  2. Secretlondon
  3. Melkom

James F.

edit

 

Henry VIII

 

Wikipedia logo

HTML: 

<div style="width:100px; padding: 2px; border:1px solid black; margin:1em; font-size:smaller;">
  [[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]
  <div style="text-align:center;">
    Henry VIII
  </div>
  <div style="text-align:right;">
    [[:image:Hans Holbein d. J. 049.jpg|full image]]
  </div>
</div>

Only slightly different to Melkom's one, I see; black border instead of grey, slight padding of the image inside the border, text centered, full image link text right aligned.
James F. (talk) 20:12, 28 Feb 2004 (UTC)

Votes (4 votes, 4 unique)

edit
  1. --denny 23:40, 14 Mar 2004 (UTC)
  2. James F. (talk) 00:36, 15 Mar 2004 (UTC)
  3. SanderSpek 10:07, 15 Mar 2004 (UTC)
  4. Lorax 22:26, 19 Mar 2004 (UTC)

Fabiform

edit

Henry VIII

Wikipedia logo


 
<div style="width:124px; margin:5px; border:1px solid gray;">
<div style="width:120px; margin:2px; border:1px solid gray;">
[[Image:Nohat-logo-X-hi.png|120px|Wikipedia logo]]</div>
<div style="margin:2px;">
Style to suit pictures with light backgrounds<br>
<div style="font-size:smaller; text-align:right;">
[[:Image:Nohat-logo-X-hi.png|full image]]</div>
</div>
</div>

Another variation on the theme. I've added a border around the image to properly separate images with light backgrounds from the caption. I've used grey for the borders as two black borders looked a little dark IMO. Fabiform 21:29, 28 Feb 2004 (UTC)

Votes (0)

edit

RadicalBender

edit

En-er-ee the eighth, he is, he is.

Wikipedia logo

HTML: 

<div style="width:100px; padding: 10px; border:1px solid #333; margin:1em; font-size:smaller;">
<div style="padding:0px;border:1px solid #CCC;">[[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]</div>
<div style="text-align:center;">
En-er-ee the eighth, he is, he is.
</div>
<div style="text-align:right;">
[[:image:Hans Holbein d. J. 049.jpg|Large Image]]
</div>
</div>

Covers two things I'd like to see. First, I like the idea of more padding, not less. It creates more of a photographic feel to it. Secondly, I like the idea of an inner border around the image like how Fabiform's has (for images with white backgrounds), but I don't like the dark border around other images. So, I added a very light gray border around the image so that you can still see the image border on white-background images, but it's not distracting for other images.
RadicalBender 01:06, 29 Feb 2004 (UTC)

Votes (1 vote, 1 unique)

edit
  1. SanderSpek 10:09, 15 Mar 2004 (UTC)

Sansculotte

edit
Type A
 

Heinrich VIII.  

Type A
 

Wikipedia logo.  

HTML: 
<div style="width:100px; margin:5px; padding:3px; background:#f4f6f9;

border:1px solid #8888aa">
[[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]<p style="font-size:8pt; 
margin:2px;">Heinrich VIII. [[image:zoom_sans.gif]]
</p></div>
Type B
Henry VIII 
 Type B
Henry VIII 


 HTML: 
<div style="width:100px; padding:6px; background:#f4f6f9; 
border:1px solid #8888aa">
[[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]</div><div style="width:100px; 
padding:6px; background:white;font-size:8pt;"><table width=100 border=0>
<tr><td align="left">Henry VIII</td><td align="right">[[image:zoom_sans.gif]]
</td></tr></table></div>


This style uses the same colours and line strengths as the TOC, so Wikipedia looks a bit more consistent. Instead of the sometimes 'old-fashioned' called lens this icon can be used. By Sansculotte

Votes for Type A (17 votes, 13 unique)

edit
  1. E23 22:59, 14 Mar 2004 (UTC)
  2. Perl
  3. MykReeve 02:01, 15 Mar 2004 (UTC)
  4. Formulax 07:56, 15 Mar 2004 (UTC)
  5. \Mikez 18:32, 15 Mar 2004 (UTC) (3:rd vote)
  6. Hajor (1st vote)
  7. Anthere 05:28, 17 Mar 2004 (UTC)
  8. Anthere 17:44, 21 Mar 2004 (UTC)
  9. Anthere 17:44, 21 Mar 2004 (UTC)
  10. Alibaba 08:53, 17 Mar 2004 (UTC)
  11. Paddy 19:30, 17 Mar 2004 (UTC)
  12. Paddy 19:37, 17 Mar 2004 (UTC)
  13. Paddy 19:37, 17 Mar 2004 (UTC)
  14. Sansculotte 19:36, 17 Mar 2004 (UTC)
  15. Xiaopo 21:10, 19 Mar 2004 (UTC)
  16. Marshman
  17. The Anome 00:17, 22 Mar 2004 (UTC)

Votes for Type B (1)

edit
  1. Rogper 12:43, 15 Mar 2004 (UTC)

Elian

edit

(Merge of Sansculotte's and Angela's version)

I like Angela's magnifying glass because it doesn't have that many colors, and Sansculottes very basic style, so I merged the two. --Elian

Type A

 

Heinrich VIII., English king
 
 Type A

 

Wikipedia logo
 
Type B

 

Heinrich VIII.
 
 Type B

 

Wikipedia logo.
 
Can't see the difference between A and B. Alibaba 08:55, 17 Mar 2004 (UTC)
Font size is different. -- JeLuF

Votes for Type A (0 vote)

edit
  1. D8uv

Votes for Type B (8 votes, 6 unique)

edit
  1. Secretlondon
  2. Perl
  3. Dingo (1st Vote)
  4. Dingo (2nd vote)
  5. Dingo (3rd vote)
  6. Lorax
  7. RedWolf
  8. Fabiform 23:18, 21 Mar 2004 (UTC)

doublep

edit

Here's my quick attempt on creating image box design. I'm not good at drawing anything, including icons, so I just took Angela's magnifier, which seemed to fit my idea well enough.

 

 

Henry VIII

CSS: 
div.thumbnail-none {
	border:		1px solid #C0C0C0;
	margin:		0.3em 0.8em 0.5em;
}

img.thumbnail {
	margin:		10px;
}

div.thumbnail-title {
	background:	#EEEEEE;
	border-top:	1px solid #C0C0C0;
	padding:	5px 11px;
	font-size:	90%;
	text-align:	left;
}

img.magnifier {
	float:		right;
	position:	relative;
	top:		-11px;
	margin:		0px 3px -11px 8px;
}

 

 

Wikipedia Logo

HTML: 
<div class="thumbnail-none" style="width: <<< thumbnail_width + 20 >>>px;">
  <a href="<<< image_url >>>" class="internal" title="<<< title >>>">
    <img class="thumbnail" src="<<< thumbnail_url >>>"
         alt="<<< title >>>" width="<<< thumbnail_width >>>" border="0">
  </a>
  <div class="thumbnail-title">
    <a href="<<< image_url >>>" class="internal" title="Enlarge">
      <img class="magnifier" src="<<< magnifier_url >>>" alt="Enlarge" border="0">
    </a>
    <<< title >>>
  </div>
</div>

I'm not sure if the icon is placed correctly in all browsers (checked only in Mozilla and Konqueror—don't have any other). Should work in all CSS 2 compliant browsers. Note that the text will flow around the icon properly if it is long enough.

This section's code looks somewhat different from what can be seen above, because it's not possible to use non-inline CSS and not possible to attach `style' attribute to <img> tag.

Paul Pogonyshev aka doublep
I have Mozilla Firefox and the magnifying glass seems to be in the wrong place. Perl 22:01, 17 Mar 2004 (UTC)
The correct place is on the line separating picture part from title part (see Talk:Thumbnailed images for screenshots). Is it not placed there in your Mozilla version? -- Paul Pogonyshev
It's placed there in my copy of Firefox. It's just a little un-orthodox place to put it, IMO D8uv 09:44, 24 Mar 2004 (UTC)
Well, it's not common, but I think it's nice this way and it gives more diversity in proposed design variants. It's just "you like it—you vote for it, you don't like it—you don't vote". Paul Pogonyshev

Votes (31 votes, 21 unique)

edit
  1. JeLuF
  2. E23 22:57, 14 Mar 2004 (UTC)
  3. James F. (talk) 00:36, 15 Mar 2004 (UTC)
  4. Fennec
  5. MykReeve 02:01, 15 Mar 2004 (UTC)
  6. Cyrius
  7. Cyrius
  8. Formulax 07:56, 15 Mar 2004 (UTC)
  9. Formulax 07:56, 15 Mar 2004 (UTC)
  10. SanderSpek 10:10, 15 Mar 2004 (UTC)
  11. Dori (1st vote)
  12. Dori (2nd vote)
  13. \Mikez 18:33, 15 Mar 2004 (UTC) (1st vote)
  14. \Mikez 18:33, 15 Mar 2004 (UTC) (2nd vote)
  15. Sverdrup (talk) (first)
  16. Gombe (1st)
  17. Gombe (2nd)
  18. Gombe (3rd)
  19. Jwrosenzweig 18:29, 17 Mar 2004 (UTC)
  20. Noldoaran 06:32, 18 Mar 2004 (UTC)
  21. Greudin 20:29, 19 Mar 2004 (UTC)
  22. Greudin 18:08, 21 Mar 2004 (UTC)
  23. Greudin 18:08, 21 Mar 2004 (UTC)
  24. Xiaopo 21:10, 19 Mar 2004 (UTC)
  25. RedWolf 08:20, 20 Mar 2004 (UTC)
  26. Ruiz (1st, 2nd & 3rd vote)
  27. —Eloquence - but don't put the glass on the line, and use the icon preferred by the majority on the feature polls page
  28. —Eloquence
  29. —Eloquence
  30. Fabiform 23:18, 21 Mar 2004 (UTC)
  31. The Anome 00:18, 22 Mar 2004 (UTC)

Michael

edit
Type A
background color 		Type B
no background color
(ie: transparent) 		Type C
background color + border 		Will add code later.

 

 

Henry VIII

 

 

Henry VIII

 

 

Henry VIII

 

 

Wikipedia logo

 

 

Wikipedia logo

 

 

Henry VIII

This is just an example for those who do not like borders. --Maio 15:15, 12 Mar 2004 (UTC)

Votes (13 votes, 7 unique)

edit
  1. Secretlondon (love how minimal this is)
  2. Perl
  3. Kimiko, 1 for type B
  4. Kimiko, 2 for type B
  5. Kimiko, and 3 for type B
  6. MykReeve 02:01, 15 Mar 2004 (UTC)
  7. Hella 1of3 votes for type B
  8. Hella 2of3 votes for type B
  9. Hella 3of3 votes for type B
  10. Elian 1st
  11. Elian 2nd
  12. Elian 3rd
  13. The Anome 00:19, 22 Mar 2004 (UTC) for type B

TOC colours

edit
Henry VIII wearing a dashing ensemble
The Wikipedia logo is ideal for a multilingual project
 <div id=toc style="width:100px; margin:10px; font-size:smaller"> <div style="border:1px solid #8888AA; margin-bottom:3px; background:#FFFFFF;"> [[image:Hans Holbein d. J. 049.jpg|100px|Henry VIII]]</div> <div style="float:right; padding:3px;"> [[Image:Zoom sans.gif]]</div> Henry VIII wearing a dashing ensemble</div>

I've based this suggestion on the results of the straw poll. There's a background colour and a border around the image and the image & caption, and I've used Sansculotte's zoom icon. The text size is "smaller", which allows for long image captions without taking up too much room on the page. I decided to use the colours in the TOC, since people seem to quite like them - a pale blue/gray background and a grey border. The third example shows how it looks when no caption is used. Fabiform 20:35, 12 Mar 2004 (UTC)

Votes (65 votes, 39 unique)

edit
  1. E23 22:57, 14 Mar 2004 (UTC)
  2. Triebtäter (1st vote)
  3. Triebtäter (2nd vote)
  4. Triebtäter (3rd vote)
  5. --denny 23:40, 14 Mar 2004 (UTC)
  6. James F. (talk) 00:36, 15 Mar 2004 (UTC)
  7. Erik Zachte (1) 01:17, 15 Mar 2004 (UTC)
  8. Erik Zachte (2) 01:17, 15 Mar 2004 (UTC)
  9. Erik Zachte (3) 01:17, 15 Mar 2004 (UTC)
  10. Patrice 01:48, 15 Mar 2004 (UTC)
  11. Seth Ilys 01:53, 15 Mar 2004 (UTC)
  12. Seth Ilys 01:53, 15 Mar 2004 (UTC)
  13. Fennec
  14. Fennec
  15. Cyrius
  16. Arwel 02:06, 15 Mar 2004 (UTC)
  17. Shizhao(add text link)
  18. Shizhao
  19. GerardM 08:43, 15 Mar 2004 (UTC) 1 - with a "media" implementation for the enlarged picture
  20. GerardM 08:43, 15 Mar 2004 (UTC) 2 - with a "media" implementation for the enlarged picture
  21. GerardM 08:43, 15 Mar 2004 (UTC) 3 - with a "media" implementation for the enlarged picture
  22. Roepers 09:31, 15 Mar 2004 (UTC)
  23. Rogper 12:46, 15 Mar 2004 (UTC)
  24. ArnoLagrange 14:23, 15 Mar 2004 (UTC)
  25. Dori (3rd vote) -- don't like the last (rightmost) format though
  26. Discostu (1st)
  27. Discostu (2nd)
  28. Discostu (3rd)
  29. Bemoeial 23:41, 15 Mar 2004 (UTC) (1st)
  30. Bemoeial 23:41, 15 Mar 2004 (UTC) (2nd)
  31. Bemoeial 23:41, 15 Mar 2004 (UTC) (3rd)
  32. Roepers 08:39, 16 Mar 2004 (UTC)
  33. Roepers 08:39, 16 Mar 2004 (UTC)
  34. Sverdrup (talk) (2nd)
  35. Sverdrup (talk) (3rd)
  36. Hajor (2nd vote)
  37. Vincent Ramos 05:55, 17 Mar 2004 (UTC)
  38. Greatpatton 07:43, 17 Mar 2004 (UTC)
  39. Alibaba 09:03, 17 Mar 2004 (UTC) but on Safari without text the enlargement icon is misplaced ; should be corrected.
  40. Sansculotte 19:36, 17 Mar 2004 (UTC) (2nd)
  41. Sansculotte 19:36, 17 Mar 2004 (UTC) (3rd)
  42. Ed_g2s 81.128.25.120 03:39, 18 Mar 2004 (UTC) Provided it can be made more cross-browser compatible.
  43. Noldoaran (vote 2) ditto. I would like it with the magnifing glass.
  44. Elf. I do not like the little boxes icon; I also much prefer a magnifying glass. (all 3 votes since that's what people seem to be doing)
  45. Head (1st vote)
  46. Head (2nd vote)
  47. Head (3rd vote)
  48. Xiaopo 21:10, 19 Mar 2004 (UTC)
  49. Marshman
  50. RedWolf 08:23, 20 Mar 2004 (UTC) but with elian magnifying glass
  51. Jeru 16:42, 20 Mar 2004 (UTC) (1st vote)
  52. Jeru 16:42, 20 Mar 2004 (UTC) (2nd vote)
  53. Jeru 16:42, 20 Mar 2004 (UTC) (3rd vote)
  54. Alex S This image is pretty
  55. Alex S I would be happy if it was on Wikipedia
  56. Alex S Thus I vote for it twice
  57. Wolfram (1st)
  58. Wolfram (2nd)
  59. Wolfram (3rd)
  60. AndrewKepert 10:30, 21 Mar 2004 (UTC) (my only vote, so count it 3x if you wish) Modification: the background colour to the inner box could be an image option, so that alpha/transparent imgs display as intended.
  61. Fruggo x3 (I would prefer the magnifying glass)
  62. Fabiform 23:18, 21 Mar 2004 (UTC)
  63. Jamesday like the incorporation of the favored font and the muted color to address the popularity of no color in the features poll.
  64. Jamesday
  65. Jamesday

Magnifing Glass

edit

Who likes this image? Perhaps it can be merged with one of the other ideas.
 
Noldoaran 07:02, 18 Mar 2004 (UTC)

I don't.  :-) I also don't like the current one. (can't figure out how to display it here. the light blue and blue one.) I do, however, like this one:  . Otherwise I don't care what the thumbnail format is, so just count my votes for the magnifying glass. - Omegatron 21:54, 18 Mar 2004 (UTC)

Example

edit

 

 

Henry VIII

See another example on my user page

Votes

edit
  1. Noldoaran (vote 3)

French users have been very surprised to discover thumbnailed images. They do not remember discussions about them. Will this vote also impact the way the thumbnailes images will look like in our wikipedia, or just on en ? Shall I call the voters ? :-) Anthere 21:04, 16 Mar 2004 (UTC)

Don't know really, as every version is autonomous of each other. Perhaps the French Wikipedia should hold a vote on their Wikipedia and the English Wikipedia hold the vote on their version? --Maio 21:12, 16 Mar 2004 (UTC)
Dunno if this may be autonomous or not ? Anthere 05:31, 17 Mar 2004 (UTC)
It may not.—Eloquence 19:13, 17 Mar 2004 (UTC)

It must be some time ago that the French were surprised about thumbnail images. They use some of the thumbnail features since at least March 1 on their main page. -- JeLuF 21:37, 17 Mar 2004 (UTC)

Caption

edit

What I like least about the whole "thumbnail" concept is the fact that these images do not take any tags for the captions. It may be not possible to allow this. However I did like to see captions in italics ('' tags) and smaller (<small></small> tags) print. I'm especially concerned that italics may not be used for species names in captions (nor underlined text which would be the proper alternative). If there is a way to solve this problem, I could support the concept. I've voted for my "favorites", but given a choice, I'd scrap the whole idea (unless the caption problem can be solved). - Marshman 00:08, 20 Mar 2004 (UTC)

It should be possible by changing the global stylesheet. Noldoaran 05:56, 21 Mar 2004 (UTC)
Markup of the image caption (links, emphasis, etc) will be part of the next MediaWiki-release. -- JeLuF 22:53, 22 Mar 2004 (UTC)

The way of displaying a photo

edit

The talk about the style of the icon is not very important. The usefulness of this function is. The old way is to upload 2 pictures, a small and a big picture and to enter a direct link to the big picture in the article. This way the big picture is displayed good on the screen. But when you use the new system you go to the description-page. That is a page for the description of the picture but not for displaying. It does not look good that way because of all the menu's. Clicking on the icon must go to a special "view image" page whiteout any menu's or maybe only a "Back to article" button. Walter 10:50, 24 Mar 2004 (UTC)

Retrieved from "https://meta.wikimedia.org/w/index.php?title=Thumbnailed_images&oldid=20243055"