From 90d7ef0f2fabf12a34e05bcf3f5552efd555ad87 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Mon, 15 Nov 2021 19:20:28 +0000
Subject: [PATCH] ISTWCMS-5080: fixing background image on hero image for card
---
.../card/card-elements/_hero-image.twig | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/source/_patterns/04-components/card/card-elements/_hero-image.twig b/source/_patterns/04-components/card/card-elements/_hero-image.twig
index 10037367..723809c7 100644
--- a/source/_patterns/04-components/card/card-elements/_hero-image.twig
+++ b/source/_patterns/04-components/card/card-elements/_hero-image.twig
@@ -1,4 +1,17 @@
-<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
+<style>
+ .card__featured-image {
+ background-image: url("{{ hero.img_element }}");
+ }
+ {% for source in hero.sources %}
+ @media only screen and {{ source.media | replace({'all and': ''}) }} {
+ .card__featured-image {
+ background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+ }
+ }
+ {% endfor %}
+</style>
+
+<div class="card__featured-image" role="img" aria-label="{{ hero.alt }}">
{% if show_header %}
{% include '@components/card/card-elements/_header.twig' with {
'header': header,
--
GitLab