Rei and the Moon page

[Zuggy]

This is about how the images are displayed in the article. Wayneiac made a few edits recently that made the article worse - http://evageeks.org/FGP/Rei_and_the_Moon

Here's how the images are currently displayed under Wayneiac's edit:


Here's how the images were displayed under my previous edit:


Wayneiac's page is a mess and there's no point in me reverting the page back or discussing it on the talk page because he will just do the same as when I arranged the images in a table on the 18th Feburary 08.

The way they are under Wayneiac's edit is dependant on your internet browser, your screen resolution, and how big you have the browser window - whereas having them in a table gets around all those problems and is the best and neatest way to display loads of images without messing up the text. It also reduces the amount of scrolling you have to do and gets ride of all the ugly white space that is on the current page.

[Ornette]

Maybe a better way to handle the images is to do it like in the tributes to NGE page, where there is some text, then images below the text. This way, the images never cover up the text and with the exception of extreme browser settings (huge font or completely unreadable font) the images never float in places it shouldn't.

I know it'll be kind of ugly that way and there would be a lot of whitespace next to the images, but is there a better way to format images in mediawiki so they don't misbehave like that? Is it possible to just make thumbnails and add all that text inside the thumbnail box (since it really isn't that much text)?

[Zuggy]

Maybe a better way to handle the images is to do it like in the tributes to NGE page, where there is some text, then images below the text.

Why do that though when you only have one line of text for each image? On the tributes page you actually have some text to go along with the images that describe the connection between them and NGE, but on the Rei and the Moon page there is just a short list of appearances.

I did something similar in the cross article - http://evageeks.org/FGP/Cross - where there is a list of appearances with one image that combines six examples rather than six separate images which would have messed everything up.

Is it possible to just make thumbnails and add all that text inside the thumbnail box (since it really isn't that much text)?

That's what I did on the 18th Feburary 08 edit - http://evageeks.org/FGP/index.php?title=Rei_and_the_Moon&oldid=15032 - but Wayneiac reverted that.

[Sachi]

I like Zuggy's edit. More organized.

[Ornette]

Is it possible to just make thumbnails and add all that text inside the thumbnail box (since it really isn't that much text)?

That's what I did on the 18th Feburary 08 edit - http://evageeks.org/FGP/index.php?title=Rei_and_the_Moon&oldid=15032 - but Wayneiac reverted that.

No, I meant having ALL the text inside the thumbnail:
First thumbnail would say: In the opening credits, there is a shot of Rei standing before a prominent Moon.
Second would say: There is a similar shot in Episode 06 where Rei stands silhouetted against the Moon before the mission starts.
Third would say: In Episode 10, Rei is swimming in the Nerv gym's pool: the "camera" views her from below, passing in front of a ceiling light, visually similar to passing in front of the Moon.

or something along those lines. Essentially removing the bulleted text and leaving a few rows of images with a detailed description, then the section descripting the significance of this connection.

[Zuggy]

No, I meant having ALL the text inside the thumbnail:
First thumbnail would say: In the opening credits, there is a shot of Rei standing before a prominent Moon.
Second would say: There is a similar shot in Episode 06 where Rei stands silhouetted against the Moon before the mission starts.
Third would say: In Episode 10, Rei is swimming in the Nerv gym's pool: the "camera" views her from below, passing in front of a ceiling light, visually similar to passing in front of the Moon.

or something along those lines.

I think the bulleted list is the best way to display the information and it can be easily added to over time, plus some of the bulleted points don't have companion images. It might be worth a go, but I dunno if it's just going to end up looking a mess.

Why was some of my text reverted back to what V wrote anyway? I've only just noticed that. The reason I changed that was because, actually, in fact, the "way V writes" sometimes doesn't get "the point," actually, across very fast or efficiently: thus it would be "convenient for all parties involved", in fact, etc.

[UrsusArctos]

Go ahead with the bulleted list- I'll take a look at it when I come over next, and try to sort out the mess. We have had far too many issues with image alignment on that page.

[Mr. Tines]

I have sorta fixed this page in a minimal touch fashion by

1) pulling

[code:1]<big>Among the images associating Rei and the Moon are:</big>[/code:1]

out of the table -- it doesn't belong inside it from a simple point of document structure.
2) removing spurious line-break tags associated with the above
3) replacing "left" with "none" where two images are side by side

It's equally not very nice (uneven whitespace between images and text) but usable in both Firefox2, Opera9 and IE7.

Really, pages need to be tested at least in IE7 and one of the more standards compliant browsers (if you have an old Win2k or Me box with IE6, then maybe that too) -- especially if what you are doing is a layout change rather than just dumb text.

[ObsessiveMathsFreak]

This problem essentially stems from Mediawiki's inability to handle multiple images in an article page. The software is optimized for text and hypertext, with the occasional image present. Images are unfortunately done using css floats, and all that comes with it, hence the odd, well, "floating" behaviour. Our more visual requirements are stretching the software past the point it was meant to go.

