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://www.flickr.com/photos/mlinksva/5720062125/in/photostream>`_
   -  `http://imgur.com/gallery/LjKuK <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 <http://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