[2.0.0-beta1] Add image_list_item sub component

Created on 23 June 2023, over 1 year ago
Updated 29 May 2024, 6 months ago

Problem/Motivation

The current slot structure is not good enough:

  fields:
    images:
      type: render
      label: Images
      description: "A flat list of renderable images."
      preview:
        - theme: image
          uri: assets/image-1.png
        - theme: image
          uri: assets/image-2.jpg
        - theme: image
          uri: assets/image-3.jpg
        - theme: image
          uri: assets/image-2.jpg
        - theme: image
          uri: assets/image-1.png
        - theme: image
          uri: assets/image-3.jpg
    labels:
      type: render
      label: Labels
      description: "A label per image. Can be empty if image as no label."
      preview:
        - "Portrait blue"
        - "Landscape yellow"
        - "Landscape turquoise"
        - "Landscape yellow"
        - "Portrait blue"
        - "Landscape turquoise"

Because we manipulate the 2 slots in the same loop:

{% for image in images %}
    ....
    {% set index = loop.index0 %}
    {% if labels[index] %}
    ....
    {% endif %}
  </li>
{% endfor %}

Proposed resolution

Split image_list between image_list and image_list_item

We may need a mansory variant also in image_list_item

Beware of pattern-image-list--variant-masonry.html.twig

API changes

Yes, this change is breaking. But we are still in alpha.

📌 Task
Status

Needs work

Version

2.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024