I did try, once upon a time, to come up with some structured way of presenting images, but nothing came of it. I must say that Zuggy's table method is very attractive, and I think it's something we should look into using. I'm going to try tinkering with templates to see what else can be done with this design. Watch this space.

Edit:
There are some image table/gallery demos available if anyone wants to take a look. If it's required, I can attempt to template these up into some thing of reusable, "user friendly" system. Feedback is welcome and appreciated.

[thewayneiac]

Arrrggghh? It looked like THAT?! No wonder you started a thread about it. I see the problem, but:

Wayneiac's page is a mess and there's no point in me reverting the page back or discussing it on the talk page because he will just do the same as when I arranged the images in a table on the 18th Feburary 08.

The way they are under Wayneiac's edit is dependant on your internet browser, your screen resolution, and how big you have the browser window - whereas having them in a table gets around all those problems and is the best and neatest way to display loads of images without messing up the text. It also reduces the amount of scrolling you have to do and gets ride of all the ugly white space that is on the current page.

It's an aesthetic thing. I don't care for having the images together in a table seperate from the text that describes them. People who aren't as familiar with the show as we are would have to scroll back and forth from the text to the images to figure out what they are looking at.

Believe me, I am not trying to start an "edit-revert war", and I have no objections to using a table as long as it pairs the image with the matching text. (See my newest effort on the page in question, if it hasn't already been edited.) If verticle scrolling is an issue for you, perhaps there is a table available, or one can be created that is more horizontal in design, but can still contain the proper text. (One of the ones OMF linked to in his post? I haven't checked them out yet.)

Why was some of my text reverted back to what V wrote anyway? I've only just noticed that. The reason I changed that was because, actually, in fact, the "way V writes" sometimes doesn't get "the point," actually, across very fast or efficiently: thus it would be "convenient for all parties involved", in fact, etc.

That was inadvertant; I like your text better.

[Mr. Tines]

Arrrggghh? It looked like THAT?!

Hence the suggestion that layouts be tested in two different browsers (IE and something else).

[Zuggy]

There are some image table/gallery demos available if anyone wants to take a look. If it's required, I can attempt to template these up into some thing of reusable, "user friendly" system. Feedback is welcome and appreciated.

These look great - http://evageeks.org/FGP/User:ObsessiveMathsFreak#Image_Table_Test - what's happening in IE however is that the table spans across 80% of the page whereas in Firefox the the table fits snugly around the images. My suggestion is to set the width of the table an actual pixel value rather than percentage, it doesn't matter if the image's combined width exceeds that value because the images will distort the table to fit, you can test this on any of the infoboxes by saying "width: 1px;" and the table will still be the width of the placeholder image (this won't work though if the images are floating, I think).

