Ticket #783 (closed story: fixed)

Opened 12 years ago

Last modified 12 years ago

Cover images are displayed in a square

Reported by: hans Owned by: hans
Priority: critical Milestone: 1.1 Peko
Component: generic Version:
Keywords: Cc:
Time planned: Time remaining:
Time spent:

Description

Current way of scaling and displaying cover image causes several distorted images:

I have come to a conclusion the best way to avoid distorted images is to display cover image in a squary. This is done so user photos in all instant messenger programs and several social software environments (see http://www.last.fm for example).

We have a agreed on the graphical prototype already before:

http://lemill.org/trac/attachment/ticket/697/square_cover_images.png?format=raw

Now I managed to create the same layout in XHTML/CSS:

Please not that these XHTML prototypes focus only on layout, not on typography.

The CSS layout of these prototypes is explained here: http://www.brunildo.org/test/img_center.html

This CSS is tested in latest versions of Safari, Mozilla Firefox and Internet Explorer. There is only one small problem with http://www.hanspoldoja.net/temp/2006-10-06-lemill/coverimages3.html in IE6, otherwise these prototypes look identical in all three browsers. Please test them with other browser versions that you have and write the results in the comment.

According to that layout cover image is always resized so that the wider side is 120px. No icons are embedded to cover images. The default cover images will be 120x120 px.

Please do not start implementing this before Monday (when I will be in Helsinki).

Change History

comment:1 Changed 12 years ago by hans

The prototype about cover image in a square for fullscreen view of learning resource is still missing.

comment:2 Changed 12 years ago by hans

  • Owner changed from anonymous to hans
  • Status changed from new to assigned

Teemu and I agree with the story, so I will accept it.

comment:3 Changed 12 years ago by jukka

  • Status changed from assigned to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.