In #2387445: Add styling options in the configuration we introduced optional out-of-the-box styling of embedded Flickr images. There are several effects that apply on hovering over an image to emphasize they are clickable to see the larger version. Two of those (Enlarge and Zoom) scale the image with CSS, however they enlarge the image bigger than the original size, resulting in a degradation of the resolution.

CommentFileSizeAuthor
#3 zoom_style_without_degrading_resolution-2401205-3.patch8.41 KBlolandese
#2 zoom_style_without_degrading_resolution-2401205-2.patch2.67 KBlolandese

Comments

lolandese’s picture

lolandese commented

A solution would be to use a size of the image that is one size bigger than the display size without hover. Needed:

  • Add an inline style of the bigger image, defining a width/height or max-width/max-height. To check if this doesn't affect the current responsiveness.
  • Adjust the CSS in flickrstyle_zoom.css.

Biggest problem to overcome is the needed center crop through CSS if the display ratio does not match that of the used bigger image. See if http://dropbucket.org/node/891 could be of any help.

lolandese’s picture

lolandese commented
Status: Active » Needs review
StatusFileSize
new zoom_style_without_degrading_resolution-2401205-2.patch2.67 KB

Attached patch works for all sizes but 'q' (square 150px). We should scale/crop this from the superior 'm' size that has a different ratio.

lolandese’s picture

lolandese commented
StatusFileSize
new zoom_style_without_degrading_resolution-2401205-3.patch8.41 KB

Also working for size 'q' now and added an additional style to emphasize.

lolandese’s picture

lolandese commented
Status: Needs review » Fixed

  • lolandese committed 9c5f9fe on 7.x-1.x 
    Issue #2401205 by lolandese: Zoom style without a degrading resolution...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.