Review usage of image in SDDS components

Created on 29 August 2024, 18 days ago
Updated 8 September 2024, 8 days ago

Problem/Motivation

Unclear if we are aligning with XB image usage. Compare how we are doing images in our components with XB code.

From πŸ“Œ [later phase] Support `{type: object, …}` prop shapes that require *multiple* field types β€” also: nested components/component reuse Postponed , they have

      "title": "image",
      "type":  "object",
      "required": ["src"],
      "properties": {
        "src": {
          "title": "Image URL",
          "$ref": "json-schema-definitions://experience_builder.module/image-uri"
        },
        "alt": {
          "title": "Alternative text",
          "type": "string"
        },
        "width": {
          "title": "Image width",
          "type": "integer"
        },
        "height": {
          "title": "Image height",
          "type": "integer"
        }
      }

and the XB image component has:

name: Image
props:
  type: object
  required:
    - image
  properties:
    # @todo Consider pulling all these props up a level, and move to components/simple/image: https://www.drupal.org/project/experience_builder/issues/3468944
    image:
      title: 'Image'
      $ref: json-schema-definitions://experience_builder.module/image
      # @todo `type: object` should not be necessary, it's because \Drupal\sdc\Component\ComponentValidator::getClassProps() does not yet support $ref
      type: object
      examples:
        - src: https://placehold.co/600x400.png
          alt: 'Boring placeholder'
          width: 600
          height: 400

Steps to reproduce

Proposed resolution

Go through our image component and our starshot components that use images and compare.

Remaining tasks

  • Look at base theme image component
  • Look at all the subtheme components that have images in them
  • Compare our YAML structure to the XB examples
  • Figure out if we need to make changes
  • If so, create an MR
  • Review and test

User interface changes

Component images show up properly in XB.

API changes

Data model changes

πŸ“Œ Task
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States Kristen Pol Santa Cruz, CA, USA

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

Merge Requests

Comments & Activities

  • Issue created by @Kristen Pol
  • First commit to issue fork.
  • Pipeline finished with Success
    12 days ago
    Total: 228s
    #273998
  • πŸ‡ΊπŸ‡ΈUnited States Kristen Pol Santa Cruz, CA, USA

    Jacob and I got this working yesterday by:

    Add to yaml:

        image:
          $ref: json-schema-definitions://experience_builder.module/image
          type: object
          title: Image
          examples:
            - src: https://placehold.co/600x400.png
              alt: 'placeholder'
              width: 600
              height: 400
    

    Update twig to use image.src instead of image.url to match XB schema:

            {% block image %}
              {% if image is not empty %}
                <div class="ct-campaign__image">
                  {% include '@atoms/image/image.twig' with {
                    theme: theme,
                    url: image.src,
                    alt: image.alt,
                  } only %}
                </div> 
              {% endif %}
            {% endblock %}
    

    but found this bug:

    πŸ› Redux support for ImageWidget: `[image] String value found, but an object is required` Postponed

    which the XB team are trying to fix now.

    So... in the meantime, we can put the image code in how we want it. Then, when we test the props, we have to comment it out to test.

  • Pipeline finished with Success
    11 days ago
    Total: 166s
    #275162
  • Merge request !39added image refs β†’ (Merged) created by jacobadeutsch
  • Pipeline finished with Success
    11 days ago
    Total: 238s
    #275239
  • Pipeline finished with Success
    11 days ago
    Total: 195s
    #275243
  • Pipeline finished with Success
    11 days ago
    Total: 165s
    #275250
  • Pipeline finished with Success
    11 days ago
    #275251
  • Pipeline finished with Success
    11 days ago
    Total: 166s
    #275252
  • Pipeline finished with Success
    11 days ago
    Total: 166s
    #275253
  • Pipeline finished with Success
    11 days ago
    #275254
  • Pipeline finished with Success
    11 days ago
    #275259
  • Issue was unassigned.
  • Status changed to Fixed 8 days ago
  • πŸ‡ΊπŸ‡ΈUnited States Kristen Pol Santa Cruz, CA, USA

    Done and merged. Thanks!

Production build 0.71.5 2024