Template talk:Wide image

From Wikipedia, the free encyclopedia

[edit] To be framed

Does anybody know how to frame the ensuing image? --Attilios 00:49, 29 April 2007 (UTC)

[edit] Interwiki requests

{{editprotected}}

Please add he:תבנית:תמונה רחבה.

Done. - auburnpilot talk 01:02, 27 June 2007 (UTC)

[edit] Doc subpage

I've added a documentation subpage for this template (see WP:DOC), please edit the template to:

<div class="thumb" style="margin: 5px; clear: both;">
<div style="overflow: auto; overflow-x: scroll; width: 98%;">[[Image:{{{1}}}|{{{2}}}|{{{3|}}}]]
</div></div>
{{#if: {{{3}}}|<div class="thumbcaption" style="margin: 5px; font-size:90%">{{{3|}}}</div>}}<noinclude>
{{template doc}}
<!-- Add categories and interwikis to the /doc subpage, not here! -->
</noinclude>

Thanks! +mt 20:27, 8 July 2007 (UTC)

Done. Thanks. – Luna Santin (talk) 21:13, 8 July 2007 (UTC)

[edit] Improvements to scrollbars (or lack of scrollbars)

{{editprotected}} I've have some suggestions to improve this template. First, a horizontal scrollbar should not be shown if the image is wide, but fits within the browser window without needing to be scrolled. E.g., try this in a sandbox:

{{wide image|371011142 70e875a193 o.jpg|400px|An example of a 400px wide image, which shows a presently inactive horizontal scrollbar.}}

Secondly, I used this template on a page, then I viewed the page with IE7, only to see a vertical scrollbar appear to scroll vertically about 1 pixel. I'm unsure why exactly this is, however that scrollbar should definitely not be visible. To fix both of these problems, change the source to:

<div class="thumb" style="margin: 5px; clear: both;">
<div style="overflow: auto; overflow-x: auto; overflow-y: hidden; width: 98%;">[[Image:{{{1}}}|{{{2}}}|{{{3|}}}]]
</div></div>
{{#if: {{{3}}}|<div class="thumbcaption" style="margin: 5px; font-size:90%">{{{3|}}}</div>}}<noinclude>
{{template doc}}
<!-- Add categories and interwikis to the /doc subpage, not here! -->
</noinclude>

You can also test out the same code changes using User:Mwtoews/Template:wide image in a sandbox:

{{User:Mwtoews/Template:wide image|371011142 70e875a193 o.jpg|400px|An example of a 400px wide image, which does not show a scrollbar, unless you resize your window to force it.}}

Thanks. +mt 02:57, 22 July 2007 (UTC)

Confirmed your version works on Firefox 2. The strangeness you've mentioned with IE7 leads me to wonder if the current code is to fix an incompatibility with some other browser, though; it may be a good idea to ask for help testing this on a wide range of browsers at the technical village pump. --ais523 17:47, 30 July 2007 (UTC)

Thanks for the pointers. I will prepare a test page, and post something at WP:VPT to see if the code works. +mt 18:22, 30 July 2007 (UTC)

I've updated the template. Cheers. --MZMcBride 22:46, 31 July 2007 (UTC)

[edit] Remake

{{editprotected}} I made a remake of this template. Here is the code. The main benefit of this remake is that the images actualy do look like a thumb-image, as was obviously also intended here with the "class=thumb" code (which stopped working to make an image look like a thumb about a year ago!). Also the bug described in the previous post should be taken care of. I have an example of how it looks below.

A small journey through Germany

Freestyle 22:14, 31 July 2007 (UTC)

Done. Cheers. --MZMcBride 22:42, 31 July 2007 (UTC)

Thanks. Freestyle 07:28, 1 August 2007 (UTC)

In the image above, I don't see the full height of the image, using IE7, 1152 x 864 px, full screen. --Cavrdg 11:07, 5 August 2007 (UTC)

I can confirm this. Firefox 2.0 makes an image 97px in height (as correctly indicated in the source), and places the horizontal scrollbar below the image for a combined hight of approx 114px. But IE7 uses a different approach: it makes both the image and the scroll-bar 97px. I haven't hunted down the solution yet, but I'm sure there is yet another IE workaround for this behaviour out there .... +mt 17:49, 5 August 2007 (UTC)

I've confirmed this to be broken behaviour. I've tried one solutions found here on Template:Wide image/proposal, but that removed the horizontal scroll bar. (Please feel free to edit that proposal page to try out a solution). +mt 18:17, 5 August 2007 (UTC)

Strange.. I have IE7 but everything looks fine for me. Maybe it's the overflow:auto and overflow-y:hidden that conflict in a certain way? If so (I can't try it out) just get rid of the overflow:auto. That was added only to get rid of scrollbars if the picture does fit the screen. By the way this image above calls upon the template in my own namespace that I made earlier as a proposal. Freestyle 21:55, 5 August 2007 (UTC)

Yeah, I was trying a combination of the overflow, overflow-x, overflow-y with different orderings too, but nothing seemed to make it work. I have IE version 7.0.5730.11 under WinXP with all updates. I think the best solution is to replace "overflow:auto;overflow-y: hidden; overflow-x: auto;" with "overflow:auto;" to show the vertical scroll bar for IE7 users to view the remaining 13 or so pixels lingering at the bottom. This fix is compatible with Firefox 2. This fix using Template:Wide image/proposal can be viewed here:

A small journey through Germany

And, we could perhaps post a request at WP:VPT for an IE7 compatibility expert to find a better solution. Searching "overflow bug" I found 648,000 hits! I'm not great with this stuff (and I don't use IE often), but this should be patched up for better display for those users. +mt 23:51, 5 August 2007 (UTC)

If you'd make two optional parameters, one for the width and one for the height of the original image, you can let the template calculate the new height (for the div around the image) accordingly to the specified new width (hope I am understandable.. I'm not a native speaker). Then if these optional parameters would be specified the image should be displayed nicely in all browsers, without any vertical scrollbars. By the way I see now that I do also have this bug :S. Freestyle 12:54, 6 August 2007 (UTC)

I did a remake of my remake :-D . The code is still here and you can see the result at the top of this post. I hope this one works. Freestyle 13:14, 6 August 2007 (UTC) P.s. Feel free to make any changes if necessary!

I discovered that the combination overflow-x:auto and overflow-y:hidden doesn't work well in IE7, while overflow-x:scroll and overflow-y:hidden work okay together (go figure...). Only thing is we have to accept now that the scrollbar will also be there if the image fits the users screen. Freestyle 13:33, 6 August 2007 (UTC)

That works just fine. We could also promote some of the information for a wide-scroll region into the default MediaWiki:Monobook.css, and include other information in the IE 7 fixes template. I'm not an expert, but I think it should look something like adding to MediaWiki:Monobook.css:

div.wide { /* show a horizontal scroll-bar if needed */
  width: 100%;
  overflow: auto;
}

and to http://en.wikipedia.org/skins-1.5/monobook/IE70Fixes.css :

div.wide { /* show a horizontal scroll-bar */
  overflow-x: scroll;
  overflow-y: hidden;
}

This Wide image template would then be modified to use <div class="wide">...</div>. Again, I'm not an expert with CSS, and I'm not sure if this will work, or how exactly to test this out, so it may still need work. In the mean time, we should use User:Freestyle nl/wide image for this template. Any suggestions what to do next, and can anyone verify/fix this suggestion? +mt 20:35, 6 August 2007 (UTC)

I've scrapped this idea, since it is too much work for what it's worth (and to refresh what that was: its purpose is to show an optional scrollbar on non-IE7 browser windows if the wide image fits within the browser window). Lets work with the simple fix at User:Freestyle nl/wide image (which I modified so it could be copied/pasted into this template by an admin). Does this look good? If so, add the {{edit protected}} then IE7 users will be able to see those extra hidden pixels. +mt 07:12, 12 August 2007 (UTC)

Actually, the original remake-remake (before your changes) should've done okay also. It's actually even a bit better I guess because it stays closer to the original code for thumb-images like Mediawiki software creates. Advantages of this may be that when classes having to do with thumbs/captions/etc are modified (for any reason) this template will adjust correspondingly. Another advantage is that images that are smaller than the users' own screen width will be centered, instead of left-aligned. Freestyle 09:36, 12 August 2007 (UTC)

Oh, ... I was unsure what that code was about (sorry). If your sure that these are desirable and compatible changes, then revert my stuff and add the {{template doc}} to make it more clear for the admin to update the code. +mt 15:24, 12 August 2007 (UTC)

It should be okay now. Freestyle 10:21, 17 August 2007 (UTC)

[edit] New request

{{Editprotected}} It is requested that the current template be replaced with the code on this page. The code contains a fix for 'broken behavior' of the hidden vertical overflow in IE7, and some other changes to make the code more in correspondance with the code that is generated by Mediawiki software for thumb images. Please see the above discussion for more info. Freestyle 10:28, 17 August 2007 (UTC)

Done. Cheers. --MZMcBride 17:39, 17 August 2007 (UTC)

[edit] Unclosed div tag

{{editprotected}} When the caption parameter is empty this template throws an unclosed div tag. You can see the problem in this version of Chicago Board of Trade Building. Mackensen (talk) 05:03, 1 August 2007 (UTC)

Sorry about that. I fixed the code at User:Freestyle nl/wide image, you can check here what I changed or just copy the entire code again. Freestyle 07:26, 1 August 2007 (UTC)

Y Done. Thanks! Mackensen (talk) 10:55, 1 August 2007 (UTC)

[edit] NOT WORKING

There seems to be a problem with the wide image template. All the images that I used this template for are now wide thumbs and the article have to be scrolled horizontaly. Here is an example, Tourism in Norway and this Sydney Park. Its either the template or my computer isn't working properly. I hope this is not permanent, I kind of liked the wide images, sometimes.--Ad@m.J.W.C. 11:08, 18 August 2007 (UTC)

{{Editprotected}} Yes, it's not working anymore. There is no difference whether I use this template or not. {{Wide image/proposal}} example above looks great, why can't this one look like that? I suggest to undo whatever was done that changed this template.--Crzycheetah 03:02, 15 September 2007 (UTC)

According to Freestyle, use User:Freestyle nl/wide image instead. I believe it fixes the broken behaviour with IE7, and is set to go (i.e., Admin: copy and paste). This issue slipped my mind (sorry). +mt 04:58, 15 September 2007 (UTC)

copied and pasted. Thanks for making it easy. — Carl (CBM · talk) 20:31, 15 September 2007 (UTC)

• It's still not working. Can anyone fix it? 82.81.92.126 20:59, 26 October 2007 (UTC)

[edit] use of deprecated template

This template currently uses Template:Click, which is deprecated because it causes the page to break in screen readers for the disabled and some other browsers. (See Wikipedia:WikiProject Usability/Clickable images for more.) It appears that the only way to make the magnifying glass image link to a smaller version of the image is through Click. However, I think it may be possible to accomplish the same result by using text rather than an image. If anyone more familiar with this template sees a way to get the same result without affecting functionality, please make the appropriate changes and improve the accessibility of the website. Thanks, BanyanTree 01:36, 30 September 2007 (UTC)

Why not just get rid of the magnifying glass? It serves no actual function. --B 22:07, 5 October 2007 (UTC)

As this is the only response, I have gone ahead and removed the image and template. Thank you, BanyanTree 13:22, 6 October 2007 (UTC)

[edit] Better documentation?

The main page should explain/define better what the template does.

Also, why isn't the width parameter optional? If it's not set it should show the full width. 82.81.92.126 21:00, 26 October 2007 (UTC)

If you want, you could copy and paste the source of this template and start your own template on a new page, you would have to rename the template, Maybe the same name with a -3 at the end. -2 has been taken by myself. If you wanted to start you own page you will have to create a new account. Cheers_Ad@m.J.W.C. 23:48, 26 October 2007 (UTC)

[edit] other languages

missing in list:

da:Skabelon:Bredt billede —Preceding unsigned comment added by 89.59.114.90 (talk) 19:09, 22 November 2007 (UTC)

Thanks, I've added that to the Template:Wide image/doc subpage. +mt 21:50, 22 November 2007 (UTC)

[edit] Overflow scrolling in a table?

Can someone tell me how to put a wide image in a table so that it will scroll? The first example does and the second one doesn't for me using IE7 @ 1024X768.

{{wide image|Helsinki z00.jpg|1000px|[[Helsinki]] panorama.}}

Helsinki panorama.

{|
|
{{wide image|Helsinki z00.jpg|1000px|[[Helsinki]] panorama.}}
|}

Helsinki panorama.

RichardF (talk) 03:22, 24 February 2008 (UTC)

[edit] Request for new parameter

The template would be more useful if we had an option to set a default size for the scrolling window, as well as the size of the photo within the window. Sometimes it is useful to have a 1000-px image scrolling within a window that is only, say, 500 pixels wide.Northwesterner1 (talk) 19:27, 3 April 2008 (UTC)

Y Done - the fourth parameter now allows you to directly change the width of the outer box (the inner one compensates appropriately). I also spotted and fixed a bug that would break the template under particular conditions. Nihiltres^{t.l} 22:31, 3 April 2008 (UTC)

Awesome, thanks. Northwesterner1 (talk) 22:40, 3 April 2008 (UTC)

The new parameter is great, very useful, thank you! See how it improved Oregon Coast. But now it also has me thinking about how to use panorama images more effectively in page design. It would also be useful to add some of the other functionality that the regular image template has, especially left and right floating. One example: Hart Mountain. It's a cool image but doesn't really work for the page in its present format. I'd like to be able to put it in a 400-px window and float it on the right, just below the infobox. Northwesterner1 (talk) 22:52, 3 April 2008 (UTC)

[edit] Yet another request for a new parameter

{{editprotected}} I think there should be a fifth right alignment parameter. Currently, you can sort of "hack" the wide image template as shown below to get the desired effect...

Helsinki panorama.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sem diam, aliquet vitae, commodo nec, ornare sed, libero. Maecenas rhoncus venenatis nibh. Curabitur auctor. Nam lobortis, augue ac venenatis scelerisque, elit leo pulvinar massa, et suscipit odio nunc et augue. Maecenas ac libero at lacus luctus iaculis. Ut nisi pede, venenatis id, cursus quis, commodo vitae, urna. In tincidunt risus at lorem. Vestibulum consectetuer, mi vel viverra sollicitudin, nibh metus commodo arcu, tincidunt vehicula augue ante ac dolor. Ut varius, tellus non vulputate consequat, enim lorem ornare sem, eu venenatis tortor magna quis nisl. Fusce pharetra. Nulla in mi. Morbi fringilla, nisl nec vehicula fermentum, nulla turpis pulvinar nulla, id sollicitudin quam ligula vitae justo.

This obviously works and looks great, however it would be nice to have another parameter that states (written in pseudo-code):
If the fifth parameter "right" exists, then add ";float:right;margin-left:1em"

Make sense? Seem reasonable/useful? If you don't think the addition of another parameter is wise, then I believe what I have shown above (adding things like ;float:right;margin-left:1em after the final width parameter) should at least be in the documentation... or another correct way of right aligning the wide image. Agree? -- Tkgd2007 (talk) 23:14, 12 May 2008 (UTC)

Left and right setups are dead easy given your basic code: I simply add

{{#switch:{{{5}}}
|left=<nowiki> </nowiki>float:left;margin-right:1em;
|right=<nowiki> </nowiki>float:right;margin-left:1em
|#default=
}}

immediately after the semicolon of the main div's style setup. It's only worthwhile if {{{4}}} is set to something special, e.g. not 100%, so should I add an {{#if:{{{4|}}}| }} around that setup? Nihiltres^{t.l} 05:38, 13 May 2008 (UTC)

Y Done. east.718 at 06:33, May 13, 2008

I figured it would be pretty simple. Thanks east718 for adding that parameter to the template so quickly! Tkgd2007 (talk) 06:48, 13 May 2008 (UTC)

[edit] Editprotected

{{editprotected}} A new parameter was added and should be documented in the documentation for this template.—Tkgd2007 (talk) 23:04, 13 May 2008 (UTC)

The documentation is at Template:Wide image/doc and is not protected. This setup is used so that fixes like this can be done without needing to wait for admin help. — Carl (CBM · talk) 23:11, 13 May 2008 (UTC)

Aaaah I see, I see. Thanks!--Tkgd2007 (talk) 03:10, 14 May 2008 (UTC)