UESPWiki:Administrator Noticeboard/Archives/Image Layout

This is an archive of past UESPWiki:Administrator Noticeboard/Archives discussions. Do not edit the contents of this page, except for maintenance such as updating links.

Image Layout

At some point in the site's history, a change was made to the site's css files that alters how images are laid out. This change was made directly to the common.css file that's part of the wiki source code -- instead of being made to a more visible location such as Mediawiki:common.css or Mediawiki:monobook.css. As a result it's hard to know now when the change was made or why it was made. The change is somewhat technical, but the bottom line is that it alters the default layout of images on our site and makes it so that images on our site don't behave the same way as default wikipedia behavior. I'd like to propose reversing this change.

The technical details are that for div.floatleft, table.floatleft, div.tright, and div.tleft, the css was changed to specify "clear: none", whereas the default value is "clear: left" (except for div.tright, which is "clear:right"). What that all means is that for default (non-UESP) wiki behaviour, two images with "thumb|left" placed back to back will be placed one under the other on the right side of the page. But right now on UESP, those images will be placed side by side. Whichever way things are set up, the default can always be overridden in specific cases if necessary. For example, "thumb|none" can be used instead of "thumb|left" to make images appear side by side, regardless of these css settings. Or else, tables can be used to force a particular layout.

Although in some ways the default layout is just an arbitrary preference, I think we should revert to the original mediawiki settings for a few reasons:

• It is the mediawiki default, which means it's what wikipedia regulars expect, and it's what the mediawiki software is designed for (i.e., other image-positioning features assume that clear:left is the default, and therefore are going to provide customizations based on that assumption).
• More often than not, I think that's what we want on our site. We generally want images to stay lined up against the margin, where they keep out of the way of the main text. We have numerous pages where there are currently image-alignment problems caused by the use of "clear:none" on the site. For example, I just made an edit today to Bloodmoon:Fort Frostmoth to fix image-layout problems. Lore:Dwemer is another example, that I haven't bothered to fix. On standard-width browsers, these pages look OK. But for extra-wide browsers, the images get really messed up -- the dwemer Orrery image overlaps Anumidium by a miniscule amount, and therefore the whole image gets shifted to the middle of the page, squeezing the text and leaving an unattractive empty box by the margin. There are also a ton of pages where the images would be messed up even on standard-width browsers, except we've already done various shenanigans to fix those pages.
• On the other hand, there are fewer places where we want images to appear side-by-side. At one point, the various creature pages (e.g., this version of Oblivion:Undead) had side-by-side images, but those were subsequently changed to gallery-style images. The only other examples I can think of offhand are the Morrowind material pages, e.g., Morrowind:Dwarven, and Morrowind place pages with multiple maps.
• Using "clear:left" as the default means that editors don't have to worry about what might happen on other browsers. If side-by-side behavior is actually what is desired, it is immediately obvious to an editor that the layout is wrong using "clear:left" -- for any browser settings. But with our current settings, using "clear:none", editors don't realize that the images that look well-spaced for them are an overlapping mess for other readers.
• "thumb|none" provides a very easy way to override the "clear:left" setting -- there is no such easy way to override the "clear:none" setting. Also, as just mentioned, gallery tags are another option for getting side-by-side layout -- one that works better if there are more than two or three images being displayed.
• Many of our image layout problems are caused by combining images from templates (e.g., place images inserted by a place summary template) with supplemental images added in the article itself. Fixing the layout in this case is more difficult -- you can't combine all of the images into a single table. Using the default "clear:left" settings, however, would be a very easy fix.

However, making this change will inevitably cause problems -- because there are currently images on the site that count on side-by-side layout. We can try to look for these cases now and fix them, but it's best to assume that we won't find them all. So does anyone agree that making this change is worth the problems? --Nephele^Talk 13:34, 21 May 2009 (EDT)

Well I'd agree that it's always a good idea to keep standard defaults but I'm a bit worried about the extent to which it's going to mess things up. The maps on Morrowind place pages rely on the non-default behavior although that's not very important. I'm more concerned about pages that we don't know about. I'd rather not be getting "helpful" talk page comments like "u guys suck this paige is al messd up" a year after the change.

Having said all that, it's only going to be a one-off hit and if things go really badly it can always be switched back. We may be able to benefit from templates on other sites if we share their defaults, and the argument that the current situation can be emulated but the default can't is a powerful one. On balance, I'd say "go for it", but I hope I don't regret that later! –Rpeh^{•T•C•E•} 14:17, 21 May 2009 (EDT)

What about having one of your lovely bots scan the entire site for multiple consecutive images that don't have the appropriate "thumb|" markings? Would that be possible? Then we'd know all the images that need to be checked and we could drop them into a Category or make a custom page to flag them and delete each one as it's checked. Or maybe even just add "thumb|none" to all images, to be backed out on a case-by-case basis? --Robin Hood (Talk • E-mail • Contribs) 00:55, 22 May 2009 (EDT)

Bots aren't really practical, alas. Two images placed right next to each other could have the problem, but so could two images with a bit of text between them, or one image placed on a page and another coming from a template. Then again, it also depends on the thumbnail size. The other option would work but I'm not sure it's a good idea as we'd probably end up with a mishmash of styles and it would reduce the benefit of the change. –Rpeh^{•T•C•E•} 02:59, 22 May 2009 (EDT)

Yeah, I figured you might say something like that. :) --Robin Hood (Talk • E-mail • Contribs) 14:39, 22 May 2009 (EDT)

When I started to follow up on this, I realized that |none doesn't really work as a replacement for |left -- with |none the image is not floated. So instead I decided to make it possible to specify the image's position. Images now recognize a |clear= option, that override the thumbnail's default setting:

• [[Image:example|thumb|right|clear=none]] is equivalent to UESP's current default for [[Image:example|thumb|right]]
• [[Image:example|thumb|right|clear=right]] is equivalent to the Mediawiki default for [[Image:example|thumb|right]]
• [[Image:example|thumb|right|clear=left]] and [[Image:example|thumb|right|clear=both]] are also possible if there's reason to use them.
• I just used thumb|right as an example here; a clear=x tag can be used with any image, and it will add "style=clear:x" to that image's outermost <div> tag (even if it doesn't do anything useful).

If you want to see an example of the tags in action, see the two images at the bottom of Morrowind:Places (which look exactly the same as they did before -- but you can see the change in the HTML).

I also did a regexp search in the database to find all articles which contain two thumbnailed images back-to-back. I'll go through those pages and add the explicit clear=none parameter to the images. When MW1.14 is available for testing, it will be possible to see the effect of switching the CSS to the Mediawiki defaults. If problems are noticed, or if there are concerns, the clear:none CSS codes can be added back into MW1.14 before the site is fully switched over. --Nephele^Talk 01:55, 15 June 2009 (EDT)