diff --git a/core/profiles/demo_umami/config/install/core.entity_view_display.media.image.scale_crop_7_3_large.yml b/core/profiles/demo_umami/config/install/core.entity_view_display.media.image.scale_crop_7_3_large.yml
index 56591999992f26b65422725070373a0723c5f9fb..6a0aebfab86330d631375e64a0759b8c0b46a0e2 100644
--- a/core/profiles/demo_umami/config/install/core.entity_view_display.media.image.scale_crop_7_3_large.yml
+++ b/core/profiles/demo_umami/config/install/core.entity_view_display.media.image.scale_crop_7_3_large.yml
@@ -4,11 +4,11 @@ dependencies:
config:
- core.entity_view_mode.media.scale_crop_7_3_large
- field.field.media.image.field_media_image
- - image.style.scale_crop_7_3_large
- media.type.image
+ - responsive_image.styles.hero
module:
- - image
- layout_builder
+ - responsive_image
third_party_settings:
layout_builder:
enabled: false
@@ -19,13 +19,13 @@ bundle: image
mode: scale_crop_7_3_large
content:
field_media_image:
- type: image
+ type: responsive_image
label: hidden
settings:
- image_style: scale_crop_7_3_large
+ responsive_image_style: hero
image_link: ''
image_loading:
- attribute: lazy
+ attribute: eager
third_party_settings: { }
weight: 1
region: content
diff --git a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_large.yml b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_large.yml
index 4464e11dc359fc54343e149f7717c203f5e86968..b2d726725c261f2ebea47bcebe40407f388cc84a 100644
--- a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_large.yml
+++ b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_large.yml
@@ -12,3 +12,9 @@ effects:
width: 1440
height: 617
anchor: center-center
+ 7108ef83-c308-4a0f-b877-e85d4995243b:
+ uuid: 7108ef83-c308-4a0f-b877-e85d4995243b
+ id: image_convert
+ weight: 2
+ data:
+ extension: webp
diff --git a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_medium.yml b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_medium.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5d8279750983132e506e72c0fa496dccf34a6bd4
--- /dev/null
+++ b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_medium.yml
@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies: { }
+name: scale_crop_7_3_medium
+label: 'Scale crop 7:3 medium'
+effects:
+ 34ef7c6a-06e4-4d71-bdaa-718ccd6056cc:
+ uuid: 34ef7c6a-06e4-4d71-bdaa-718ccd6056cc
+ id: image_scale_and_crop
+ weight: 1
+ data:
+ width: 1200
+ height: 514
+ anchor: center-center
+ d83dd527-8378-4a47-9b0c-8c7a753cc89a:
+ uuid: d83dd527-8378-4a47-9b0c-8c7a753cc89a
+ id: image_convert
+ weight: 2
+ data:
+ extension: webp
diff --git a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_small.yml b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_small.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7efcc1c57a8b4b3fae9b439f9a6ebf7278c7b66a
--- /dev/null
+++ b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_small.yml
@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies: { }
+name: scale_crop_7_3_small
+label: 'Scale crop 7:3 small'
+effects:
+ 566727ce-59a0-4078-88dc-4f0fe7badd16:
+ uuid: 566727ce-59a0-4078-88dc-4f0fe7badd16
+ id: image_scale_and_crop
+ weight: 1
+ data:
+ width: 800
+ height: 342
+ anchor: center-center
+ d5eb26a0-f961-4ba4-9f01-94a44440b4fa:
+ uuid: d5eb26a0-f961-4ba4-9f01-94a44440b4fa
+ id: image_convert
+ weight: 2
+ data:
+ extension: webp
diff --git a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_tiny.yml b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_tiny.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e1f05f5757a6b54d5965e9dd3906c3780fc8c3d4
--- /dev/null
+++ b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_tiny.yml
@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies: { }
+name: scale_crop_7_3_tiny
+label: 'Scale crop 7:3 tiny'
+effects:
+ 8af5175d-65fe-4ca8-9582-d3719de80854:
+ uuid: 8af5175d-65fe-4ca8-9582-d3719de80854
+ id: image_scale_and_crop
+ weight: 1
+ data:
+ width: 500
+ height: 214
+ anchor: center-center
+ 18643b2d-f1ee-4dd6-ad72-84b67023d3cf:
+ uuid: 18643b2d-f1ee-4dd6-ad72-84b67023d3cf
+ id: image_convert
+ weight: 2
+ data:
+ extension: webp
diff --git a/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_wide.yml b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_wide.yml
new file mode 100644
index 0000000000000000000000000000000000000000..478556b2a7b1e9e935c66f5985dfdb7770c6400c
--- /dev/null
+++ b/core/profiles/demo_umami/config/install/image.style.scale_crop_7_3_wide.yml
@@ -0,0 +1,20 @@
+langcode: en
+status: true
+dependencies: { }
+name: scale_crop_7_3_wide
+label: 'Scale crop 7:3 wide'
+effects:
+ 4f1587ba-8629-4007-9521-90cae1c041cf:
+ uuid: 4f1587ba-8629-4007-9521-90cae1c041cf
+ id: image_scale_and_crop
+ weight: 1
+ data:
+ width: 3000
+ height: 1285
+ anchor: center-center
+ d88116a5-6a1a-40ba-8a47-c635b2536de9:
+ uuid: d88116a5-6a1a-40ba-8a47-c635b2536de9
+ id: image_convert
+ weight: 2
+ data:
+ extension: webp
diff --git a/core/profiles/demo_umami/config/install/responsive_image.styles.hero.yml b/core/profiles/demo_umami/config/install/responsive_image.styles.hero.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2f72f81ca732ea49cd15b283c0fa0e4ac5026ddd
--- /dev/null
+++ b/core/profiles/demo_umami/config/install/responsive_image.styles.hero.yml
@@ -0,0 +1,35 @@
+langcode: en
+status: true
+dependencies:
+ config:
+ - image.style.scale_crop_7_3_large
+ - image.style.scale_crop_7_3_medium
+ - image.style.scale_crop_7_3_tiny
+ - image.style.scale_crop_7_3_wide
+ theme:
+ - umami
+id: hero
+label: Hero
+image_style_mappings:
+ -
+ image_mapping_type: image_style
+ image_mapping: scale_crop_7_3_wide
+ breakpoint_id: umami.hero_wide
+ multiplier: 1x
+ -
+ image_mapping_type: image_style
+ image_mapping: scale_crop_7_3_large
+ breakpoint_id: umami.hero_large
+ multiplier: 1x
+ -
+ image_mapping_type: image_style
+ image_mapping: scale_crop_7_3_medium
+ breakpoint_id: umami.hero_medium
+ multiplier: 1x
+ -
+ image_mapping_type: image_style
+ image_mapping: scale_crop_7_3_tiny
+ breakpoint_id: umami.hero_tiny
+ multiplier: 1x
+breakpoint_group: umami
+fallback_image_style: scale_crop_7_3_medium
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
index c8d5db01f6c146bf9b533ac31a18d8d55e3e3e74..bb96112bc309d4202cf525066135deec2a1e3318 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
@@ -3,15 +3,12 @@
* This file is used to style the banner block.
*/
-.block-type-banner-block {
- background-size: 0 0;
-}
-
-.block-type-banner-block .summary {
+.banner-block__content {
margin: 1rem 4%;
+ font-size: 1.188em;
}
-.block-type-banner-block .field--name-field-title {
+.banner-block .field--name-field-title {
margin: 0 0 0.5em 0;
font-family: "Scope One", Georgia, serif;
font-size: 1.777em;
@@ -19,12 +16,7 @@
line-height: 1.2em;
}
-.block-type-banner-block .field--name-field-summary {
- margin-bottom: 1.28em;
- font-size: 1.188em;
-}
-
-.block-type-banner-block .field--name-field-content-link a {
+.banner-block .field--name-field-content-link a {
display: inline-block;
padding: 0.7em 1.3em;
cursor: pointer;
@@ -40,8 +32,8 @@
font-weight: 400;
}
-.block-type-banner-block .field--name-field-content-link a:focus,
-.block-type-banner-block .field--name-field-content-link a:hover {
+.banner-block .field--name-field-content-link a:focus,
+.banner-block .field--name-field-content-link a:hover {
color: #000;
border-color: #d93760;
outline-color: #fff;
@@ -50,25 +42,23 @@
}
/* Medium */
@media screen and (min-width: 48rem) { /* 768px */
- .block-type-banner-block {
+ .banner-block {
+ position: relative; /* Anchor absolutely positioned background image. */
background-color: #464646;
- background-repeat: no-repeat;
- background-position: left center;
- background-size: cover;
- /* Image ratio 7:3 */
}
- .block-type-banner-block .block-inner {
+ .banner-block__inner {
display: flex;
align-items: center;
max-width: 1200px;
min-height: 54vw;
- margin: 0 auto;
+ margin: auto;
padding: 0 4%;
}
- .block-type-banner-block .summary {
- flex: 0 0 50%;
+ .banner-block__content {
+ position: relative; /* Establish stacking context to appear above absolutely positioned background image. */
+ max-width: 50%;
margin: 0;
padding: 1.777em;
color: #fff;
@@ -76,32 +66,27 @@
background: rgba(0, 0, 0, 0.42);
}
- .block-type-banner-block .field--name-field-media-image {
- /**
- * We need to ensure that the alt text on the image is accessible to
- * screenreaders, so, when on large screens, let's give this the same CSS
- * as the .visually-hidden class has.
- */
- position: absolute !important;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px);
- width: 1px;
- height: 1px;
- word-wrap: normal;
+ .banner-block__image img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
}
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
- .block-type-banner-block .summary {
- flex: 0 0 41%;
+ .banner-block__content {
+ max-width: 41%;
}
- .block-type-banner-block .block-inner {
+ .banner-block__inner {
min-height: 43vw;
}
}
/* Extra large + side margins */
@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
- .block-type-banner-block .block-inner {
+ .banner-block__inner {
padding: 0;
}
}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
index d23cc297bf71c87f57772b222ba1d86ed6dd2b3b..b99605d9fb382040022d1b23119d7009ca467adf 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
@@ -28,25 +28,25 @@
#}
{%
set classes = [
+ 'banner-block',
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
- 'cover-image',
]
%}
-{% set background_image = file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value) %}
-
-<div{{ attributes.addClass(classes) }} style="background-image: url({{ background_image }})">
- <div class="block-inner">
+<div{{attributes.addClass(classes)}}>
+ <div class="banner-block__inner">
{{ title_prefix }}
{% if label %}
- <h2{{ title_attributes }}>{{ label }}</h2>
+ <h2{{title_attributes}}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
- {{ content.field_media_image }}
- <div class="summary">
+ <div class="banner-block__image">
+ {{ content.field_media_image }}
+ </div>
+ <div class="banner-block__content">
{{ content|without('field_media_image') }}
</div>
{% endblock %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/content/media--scale-crop-7-3-large.html.twig b/core/profiles/demo_umami/themes/umami/templates/content/media--scale-crop-7-3-large.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d1e039dc76642e8ba0e628d4455d6286cae2a885
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/templates/content/media--scale-crop-7-3-large.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override to display a hero media item for the Umami theme.
+ *
+ * Wrapping elements are intentionally removed because the attributes can add
+ * `position: relative`, which interferes with absolutely positioned image.
+ *
+ * Available variables:
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if content %}
+ {{ content }}
+{% endif %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.breakpoints.yml b/core/profiles/demo_umami/themes/umami/umami.breakpoints.yml
index 3c3d2bc9534d3836d616b160e575da0b8c4d8f13..c66233c717d9bebbdfeaa5c55899afdb39481c45 100644
--- a/core/profiles/demo_umami/themes/umami/umami.breakpoints.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.breakpoints.yml
@@ -19,3 +19,19 @@ umami.wide:
multipliers:
- 1x
- 2x
+umami.hero_tiny:
+ label: Hero tiny
+ mediaQuery: 'all'
+ weight: 0
+umami.hero_medium:
+ label: Hero medium
+ mediaQuery: 'all and (min-width: 500px) and (max-width: 800px)'
+ weight: 1
+umami.hero_large:
+ label: Hero large
+ mediaQuery: 'all and (min-width: 800px) and (max-width: 1400px)'
+ weight: 2
+umami.hero_wide:
+ label: Hero wide
+ mediaQuery: 'all and (min-width: 1400px)'
+ weight: 3