ISTWCMS-5905: adding background-image and updating layouts to use it

src/patterns/03-layouts/layout/_layout.twig

@@ -6,6 +6,13 @@
   5: 'fifth',
 } %}
 
+{% if options.image %}
+  {% include '@components/background-image/background-image.twig' with {
+    'image': options.image,
+    'image_class': 'uw-section__background-image',
+  } %}
+{% endif %}
+
 {% set section_classes = '' %}
 <section
   {% if pattern_lab %}

src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig

@@ -16,6 +16,7 @@
   {% include '@layouts/layout/_layout.twig' with {
     classes: classes,
     num_of_blocks: num_of_blocks,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig

@@ -18,6 +18,7 @@
     classes: classes,
     num_of_blocks: num_of_blocks,
     inverted_l_left: 1,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig

@@ -18,6 +18,7 @@
     classes: classes,
     num_of_blocks: num_of_blocks,
     inverted_l_right: 1,
+    options: options,
   } %}
 
 {% endif %}

src/patterns/04-components/_index.scss

 @forward '00-cms-styles/dashboards/dashboards';
 @forward '00-cms-styles/layout-builder/layout-builder';
 @forward '00-cms-styles/toolbar-menu/toolbar-menu';
+@forward 'background-image/background-image';
 @forward 'banners/banners';
 @forward 'blockquote/blockquote';
 @forward 'button/button';

src/patterns/04-components/background-image/_background-image.scss

+.uw-section__background-image {
+  background-size: cover;
+}

src/patterns/04-components/background-image/background-image.twig

+<style>
+
+  {% for source in image.sources|reverse %}
+  @media only screen and {{ source.media | replace({'all and': ''}) }} {
+    .{{ image_class }} {
+      background-image: url("{{ source.srcset | replace({ ' 1x': '' }) }}");
+    }
+  }}
+  {% endfor %}
+</style>