Uploaded image for project: 'Skin Intranet'
  1. Skin Intranet
  2. SKININTRA-283

Problem with the dimensions of the thumbnails in the "Media" view on the home page

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 2.1.0
    • None
    • None
    • None
    • 4.9.0 M4

      The thumbnails generated in the “Media” view on the home page are degraded, they are pixelated.

      The resolver generates a smaller thumbnail (160px) than what is requested by the CSS (166px).

      We need to generate a larger thumbnail with the resolver, the larger image is generated for the mobile version (width: 334px), and CSS resizing (object-fit: cover; ) for smaller resolutions.

        1. screenshot-3.png
          screenshot-3.png
          13 kB
        2. screenshot-2.png
          screenshot-2.png
          45 kB
        3. screenshot-1.png
          screenshot-1.png
          97 kB

          [SKININTRA-283] Problem with the dimensions of the thumbnails in the "Media" view on the home page

          Using <picture> to adapt the size of the images as closely as possible depending on the media.
          We obtain much better results but the solution is not perfect... Indeed the height of the image never moves while the width of the cards varies depending on the width of the screen, without specific breakpoints (so it varies enormously, impossible to define a source for each resolution)

          The solution to ensure optimal rendering regardless of the media would probably be to fix the width of the cards for a few resolution ranges.

          Laurence Aumeunier added a comment - Using <picture> to adapt the size of the images as closely as possible depending on the media. We obtain much better results but the solution is not perfect... Indeed the height of the image never moves while the width of the cards varies depending on the width of the screen, without specific breakpoints (so it varies enormously, impossible to define a source for each resolution) The solution to ensure optimal rendering regardless of the media would probably be to fix the width of the cards for a few resolution ranges.

            laurence Laurence Aumeunier
            lperier Laurence Perier
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: