diff --git a/modules/oe_theme_content_publication/templates/oe-theme-content-publication-description.html.twig b/modules/oe_theme_content_publication/templates/oe-theme-content-publication-description.html.twig
index 8cf892981..5d7e4e0ca 100644
--- a/modules/oe_theme_content_publication/templates/oe-theme-content-publication-description.html.twig
+++ b/modules/oe_theme_content_publication/templates/oe-theme-content-publication-description.html.twig
@@ -13,8 +13,12 @@
{% if image is not empty %}
{% include '@ecl-twig/media-container' with {
- 'image': image.src,
- 'alt': image.alt,
+ 'picture': {
+ 'img': {
+ 'src': image.src,
+ 'alt': image.alt,
+ },
+ },
'extra_classes': 'ecl-u-bg-white'
} %}
diff --git a/modules/oe_theme_helper/oe_theme_helper.module b/modules/oe_theme_helper/oe_theme_helper.module
index 083beef75..90442beba 100644
--- a/modules/oe_theme_helper/oe_theme_helper.module
+++ b/modules/oe_theme_helper/oe_theme_helper.module
@@ -204,7 +204,7 @@ function template_preprocess_oe_theme_helper_featured_media(array &$variables) {
return $variables;
}
- // If its an AvPortal video or an iframe video, render it.
+ // If it's an AvPortal video or an iframe video, render it.
$params['embedded_media'] = $media->{$source_field->getName()}->view($display_options);
// When dealing with iframe videos, also respect its given aspect ratio.
@@ -219,7 +219,7 @@ function template_preprocess_oe_theme_helper_featured_media(array &$variables) {
return $variables;
}
- // If it's an image media, render it and assign it to the image variable.
+ // If it's an image media, render it and assign it to the picture variable.
/** @var \Drupal\image\Plugin\Field\FieldType\ImageItem $thumbnail */
$thumbnail = $media->get('thumbnail')->first();
/** @var \Drupal\Core\Entity\Plugin\DataType\EntityAdapter $file */
@@ -240,8 +240,12 @@ function template_preprocess_oe_theme_helper_featured_media(array &$variables) {
$image_url = \Drupal::service('file_url_generator')->generateAbsoluteString($file->get('uri')->getString());
}
- $params['alt'] = $thumbnail->get('alt')->getString();
- $params['image'] = $image_url;
+ $params['picture'] = [
+ 'img' => [
+ 'src' => $image_url,
+ 'alt' => $thumbnail->get('alt')->getString(),
+ ],
+ ];
$variables['params'] = $params;
$cacheability->applyTo($variables);
diff --git a/modules/oe_theme_helper/templates/oe-theme-helper-featured-media.html.twig b/modules/oe_theme_helper/templates/oe-theme-helper-featured-media.html.twig
index 79eb377a5..028309fbf 100644
--- a/modules/oe_theme_helper/templates/oe-theme-helper-featured-media.html.twig
+++ b/modules/oe_theme_helper/templates/oe-theme-helper-featured-media.html.twig
@@ -13,6 +13,6 @@
* @ingroup themeable
*/
#}
-{% if params.image or params.embedded_media %}
+{% if params.picture or params.embedded_media %}
{% include '@ecl-twig/media-container' with params only %}
{% endif %}
diff --git a/patches/@ecl/twig-component-media-container+3.11.1.patch b/patches/@ecl/twig-component-media-container+3.11.1.patch
deleted file mode 100644
index 2ce2b7aab..000000000
--- a/patches/@ecl/twig-component-media-container+3.11.1.patch
+++ /dev/null
@@ -1,12 +0,0 @@
-patch-package
---- a/node_modules/@ecl/twig-component-media-container/media-container.html.twig
-+++ b/node_modules/@ecl/twig-component-media-container/media-container.html.twig
-@@ -69,7 +69,7 @@
- },
- }
- %}
-- {% if _alt is not empty %}
-+ {% if _alt is defined %}
- {% set _picture = _picture|merge({
- img: _picture.img|merge({
- alt: _alt
diff --git a/templates/content/oe-theme-helper-in-page-navigation--with-image.html.twig b/templates/content/oe-theme-helper-in-page-navigation--with-image.html.twig
index fff90a046..c761b88ee 100644
--- a/templates/content/oe-theme-helper-in-page-navigation--with-image.html.twig
+++ b/templates/content/oe-theme-helper-in-page-navigation--with-image.html.twig
@@ -13,8 +13,12 @@
{% if image %}
{% include '@ecl-twig/media-container' with {
- 'image': image.src,
- 'alt': image.alt,
+ 'picture': {
+ 'img': {
+ 'src': image.src,
+ 'alt': image.alt,
+ },
+ },
'extra_classes': 'ecl-u-bg-white ecl-u-shadow-none'
} %}
diff --git a/templates/paragraphs/paragraph--oe-av-media.html.twig b/templates/paragraphs/paragraph--oe-av-media.html.twig
index d20effcb4..c53662200 100644
--- a/templates/paragraphs/paragraph--oe-av-media.html.twig
+++ b/templates/paragraphs/paragraph--oe-av-media.html.twig
@@ -8,8 +8,12 @@
#}
{% if image %}
{% set media_container = {
- 'image': image.src,
- 'alt': image.alt,
+ 'picture': {
+ 'img': {
+ 'src': image.src,
+ 'alt': image.alt,
+ },
+ },
} %}
{% elseif video %}
{% set media_container = {
diff --git a/templates/patterns/file_image/pattern-file-image.html.twig b/templates/patterns/file_image/pattern-file-image.html.twig
index 3c623ae2e..9bfc291d6 100644
--- a/templates/patterns/file_image/pattern-file-image.html.twig
+++ b/templates/patterns/file_image/pattern-file-image.html.twig
@@ -5,7 +5,11 @@
*/
#}
{% include '@ecl-twig/media-container' with {
- 'image': src,
- 'alt': alt,
+ 'picture': {
+ 'img': {
+ 'src': src,
+ 'alt': alt,
+ },
+ },
'description': caption,
} %}