Issue #2942007 by David_Rothstein, navneet0693, andrewmacpherson: Move the footer promo block image to a field, for better configurability and accessibility

core/profiles/demo_umami/config/install/core.entity_form_display.block_content.footer_promo_block.default.yml

@@ -4,9 +4,12 @@ dependencies:
   config:
     - block_content.type.footer_promo_block
     - field.field.block_content.footer_promo_block.field_content_link
+    - field.field.block_content.footer_promo_block.field_promo_image
     - field.field.block_content.footer_promo_block.field_summary
     - field.field.block_content.footer_promo_block.field_title
+    - image.style.thumbnail
   module:
+    - image
     - link
 id: block_content.footer_promo_block.default
 targetEntityType: block_content
@@ -21,6 +24,14 @@ content:
     third_party_settings: {  }
     type: link_default
     region: content
+  field_promo_image:
+    weight: 4
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
+    type: image_image
+    region: content
   field_summary:
     weight: 2
     settings:

core/profiles/demo_umami/config/install/core.entity_view_display.block_content.footer_promo_block.default.yml

@@ -4,9 +4,12 @@ dependencies:
   config:
     - block_content.type.footer_promo_block
     - field.field.block_content.footer_promo_block.field_content_link
+    - field.field.block_content.footer_promo_block.field_promo_image
     - field.field.block_content.footer_promo_block.field_summary
     - field.field.block_content.footer_promo_block.field_title
+    - image.style.medium_8_7
   module:
+    - image
     - link
 id: block_content.footer_promo_block.default
 targetEntityType: block_content
@@ -14,7 +17,7 @@ bundle: footer_promo_block
 mode: default
 content:
   field_content_link:
-    weight: 2
+    weight: 3
     label: hidden
     settings:
       trim_length: 80
@@ -25,15 +28,24 @@ content:
     third_party_settings: {  }
     type: link
     region: content
+  field_promo_image:
+    weight: 0
+    label: hidden
+    settings:
+      image_style: medium_8_7
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
   field_summary:
-    weight: 1
+    weight: 2
     label: hidden
     settings: {  }
     third_party_settings: {  }
     type: basic_string
     region: content
   field_title:
-    weight: 0
+    weight: 1
     label: hidden
     settings:
       link_to_entity: false

core/profiles/demo_umami/config/install/field.field.block_content.footer_promo_block.field_promo_image.yml

@@ -0,0 +1,37 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - block_content.type.footer_promo_block
+    - field.storage.block_content.field_promo_image
+  module:
+    - image
+id: block_content.footer_promo_block.field_promo_image
+field_name: field_promo_image
+entity_type: block_content
+bundle: footer_promo_block
+label: 'Promo image'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'png gif jpg jpeg'
+  max_filesize: ''
+  max_resolution: ''
+  min_resolution: ''
+  alt_field: true
+  alt_field_required: false
+  title_field: false
+  title_field_required: false
+  default_image:
+    uuid: null
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  handler: 'default:file'
+  handler_settings: {  }
+field_type: image

core/profiles/demo_umami/config/install/field.storage.block_content.field_promo_image.yml

@@ -0,0 +1,29 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - block_content
+    - file
+    - image
+id: block_content.field_promo_image
+field_name: field_promo_image
+entity_type: block_content
+type: image
+settings:
+  uri_scheme: public
+  default_image:
+    uuid: null
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  target_type: file
+  display_field: false
+  display_default: false
+module: image
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

core/profiles/demo_umami/config/install/image.style.medium_8_7.yml

@@ -0,0 +1,13 @@
+langcode: en
+status: true
+dependencies: {  }
+name: medium_8_7
+label: 'Medium 8:7 (266x236)'
+effects:
+  a7d919ee-5a34-476b-b893-c9649a621e60:
+    uuid: a7d919ee-5a34-476b-b893-c9649a621e60
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 266
+      height: 236

core/profiles/demo_umami/modules/demo_umami_content/src/InstallHelper.php

@@ -348,6 +348,10 @@ class InstallHelper implements ContainerInjectionInterface {
           }),
           'title' => 'Find out more',
         ],
+        'field_promo_image' => [
+          'target_id' => $this->createFileEntity($module_path . '/default_content/images/umami-bundle.png'),
+          'alt' => '3 issue bundle of the Umami food magazine',
+        ],
       ],
     ];
 

core/profiles/demo_umami/modules/demo_umami_content/tests/src/Functional/UninstallDefaultContentTest.php

@@ -105,11 +105,11 @@ class UninstallDefaultContentTest extends BrowserTestBase {
     foreach ($this->expectedBlocks() as $block_info) {
       // Verify that the block is placed.
       $assert->pageTextContains($block_info['unique_text']);
-      // For the banner block, also verify the presence of alt text on the
-      // banner image.
-      if ($block_info['type'] == 'banner_block') {
-        $img_alt_text = $assert->elementExists('css', '#block-umami-banner-recipes img')->getAttribute('alt');
-        $this->assertEquals('Mouth watering vegetarian pasta bake with rich tomato sauce and cheese toppings', $img_alt_text);
+      // For blocks that have image alt text, also verify the presence of the
+      // expected alt text.
+      if (isset($block_info['image_alt_text'])) {
+        $img_alt_text = $assert->elementExists('css', $block_info['image_css_selector'])->getAttribute('alt');
+        $this->assertEquals($block_info['image_alt_text'], $img_alt_text);
       }
       // Verify that the block can be loaded.
       $count = $block_storage->getQuery()
@@ -131,6 +131,8 @@ class UninstallDefaultContentTest extends BrowserTestBase {
         'type' => 'banner_block',
         'uuid' => '4c7d58a3-a45d-412d-9068-259c57e40541',
         'unique_text' => 'A wholesome pasta bake is the ultimate comfort food.',
+        'image_css_selector' => '#block-umami-banner-recipes img',
+        'image_alt_text' => 'Mouth watering vegetarian pasta bake with rich tomato sauce and cheese toppings',
       ],
       [
         'type' => 'disclaimer_block',
@@ -141,6 +143,8 @@ class UninstallDefaultContentTest extends BrowserTestBase {
         'type' => 'footer_promo_block',
         'uuid' => '924ab293-8f5f-45a1-9c7f-2423ae61a241',
         'unique_text' => 'Magazine exclusive articles, recipes and plenty of reasons to get your copy today.',
+        'image_css_selector' => '#block-umami-footer-promo img',
+        'image_alt_text' => '3 issue bundle of the Umami food magazine',
       ],
     ];
   }

core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css

@@ -3,9 +3,8 @@
  * This file is used to style the Footer promo block.
  */
 
-.block-type-footer-promo-block {
-  padding-top: 250px;
-  background: url('../../../../images/png/umami-bundle.png') no-repeat center top;
+.block-type-footer-promo-block .field--type-image {
+  padding-bottom: 14px;
 }
 
 .block-type-footer-promo-block .block__title {
@@ -19,7 +18,6 @@
 
 .block-type-footer-promo-block .footer-promo-content a {
   background-color: inherit;
-  clear: left;
   display: block;
   color: #fff;
   font-weight: bold;
@@ -46,12 +44,21 @@
   .block-type-footer-promo-block {
     flex-basis: 60%;
     height: 200px;
-    padding-top: 0;
-    padding-left: 280px;
-    background-position: left top;
+    overflow: hidden;
     font-size: 0.9rem;
   }
 
+  .block-type-footer-promo-block .field--type-image {
+    float: left; /* LTR */
+    margin-right: 14px; /* LTR */
+    padding-bottom: 0;
+  }
+
+  [dir="rtl"] .block-type-footer-promo-block .field--type-image {
+    float: right;
+    margin-left: 14px;
+  }
+
   .block-type-footer-promo-block .block__title {
     padding-top: 2rem;
   }

core/profiles/demo_umami/themes/umami/templates/components/footer-promo-block/block--bundle--footer-promo-block.html.twig

@@ -26,6 +26,7 @@
  */
 #}
 <div{{ attributes }}>
+  {{ content.field_promo_image }}
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>
@@ -36,9 +37,9 @@
   {% block content %}
     <div class="footer-promo-content">
       {% if not label %}
-        {{ content|without('field_title') }}
+        {{ content|without('field_title')|without('field_promo_image') }}
       {% else %}
-        {{ content }}
+        {{ content|without('field_promo_image') }}
       {% endif %}
     </div>
   {% endblock %}