Fix passing the alt text for the image in the theme implementation to display a dynamic responsive image component

Created on 28 September 2023, 9 months ago

Updated 5 October 2023, 9 months ago

Problem/Motivation

Follow up issue after:
📌 Change the default Drimage implementation to display a dynamic responsive image to use the varbase_components:dynamic-responsive-image SDC component Fixed
📌 Add a new Dynamic Responsive Image component in Varbase Component library Fixed
📌 Add the Responsive Ratio Utility provided by the Bootstrap Ratio Utilities for media video displays with cover images Active

Hitting an issue with the automated functional testing for Text and Images
https://app.circleci.com/pipelines/github/Vardot/varbase/739/workflows/2...

And I should see image with the "Embed Flag Earth in space" alt text
The page dose not have an image with the [ Embed Flag Earth in space ] Alt Text. (Exception)

Steps to reproduce

  @javascript @local @development @staging @production
  Scenario: Upload the Embed Flag Earth file
    Given I am a logged in user with the "Site admin" user
    When I go to "/media/add/image"
    And wait
    Then I should see "Allowed types: png gif jpg jpeg."
    When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
    And wait
    And I press the "Save" button
    And wait
    And I fill in "Embed Flag Earth in space" for "field_media_image[0][alt]"
    And I fill in "Embed Flag Earth all earth in space" for "field_media_image[0][title]"
    And I fill in "Embed Flag Earth" for "name[0][value]"
    And I check the box "Show in media library"
    And I press the "Save" button
    And wait
    Then I should see "Embed Flag Earth"

  @javascript @local @development @staging @production
  Scenario: Check if a user with a permission to manage Landing page (Paragraphs) content type create a new Landing page
    Given I am a logged in user with the "Site admin" user
    When I go to "/node/add/landing_page"
    And wait
    And I fill in "Test landing page title for text and image paragraphs" for "Title"
    And I fill in "Test landing page body description." for "Page description"
    When I press "Add Component"
    And I wait for AJAX to finish
    And I wait for 1 second
    And I select the "text_and_image" paragraph component
    And I wait for AJAX to finish
    Then I should see "Text and image"
    And I should see "No media items are selected."
    When I press "field_image-media-library-open-button-field_lp_paragraphs-0-subform"
    And I wait for AJAX to finish
    And I should see "Name"
    When I fill in "Flag Earth" for "Name"
    And I press the "Apply filters" button
    And I wait for AJAX to finish
    Then I should see image with the "Flag Earth all earth in space" title text
    When I check the box "media_library_select_form[0]"
    And I wait for AJAX to finish
    And I press "dialog-submit"
    And I wait for AJAX to finish
    And I scroll up
    Then I should see "The maximum number of media items have been selected."
    When I click "Text"
    And I fill in the rich text editor field "Text" with "In eros ipsum, mattis vitae vulputate eu, blandit non risus. Maecenas ultricies volutpat massa id hendrerit. Phasellus magna quam, lacinia sed justo pulvinar, tristique finibus felis. Quisque in sagittis tellus. Curabitur in est at quam maximus elementum. Pellentesque interdum tincidunt nisl, ac efficitur elit aliquam id. Integer egestas neque ut risus tincidunt semper."
    And wait
    And I select "published" from "edit-moderation-state-0-state"
    And I press the "Save" button
    And wait
    Then I should see "In eros ipsum, mattis vitae vulputate eu, blandit"
    And I should see image with the "Embed Flag Earth in space" alt text

Proposed resolution

Pass the alt: The alt text for the image. to the varbase_components:dynamic-responsive-image component
Add a default empty string if no alt was provided alt: alt|default(''), from the media entity type, or in case of custom code for building crating a media type image.

{#
/**
 * @file
 * Vartheme BS5 theme implementation to display a dynamic responsive image
 *
 * Available variables:
 * - url: An optional URL the image can be linked to.
 * - width: The original width of the image.
 * - height: The original height of the image.
 * - alt: The alt text for the image.
 * - item_attributes: attributes for the wrapper
 * - data: json encoded drimage data object
 *
 * @see template_preprocess_drimage_formatter()
 *
 * @ingroup themeable
 */
#}
{% include 'varbase_components:dynamic-responsive-image' with {
    url: url|default(''),
    width: width,
    height: height,
    alt: alt|default(''),
    item_attributes: item_attributes|default([]),
    data: data|default([])
  } only
%}