Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5048

Image thumbs in the Search page loading huge images

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Released
    • Icon: Blocker Blocker
    • 2.30.1
    • None
    • 2
    • Search
    • Sprint #132
    • iocaste

      Some images in the Search page are using a full resolution image in the thumbnail, we should make sure it uses `srcset` and picks the most convenient size for the thumbs.

      There could also be a flash of an empty IMG tag before the images load, so maybe we could add a very small placeholder to be loaded before the image as some sites do. - Reported by pvincent

      There is a slide-in effect when the image is loading, which is cause by the IMG tag having no width before the image loads, so then it loads and the "teaser" (title, description, etc) slides to the right. 

      A possible solution for that could be just adding a wrapper DIV around the IMG tag.

      Here you can see the way the thumbnails are being included:
      https://github.com/greenpeace/planet4-master-theme/blob/master/templates/tease-search.twig#L26

       

      Tasks:

      • Make sure the thumbs pick the right size of the image to be loaded
      • Check if that already makes the flash of the empty IMG unnoticeable, in any case we can maybe add a placeholder to preserve the lazy loading feature. 

       

            pvincent Pieter Vincent (Inactive)
            pcuadrad Pablo Cuadrado (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: