Thumbnailed images

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

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

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)

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;
}

<div class="thumbnail-none" style="width:100px;">
 <a href="/wiki/Image:Henry8.jpg" class="internal" title="Henry VIII">
 <img border="0" src="/upload/thumb/7/7d/100px-Henry8.jpg" alt="Henry VIII" width="100" height="140">
 </a>
 <a href="/wiki/Image:Henry8.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

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

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

<div style="width:100px; padding: 2px; border:1px solid black; margin:1em; font-size:smaller;">
 [[image:Henry8.jpg|100px|Henry VIII]]
 <div style="text-align:center;">
 Henry VIII
 </div>
 <div style="text-align:right;">
 [[:image:Henry8.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)

<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="font-size:smaller; margin:2px; text-align:center;">
Style to suit pictures with light backgrounds<br>
<div style="text-align:right;">
[[:Image:Nohat-logo-X-hi.png|full image]]</div>
</div>
</div>

Another variation on the theme. I've added a boarder 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)

<div style="width:100px; padding: 10px; border:1px solid #333; margin:1em; font-size:smaller;">
<div style="padding:0px;border:1px solid #CCC;">[[image:Henry8.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:Henry8.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)

<div style="width:100px; margin:5px; 
padding:3px; background:#f4f6f9; 
border:1px solid #8888aa">
[[image:Henry8.jpg|100px|Henry VIII]]
<p style="font-size:8pt; margin:2px;">
Henry VIII. [[image:zoom_sans.gif]]</p>
</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

<div style="border: 1px solid rgb(0, 0, 0); 
margin: 0px 5px 5px; font-size: 85%; 
text-align: left; float: none; width: 110px;">
<div style="border: 0px none ; 
margin: 5px 5px 0px;" width="110px">
[[image:Henry8.jpg|100px|Henry VIII]]</div>
<div style="border: 0px none ; 
margin: 0px 20px 0px;" width="110px">
''Henry VIII''</div>
<div style="border: 0px none ; 
margin: 0px 5px;">
http://wikinfo.org/upload/magnify.gif
</div>
</div>

This is based on the one used at Wikinfo. It uses a magnifying glass icon as well as "view image" text for those who don't find the icon alone intuitive enough. The border is only down one side, which holds the image, caption and magnifying glass together, without the need to border the entire picture. (It doesn't work on IE - see the talk page). Angela 22:27, 29 Feb 2004 (UTC)

Shouldn't it be enlarge image instead of view image? --Head 23:37, 29 Feb 2004 (UTC)

The code for this one doesn't seem to work properly in my version of Safari (which, admittedly, is not the Panther version). The images are not contained within the overall div it looks like. RadicalBender 05:52, 1 Mar 2004 (UTC)

Have you looked at the screenshots on the talk page? Angela was going for the top screenshot, but it looks different in some browsers. Fabiform 15:03, 1 Mar 2004 (UTC)

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

• Pages with broken file links