I don't understand why any of the templates are using percentage values rather than pixel values for width/height or font size, because depending on your screen resolution it changes the size of stuff and messes things up - I'm using a larger screen resolution and all the infoboxes looked ugly, you can see the problem in this image where the character infobox was too wide (I've already fixed some of the infobox templates to stop this) -

at the start of your table then it should look like this:

[code:1]{|align="center" style="width: 150px; text-align: center; vertical-align: center; font-size: 11px; border: 1px solid #aaaaaa;" cellspacing="0" cellpadding="2" border="0"
|-
|style="background: tan; font-size: 14px; text-align: center" colspan="3"|[/code:1]
Rather than this font-size: 120%; and the rest of the percentage stuff.

Can I ask you what {{-}} does?

[Mr. Tines]

at the start of your table then it should look like this:

[code:1]{|align="center" style="width: 150px; text-align: center; vertical-align: center; font-size: 11px; border: 1px solid #aaaaaa;" cellspacing="0" cellpadding="2" border="0"
|-
|style="background: tan; font-size: 14px; text-align: center" colspan="3"|[/code:1]
Rather than this font-size: 120%; and the rest of the percentage stuff.

Quoting font sizes in pixels is evil in accessibiltiy terms, since IE (for versions < 8, at least) doesn't allow scaling of pixel-sized text. Apply a base of font-size:70% then size everything to do with text in ems (e.g. a total table width of about 60ems max).

For the picture boxes, a small size in pixels (with overflow:visible implied), as you suggest, is the way to do it.

[Zuggy]

Quoting font sizes in pixels is evil in accessibiltiy terms, since IE (for versions < 8, at least) doesn't allow scaling of pixel-sized text. Apply a base of font-size:70% then size everything to do with text in ems (e.g. a total table width of about 60ems max).

Oh, I didn't know that. When I previewed the table using those pixel values earlier in IE7 it looked ok to me though - what is the percentage for the font size in relation to, say you write font-size: 50%; what's that 50% of? Is using pt instead of px for font size supported across all browsers? I just don't like this percentage business, it just doesn't feel precise, whenever I tried to use it in the infoboxes I made it felt like I had to guess.

[Mr. Tines]

I misspoke a little -- http://www.alistapart.com/articles/elastic suggests 36ems as a good width; though you also need to put a max-width to stop enlargement overflowing the screen.

say you write font-size: 50%; what's that 50% of?

The absurdly huge default size (about twice the size of the program toolbar font). Definitive, if slightly dated, article here:

http://www.thenoodleincident.com/tutorials/typography/index.html

Is using pt instead of px for font size supported across all browsers?

Yes, but that has its own issues (different text sizes on Mac and PC, because of different assumptions about nominal screen resolution).

[thewayneiac]

This problem essentially stems from Mediawiki's inability to handle multiple images in an article page. The software is optimized for text and hypertext, with the occasional image present. Images are unfortunately done using css floats, and all that comes with it, hence the odd, well, "floating" behaviour. Our more visual requirements are stretching the software past the point it was meant to go.

I did try, once upon a time, to come up with some structured way of presenting images, but nothing came of it. I must say that Zuggy's table method is very attractive, and I think it's something we should look into using. I'm going to try tinkering with templates to see what else can be done with this design. Watch this space.

Edit:
There are some image table/gallery demos available if anyone wants to take a look. If it's required, I can attempt to template these up into some thing of reusable, "user friendly" system. Feedback is welcome and appreciated.

Hey, Wow! I think we might be on the verge of solving the problem. A compact table so no excessive scrolling, plus a space for the text that describes the images. (The absence of a text space was my primary objection to Zuggy's table.) I would favor using a table that looks like these examples. The examples with 2 horizontal rows of images are superior, I think, to the one with the two collumns.

Edit: OMF, I pasted one of your tests onto the page itself to see how it meshed with the rest of the page. No problems. I hope that this was alright.

[ObsessiveMathsFreak]

As per Zuggy and Mr. Tines' suggestion, I've implemented width: 1px on the table's style attribute. Hopefully things should look right in IE now. Can anyone test?

As to the widths of various infoboxes, I'm very wary of using anything as absolute as pixels, hence the reason I stick to percentages.

Can I ask you what {{-}} does?

This is in fact a custom template, though it is widely implemented on many wikis. It's a shorthand for <br> with a clear="all" attribute, which essentially causes a kind of page break. Anything before the tag will not(usually) run into text/etc after the tag. Basically, it prevents vertical overflow.

If everyone is happy with the "gallerybox" as it currently stands, I can make a template out of it that can be called more easily. I'll make several sizes available. I was thinking of making available 1x1, 1x3,2x3,3x3,4x3 and 1x2,2x2,3x2,4x2 to begin with. Will anyone have a need for any other sizes?

The only question left is how they should float by default? No float, left or right? I'm think left, though it will be possible to specify.

Edit: OMF, I pasted one of your tests onto the page itself to see how it meshed with the rest of the page. No problems. I hope that this was alright.

It's a wiki. You don't need to ask my permission. Everything is public property (under the GFDL in fact). However, once the template is created, it would be a good idea replace the raw code on the page as a test of the template.

I'll let you all know when the template is finished.

EDIT: Nearly forgot. Numbered bullet lists, or just plain bullets?

[UrsusArctos]

I think we might need a 5x2 or 6x2 (That's the number of rows x the number of columns, correct?). As far as float is concerned, I'm fine with whatever you pick as default, as long as it can be specified.

Plain bullets look a lot better than numbered lists.

And on a side note, there was a certain amount of talk about the copyright status of the wiki while V was around.

[Zuggy]

Thanks for those links Tines - why does everything have to be so complicated...

I'll make several sizes available. I was thinking of making available 1x1, 1x3,2x3,3x3,4x3 and 1x2,2x2,3x2,4x2 to begin with. Will anyone have a need for any other sizes?

Is making a separate template for each of those necessary? I know on the template edit thingy you can enter if commands, which means you could say "if there are x number of images entered in this template then make x number of rows and x number of columns," that would mean you wouldn't need to call on a new template every time someone wanted to add more images in the future. I dunno how to write that in meself but V seems knowledgeable about that sort of stuff.

Another way to do that would be to create a big table on the template, say 6x6, and if the user doesn't enter in anything for some of those cells then that code isn't used or is somehow snipped out - something similar happens when an image isn't specified for some templates and it calls on a placeholder image to take it's place. I'm not sure I'm explaining that very well.

Numbered bullet lists, or just plain bullets?

Bullet points look neater.

[ObsessiveMathsFreak]

Is making a separate template for each of those necessary?

No in fact. Everything is done in a single MontageBox template now. It can handle up to 12 images in either a 2 or 3 column format. It can also handle single images.

There are a few examples provided to get everyone started, but let me know if you have any questions, and of course if you notices any bugs or glitches.

I can update the template to support more images of column widths if anyone needs it. Let me know if there are any other (feasible) features you would like to see implemented.