Decisions on thumbnail size / main image display size

[Christopher Allan Webber]

We need to make decisions on what the thumbnail size should be as a standard... currently it's 200x200. What should be the maximum width and height for resizing media that are are in media "display pages"?

[Jef van Schendel]

(I wrote a large reply, but then my laptop crashed fantastically, so here's a short version)

Ok, so about the page and image widths... This is about the individual image pages, so not about the thumbnails in the gallery.

I propose a page width of 960px and also a static image width of 960px.

• I experimented a bit this afternoon to find a purely CSS solution to dynamically scale images depending on the browser's viewport. In short, I couldn't find one. The ones that are out either deal only with width or height (and we need both, because we'll surely have images with strange ratios), or use Javascript, or are made for background images (which is different from what we want). Not to mention that images scaled by the browser don't look great.
• Pages that are 960px wide will be easily visible by the vast majority of web surfers on desktops and laptops. I'm not sure if you can even buy desktop monitors or laptops with a screen resolution lower than 1024 by 768 anymore. Even many netbooks (like the MSI Wind, EEE PC 900 and 1000, the Acer Aspire One, correct me if I'm wrong here) have a resolution of 1024 by 600. This means that all of these users will have a comfortable page width without horizontal scrollbars, and even a slight margin at both sides, which is very welcome.
• If a 16:9 image is scaled down to have a width of 960px, it will be fully viewable with a resolution of 1024 by 768. With a resolution of 1024 by 600, it will be fully viewable if the user uses a fullscreen browser.
• If a 4:3 image is scaled down 960px wide, it will be fully viewable with a resolution of 1024 by 768, though only when using a fullscreen browser.

In short, I think having our images at most 960px wide will be comfortable for many desktop, laptop and netbook users. Of course the portion of users that won't be able to view the entire image will still have browser zooming options available.

Does this sound reasonable?

[Christopher Allan Webber]

Sucks re: laptop crash.

Thoughts:

• flickr's resolutions are a lot lower by default, same with img.ur (but both also put stuff "on the side")
  • http://www.flickr.com/photos/mlinksva/5720062125/in/photostream
  • http://imgur.com/gallery/LjKuK
• however we were talking about "putting the media at the center of the viewing"... is this still what we want to do?
• smartphones are an important consideration that I don't know what to think about :)

Assuming we're still "putting media at the center" though probably this is the best route. It's a good place to start anyhow! :)

[Alejandro Villanueva]

960px is a good size for full screen image, cuz' its small enough to view it a netbook +1

[Jef van Schendel]

Update: we're now using 960.gs. This means that all pages (or at least, the content area of all pages) are now 940 pixels wide.

So if we use the full width of the page, we can have 3, 4 or 6 columns with a width of 300px, 220px or 140px each, respectively.

I think our choice depends on what other information we also want to display. For instance, do we want titles underneath? Also the owner? Or maybe nothing at all? Flickr for instance uses these really dense image grids without text, which are also fun, but maybe a bit too far.

Anyhow, I can whip up some example designs for this, then we can choose the one we like most.

Feel free to suggest something you'd like to see!

[Christopher Allan Webber]

Great, looking forward to seeing mockups.

How about something along lines of:

| MediaGoblin          [user] |
|-----------------------------|
| Title                       |
| (author) <- smaller         |
| .---------------. .-------. |
| |               | |       | |
| |               | | Meta- | |
| | Image content | | data  | |
| |               | |_______| |
| |               | |       | |
| '---------------' | Other | |
| .---------------. | stuff | |
| | Description   | |       | |
| | and etc goes  | |       | |
| | here!!!!!!    | |       | |
| '---------------' |       | |
| COMMENTS          |       | |
| .---------------. |       | |
| | Wow amazing!! | |       | |
| |       - erica | |       | |
| '---------------' |       | |
| .---------------. '-------' |
| | Yeah gr8      |           |

[Jef van Schendel]

I've pushed a commit which changes the gallery. The thumbnail width is now 180px. If this turns out okay, I propose these maximum sizes:

Width: 180px Height: 135px

So an aspect ratio of 4:3. Images that are, for instance, 3:2 will still be 180px wide but will be smaller vertically, so 120px in that case.

I'll let know how things work out in this ticket.

[Christopher Allan Webber]

I think we've made enough of a decision by now.

Thumbs: 180x180 Display media: 640x640 (or at least, that for images, and 640 width max)

[Will Kahn-Greene]

The original url for this bug was ​http://bugs.foocorp.net/issues/356 .
Relations:
#105: related