Alfresco
  1. Alfresco
  2. ALF-16832

Thumbnails are Distorted on Some Images in Gallery View

    Details

    • Type: Bug Bug
    • Status: Closed Closed
    • Priority: Critical Critical
    • Resolution: Fixed
    • Affects Version/s: 4.2.a Community
    • Fix Version/s: 4.2.c Community
    • Component/s: Share Application
    • Security Level: external (External user)
    • Labels:
      None
    • Security Severity:
      None

      Description

      Certain aspect ratios of portrait oriented thumbnails are distorted in the gallery view.

      See http://blogs.alfresco.com/wp/new-alfresco-community-features/#comment-1604

      1. 1000x1000.png
        12 kB
      2. 1000x200.png
        5 kB
      3. 1000x562.png
        14 kB
      4. 1000x750.png
        14 kB
      5. 200x1000.png
        6 kB
      6. 562x1000.png
        14 kB
      7. 750x1000.png
        15 kB
      8. Distortion after CSS Changes.png
        882 kB
      9. Distortion on Portrait Images.png
        1.09 MB

        Issue Links

          Activity

          Hide
          Ray Gauss added a comment -

          The aspect ratio of the source can vary quite a bit and we're using browser resizing to fit in a square.

          Certain some ratios where the width differs greatly from the height would result in a distorted image.

          With the current implementation a likely compromise will be:

          .alf-gallery-item .alf-gallery-item-thumbnail .alf-gallery-item-thumbnail-img

          { min-height: 100%; min-width: 100%; max-height: 150%; max-width: 150%; }
          Show
          Ray Gauss added a comment - The aspect ratio of the source can vary quite a bit and we're using browser resizing to fit in a square. Certain some ratios where the width differs greatly from the height would result in a distorted image. With the current implementation a likely compromise will be: .alf-gallery-item .alf-gallery-item-thumbnail .alf-gallery-item-thumbnail-img { min-height: 100%; min-width: 100%; max-height: 150%; max-width: 150%; }
          Hide
          Ray Gauss added a comment -

          Reference images and screenshot showing that portrait images are distorted and landscape images are cropped.

          Show
          Ray Gauss added a comment - Reference images and screenshot showing that portrait images are distorted and landscape images are cropped.
          Hide
          Ray Gauss added a comment -

          Attached a screenshot of gallery view after CSS changes.

          4:3 both portrait and landscape will no longer be distorted at all and will be cropped.
          16:9 both portrait and landscape will be distorted very slightly and will be cropped.
          Extreme aspect ratios will be distorted and cropped.
          Square aspect ratios will be cropped.

          A greater max width and height allows for 16:9 images to display without distortion but crops too much of the image. A lesser max width and height introduces too much distortion on 16:9 images.

          Other solutions utilizing JavaScript or introducing a new thumbnail definition would be possible but at the cost of browser or server performance.

          For this view, a slight distortion of 16:9 images and greater distortion of extreme aspect ratios after these changes is acceptable. The existing detailed view, forthcoming mosaic view, gallery variants, and other views will satisfy use cases where the original aspect ratio is required.

          Show
          Ray Gauss added a comment - Attached a screenshot of gallery view after CSS changes. 4:3 both portrait and landscape will no longer be distorted at all and will be cropped. 16:9 both portrait and landscape will be distorted very slightly and will be cropped. Extreme aspect ratios will be distorted and cropped. Square aspect ratios will be cropped. A greater max width and height allows for 16:9 images to display without distortion but crops too much of the image. A lesser max width and height introduces too much distortion on 16:9 images. Other solutions utilizing JavaScript or introducing a new thumbnail definition would be possible but at the cost of browser or server performance. For this view, a slight distortion of 16:9 images and greater distortion of extreme aspect ratios after these changes is acceptable. The existing detailed view, forthcoming mosaic view, gallery variants, and other views will satisfy use cases where the original aspect ratio is required.
          Hide
          Ray Gauss added a comment -

          The proposed CSS only changes won't be sufficient, too much cropping will occur on square aspect ratios, which includes the placeholder icons.

          Close to having an alternative JavaScript solution.

          Show
          Ray Gauss added a comment - The proposed CSS only changes won't be sufficient, too much cropping will occur on square aspect ratios, which includes the placeholder icons. Close to having an alternative JavaScript solution.
          Hide
          Ray Gauss added a comment -

          Used JavaScript solution which checks native aspect ratio and if the thumbnail is landscape orientation adds a different CSS class.

          The solution eliminates distortion for all aspect ratios and seems to perform reasonably well in the browsers/environments I tested.

          Show
          Ray Gauss added a comment - Used JavaScript solution which checks native aspect ratio and if the thumbnail is landscape orientation adds a different CSS class. The solution eliminates distortion for all aspect ratios and seems to perform reasonably well in the browsers/environments I tested.
          Hide
          Alfresco QA Team added a comment -

          Successfully validated against HF-PATCH42 - Enterprise v4.2.0 (r57217-b28) schema 6034 + VTI, WCMQS, GoogleDocs v2 (all installer deployed). The issue is not reproduced.

          Environment: QALAB Stack1 - RHEL 6.4 X64, Oracle 11g R2 (11.2.0.3), Ojdbc6.jar use ‘jdbc:oracle:thin’ in db_url, Tomcat 7.0.42, JDK 7 U25, Alfresco + OpenLDAP 2.4.23, Schema 2; Client: Windows 7 X64, FF v24.0.

          ChristinaSh

          Show
          Alfresco QA Team added a comment - Successfully validated against HF-PATCH42 - Enterprise v4.2.0 ( r57217 -b28) schema 6034 + VTI, WCMQS, GoogleDocs v2 (all installer deployed). The issue is not reproduced. Environment: QALAB Stack1 - RHEL 6.4 X64, Oracle 11g R2 (11.2.0.3), Ojdbc6.jar use ‘jdbc:oracle:thin’ in db_url, Tomcat 7.0.42, JDK 7 U25, Alfresco + OpenLDAP 2.4.23, Schema 2; Client: Windows 7 X64, FF v24.0. ChristinaSh

            People

            • Assignee:
              Closed Issues
              Reporter:
              Ray Gauss
            • Votes:
              1 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Date of First Response: