[#312] Added the Image list paragraph component and placed it on the homepage.

config/default/core.entity_form_display.paragraph.image_list.default.yml

@@ -0,0 +1,65 @@
+uuid: c791cf92-99ab-4b0a-b236-3da575e11796
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.image_list.field_c_p_background
+    - field.field.paragraph.image_list.field_c_p_content
+    - field.field.paragraph.image_list.field_c_p_image
+    - field.field.paragraph.image_list.field_c_p_theme
+    - field.field.paragraph.image_list.field_c_p_title
+    - field.field.paragraph.image_list.field_c_p_vertical_spacing
+    - paragraphs.paragraphs_type.image_list
+  module:
+    - media_library
+    - text
+id: paragraph.image_list.default
+targetEntityType: paragraph
+bundle: image_list
+mode: default
+content:
+  field_c_p_background:
+    type: boolean_checkbox
+    weight: 5
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_c_p_content:
+    type: text_textarea
+    weight: 1
+    region: content
+    settings:
+      rows: 5
+      placeholder: ''
+    third_party_settings: {  }
+  field_c_p_image:
+    type: media_library_widget
+    weight: 2
+    region: content
+    settings:
+      media_types: {  }
+    third_party_settings: {  }
+  field_c_p_theme:
+    type: options_buttons
+    weight: 3
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_c_p_title:
+    type: string_textfield
+    weight: 0
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  field_c_p_vertical_spacing:
+    type: options_buttons
+    weight: 4
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

config/default/core.entity_view_display.paragraph.image_list.default.yml

@@ -0,0 +1,33 @@
+uuid: 205a19a3-0247-4316-a0da-14a78382c5b7
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.field.paragraph.image_list.field_c_p_background
+    - field.field.paragraph.image_list.field_c_p_content
+    - field.field.paragraph.image_list.field_c_p_image
+    - field.field.paragraph.image_list.field_c_p_theme
+    - field.field.paragraph.image_list.field_c_p_title
+    - field.field.paragraph.image_list.field_c_p_vertical_spacing
+    - paragraphs.paragraphs_type.image_list
+  module:
+    - text
+id: paragraph.image_list.default
+targetEntityType: paragraph
+bundle: image_list
+mode: default
+content:
+  field_c_p_content:
+    type: text_default
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden:
+  field_c_p_background: true
+  field_c_p_image: true
+  field_c_p_theme: true
+  field_c_p_title: true
+  field_c_p_vertical_spacing: true
+  search_api_excerpt: true

config/default/field.field.node.blog.field_c_n_components.yml

@@ -21,6 +21,7 @@ dependencies:
     - paragraphs.paragraphs_type.civictheme_webform
     - paragraphs.paragraphs_type.divider
     - paragraphs.paragraphs_type.from_library
+    - paragraphs.paragraphs_type.image_list
     - paragraphs.paragraphs_type.steps
   module:
     - entity_reference_revisions
@@ -55,6 +56,7 @@ settings:
       from_library: from_library
       civictheme_message: civictheme_message
       steps: steps
+      image_list: image_list
     negate: 0
     target_bundles_drag_drop:
       civictheme_accordion:
@@ -153,6 +155,9 @@ settings:
       from_library:
         weight: 62
         enabled: true
+      image_list:
+        weight: 63
+        enabled: true
       steps:
         weight: 61
         enabled: true

config/default/field.field.node.civictheme_page.field_c_n_components.yml

@@ -14,12 +14,14 @@ dependencies:
     - paragraphs.paragraphs_type.civictheme_iframe
     - paragraphs.paragraphs_type.civictheme_manual_list
     - paragraphs.paragraphs_type.civictheme_map
+    - paragraphs.paragraphs_type.civictheme_message
     - paragraphs.paragraphs_type.civictheme_next_step
     - paragraphs.paragraphs_type.civictheme_promo
     - paragraphs.paragraphs_type.civictheme_slider
     - paragraphs.paragraphs_type.civictheme_webform
     - paragraphs.paragraphs_type.divider
     - paragraphs.paragraphs_type.from_library
+    - paragraphs.paragraphs_type.image_list
     - paragraphs.paragraphs_type.steps
   module:
     - entity_reference_revisions
@@ -56,6 +58,7 @@ settings:
       from_library: from_library
       civictheme_message: civictheme_message
       steps: steps
+      image_list: image_list
     negate: 0
     target_bundles_drag_drop:
       civictheme_accordion:
@@ -154,6 +157,9 @@ settings:
       from_library:
         weight: 62
         enabled: true
+      image_list:
+        weight: 63
+        enabled: true
       steps:
         weight: 61
         enabled: true

config/default/field.field.node.project.field_c_n_components.yml

@@ -21,6 +21,7 @@ dependencies:
     - paragraphs.paragraphs_type.civictheme_webform
     - paragraphs.paragraphs_type.divider
     - paragraphs.paragraphs_type.from_library
+    - paragraphs.paragraphs_type.image_list
     - paragraphs.paragraphs_type.steps
   module:
     - entity_reference_revisions
@@ -55,6 +56,7 @@ settings:
       from_library: from_library
       civictheme_message: civictheme_message
       steps: steps
+      image_list: image_list
     negate: 0
     target_bundles_drag_drop:
       civictheme_accordion:
@@ -153,6 +155,9 @@ settings:
       from_library:
         weight: 62
         enabled: true
+      image_list:
+        weight: 63
+        enabled: true
       steps:
         weight: 61
         enabled: true

config/default/field.field.paragraph.image_list.field_c_p_background.yml

@@ -0,0 +1,23 @@
+uuid: a84abbf9-f0dc-4c62-9e63-4bd9d93c2403
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_background
+    - paragraphs.paragraphs_type.image_list
+id: paragraph.image_list.field_c_p_background
+field_name: field_c_p_background
+entity_type: paragraph
+bundle: image_list
+label: Background
+description: 'Apply a themed background colour and provide horizontal spacing to the component.'
+required: false
+translatable: true
+default_value:
+  -
+    value: 0
+default_value_callback: ''
+settings:
+  on_label: 'On'
+  off_label: 'Off'
+field_type: boolean

config/default/field.field.paragraph.image_list.field_c_p_content.yml

@@ -0,0 +1,22 @@
+uuid: 01f22e86-054d-4f3d-b771-ce291de272a4
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_content
+    - paragraphs.paragraphs_type.image_list
+  module:
+    - text
+id: paragraph.image_list.field_c_p_content
+field_name: field_c_p_content
+entity_type: paragraph
+bundle: image_list
+label: Content
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings:
+  allowed_formats: {  }
+field_type: text_long

config/default/field.field.paragraph.image_list.field_c_p_image.yml

@@ -0,0 +1,29 @@
+uuid: db8e25b6-c863-4aff-a287-c3b794427eb2
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_image
+    - media.type.civictheme_image
+    - paragraphs.paragraphs_type.image_list
+id: paragraph.image_list.field_c_p_image
+field_name: field_c_p_image
+entity_type: paragraph
+bundle: image_list
+label: Images
+description: 'Images shown in the list, in the order they are listed.'
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:media'
+  handler_settings:
+    target_bundles:
+      civictheme_image: civictheme_image
+    sort:
+      field: _none
+      direction: ASC
+    auto_create: false
+    auto_create_bundle: ''
+field_type: entity_reference

config/default/field.field.paragraph.image_list.field_c_p_theme.yml

@@ -0,0 +1,23 @@
+uuid: dd314639-8cb9-4467-8968-664816f44a6c
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_theme
+    - paragraphs.paragraphs_type.image_list
+  module:
+    - options
+id: paragraph.image_list.field_c_p_theme
+field_name: field_c_p_theme
+entity_type: paragraph
+bundle: image_list
+label: Theme
+description: ''
+required: true
+translatable: true
+default_value:
+  -
+    value: light
+default_value_callback: ''
+settings: {  }
+field_type: list_string

config/default/field.field.paragraph.image_list.field_c_p_title.yml

@@ -0,0 +1,19 @@
+uuid: adf44d12-4cf2-446d-beae-4ba9eae21ba6
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_title
+    - paragraphs.paragraphs_type.image_list
+id: paragraph.image_list.field_c_p_title
+field_name: field_c_p_title
+entity_type: paragraph
+bundle: image_list
+label: Title
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: string

config/default/field.field.paragraph.image_list.field_c_p_vertical_spacing.yml

@@ -0,0 +1,23 @@
+uuid: b744aff8-dc86-4e8c-a177-6bb0456059e5
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_c_p_vertical_spacing
+    - paragraphs.paragraphs_type.image_list
+  module:
+    - options
+id: paragraph.image_list.field_c_p_vertical_spacing
+field_name: field_c_p_vertical_spacing
+entity_type: paragraph
+bundle: image_list
+label: 'Vertical spacing'
+description: 'Adds additional vertical spacing to a component'
+required: true
+translatable: true
+default_value:
+  -
+    value: both
+default_value_callback: ''
+settings: {  }
+field_type: list_string

config/default/field.storage.paragraph.field_c_p_image.yml

@@ -15,7 +15,7 @@ settings:
   target_type: media
 module: core
 locked: false
-cardinality: 1
+cardinality: -1
 translatable: true
 indexes: {  }
 persist_with_no_fields: false

config/default/image.style.image_list.yml

@@ -0,0 +1,21 @@
+uuid: be65753e-cf04-43e9-9738-285f13c4ffb1
+langcode: en
+status: true
+dependencies: {  }
+name: image_list
+label: 'Image list (320x160, WebP)'
+effects:
+  4da4bcd9-a025-447c-8269-ba93b559b159:
+    uuid: 4da4bcd9-a025-447c-8269-ba93b559b159
+    id: image_scale
+    weight: 1
+    data:
+      width: 320
+      height: 160
+      upscale: false
+  5dcdbfad-d5e1-44ba-9156-69cc79b29cd3:
+    uuid: 5dcdbfad-d5e1-44ba-9156-69cc79b29cd3
+    id: image_convert
+    weight: 2
+    data:
+      extension: webp

config/default/paragraphs.paragraphs_type.image_list.yml

@@ -0,0 +1,10 @@
+uuid: ad60296d-77b5-44fa-afb6-7deec8564131
+langcode: en
+status: true
+dependencies: {  }
+id: image_list
+label: 'Image list'
+icon_uuid: null
+icon_default: null
+description: 'A row of images rendered as a single band, wrapping to fit the screen.'
+behavior_plugins: {  }

docs/performance.md

@@ -12,10 +12,11 @@ An image style does two things here: it caps the pixel dimensions, and it conver
 | `banner_featured` | The banner featured image: cropped to 1090x818 around the focal point, converted to WebP |
 | `civictheme_*` | Cards, campaigns and slides: cropped by the CivicTheme sizes, converted to WebP |
 | `divider` | The divider graphic: scaled to fit within 1090x480, converted to WebP |
+| `image_list` | An image in the image list: scaled to fit within 320x160, converted to WebP |
 | `wide` | An image placed in content and rendered as a figure |
 | `social_share` | Share cards, deliberately **not** converted, because some social crawlers still handle WebP badly |
 
-CivicTheme resolves several of these with no image style at all, which yields the URL of the original upload. Three preprocessors here re-resolve them: `_drevops_banner_apply_image_styles()` for the two banner images, `drevops_preprocess_paragraph__divider()` for the divider, and `drevops_preprocess_media__civictheme_image()` for the figure. The banner one covers the block field and the node field, because the node's value wins when both are set.
+CivicTheme resolves several of these with no image style at all, which yields the URL of the original upload. Four preprocessors here re-resolve them: `_drevops_banner_apply_image_styles()` for the two banner images, `drevops_preprocess_paragraph__divider()` for the divider, `_drevops_preprocess_paragraph__paragraph_field__images()` for the image list, and `drevops_preprocess_media__civictheme_image()` for the figure. The banner one covers the block field and the node field, because the node's value wins when both are set.
 
 The featured image sits in a box 40% of the viewport wide and no more than 600px tall, filled with `object-fit: cover`. Its ratio moves with the viewport and with how tall the banner's own content makes it, so the browser trims a different part of the image on every screen. A focal point crop puts the subject at the centre of the derivative, which is the part `cover` keeps whichever way it trims.