search

kitconcept / volto-light-theme

https://light-theme.kitconcept.io
11 stars 9 forks source link

Improve usability of the <Img> component in volto-image-block #40

Closed sneridagh closed 1 year ago

sneridagh commented 1 year ago

Problem

We identified some usability problems in the interface of the block, the goal of this ticket is to humanise it and narrow the usage to the use cases that we will find in Plone, making it more intuitive and usable with the current patterns. Also provide documentation and tools (StoryBook) for allowing other developers to learn how to use the component under any use case below.

We have the component that @davisagli wrote to adapt some of these use cases.

We should provide a better interface to the component:

  <Image
    src={}
    alt=""
    loading="lazy"
    ????
  />

for all the use cases below, provide a way of instantiate it. Having a basic StoryBook for covering all use cases would be amazing too. Proper documentation of the use cases as well.

All work should be done in: https://github.com/kitconcept/volto-image-block

We can identify, basically two use cases, based in the image source and nature. Also some derived use cases.

Catalog data coming from a block schema

This happens when the content has been saved in a block for caching purposes or as a reference to the original content (eg. image or teaser block). The data could be refreshed via a block serializer from the backend.

We take some assumptions for granted:

{
  "@type": "image",
  "align": "center",
  "credit": {},
  "id": "ad43f059-fab9-4b7b-b49f-d4ec1fb6e3fc",
  "image_field": 'image',
  "image_scales": {
    "image": [
      {
        "content-type": "image/jpeg",
        "download": "@@images/image-1126-7bb80db0a452739fa96a97d3c6517495.jpeg",
        "filename": "image-light.jpg",
        "height": 633,
        "scales": {
          "icon": {
            "download": "@@images/image-32-d5575b5e0795407436104a16e18ebd41.jpeg",
            "height": 17,
            "width": 32
          },
          "large": {
            "download": "@@images/image-800-9c8a61153197fca732c86aa1f2091cb3.jpeg",
            "height": 449,
            "width": 800
          },
          "larger": {
            "download": "@@images/image-1000-36afc44f7c991c35735f3338e76bc0a7.jpeg",
            "height": 562,
            "width": 1000
          },
          "mini": {
            "download": "@@images/image-200-6f2dd5c028b4fbf2c975d98f42077678.jpeg",
            "height": 112,
            "width": 200
          },
          "preview": {
            "download": "@@images/image-400-4abbad67754c69a7af7a1b91d78e680e.jpeg",
            "height": 224,
            "width": 400
          },
          "teaser": {
            "download": "@@images/image-600-705867124c8790a0fc7d4c799e506c2e.jpeg",
            "height": 337,
            "width": 600
          },
          "thumb": {
            "download": "@@images/image-128-eebe3707668d4cd3752626c026191ca0.jpeg",
            "height": 71,
            "width": 128
          },
          "tile": {
            "download": "@@images/image-64-0ea29ecf0ed3720e590d849dcbda5834.jpeg",
            "height": 35,
            "width": 64
          }
        },
        "size": 475285,
        "width": 1126
      }
    ]
  },
  "size": "l",
  "title": "Headline H2 ",
  "url": "/example/image-2"
}

Image data does not provide scales

Then the component should fallback to use only the provided image URL.

TODO: decide how we get this, and which property do we should use

Image data does not have blurhash

Could be that we do not provide blurhash data. The component should detect this and adapt and fallback to not use it at all.

Image data is external

Could be that the image provided is external to the service. The component should detect this and adapt and fallback to not use it at all.

TODO: How does the instantiation should like then? src prop?

Direct data coming from the serialization of a content type

This happens when the content has been requested somehow and the data comes directly from waking up the object and has been directly serialized and it's fresh from the backend.

In a content type (does not have to be an Image type), there are image fields that serialize from the default content request like:

"image_field_name": {
  "content-type": "image/png",
  "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-2000-9d895f5dd2600938c123550e14965f08.png",
  "filename": null,
  "height": 439,
  "scales": {
    "great": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-1200-79d8298ba97bbcac8957f2313a4f8739.png",
      "height": 263,
      "width": 1200
    },
    "huge": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-1600-36844277b711713c66c7c77f6eafa2bf.png",
      "height": 351,
      "width": 1600
    },
    "icon": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-32-471419cba465f6bf008e71a2a6597a40.png",
      "height": 7,
      "width": 32
    },
    "large": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-800-00b242dbee2491cdd98180ee7d0a4fe8.png",
      "height": 175,
      "width": 800
    },
    "larger": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-1000-39bec9ae81852eede0f930c9aced869b.png",
      "height": 219,
      "width": 1000
    },
    "mini": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-200-010a606b0d76b6a6e089e8ba466dedca.png",
      "height": 43,
      "width": 200
    },
    "preview": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-400-1766720795b7f683a5d9c9672b9fb259.png",
      "height": 87,
      "width": 400
    },
    "teaser": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-600-85dc73d6512c05dad7f2ad0bab8c256d.png",
      "height": 131,
      "width": 600
    },
    "thumb": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-128-b60c381eeb9c02111b3b8d5b82e4fcd8.png",
      "height": 28,
      "width": 128
    },
    "tile": {
      "download": "http://localhost:3000/images/plone-foundation.png/@@images/image-64-b45e38d323633ae920af93e7e7e24656.png",
      "height": 14,
      "width": 64
    }
  },
  "size": 50737,
  "width": 2000
}

These images are always internal, since they are stored in the content type. They provide the scales directly in the serialization.

sneridagh commented 1 year ago

/cc @davisagli @tisto

reekitconcept commented 1 year ago

PR https://github.com/kitconcept/volto-image-block/pull/6

sneridagh commented 1 year ago

Closing in favour of: https://gitlab.kitconcept.io/kitconcept/kitconcept-intranet/-/issues/39