3 instead of 1 image

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -120,7 +120,14 @@ export const createMarketingHeader =
 
       if (slideData.imageSrc && slideData.imageSrc.length > 0) {
         const imageBox = createElement('div', ['image-box'], null, outer);
-        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], imageBox);
+        const picture = createElement('picture', [], null, imageBox);
+        const src1 = createElement('source', [], null, picture);
+        src1.setAttribute('media','(min-width: 1000px)');
+        src1.setAttribute('srcset',slideData.imageSrc);
+        const src2 = createElement('source', [], null, picture);
+        src2.setAttribute('media','(min-width: 901px)');
+        src2.setAttribute('srcset',slideData.imageSrc);
+        createImage(slideData.imageSrc, 900, 600, 'Slide ' + index, [], picture);
         const copyright = createElement('span', ['copyright'], 'Copyright-Angabe', imageBox);
         copyright.setAttribute("aria-hidden", "true");
         createElement('span', ['sr-only'], 'Copyright-Angabe', imageBox);

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -592,6 +592,12 @@ section.marketingheader{
         min-height: 427px;
         height: 100%;
       }
+      picture {
+        @media(min-width: 1000px) {
+          min-height: 427px;
+          height: 100%;
+        }
+      }
       img {
         object-position: right;
         //max-height:427px;

gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js

@@ -32,8 +32,10 @@ export const createParticipationStage = ({
   const tb = createElement('div', ['text-box'], null, col);
 
   if (backgroundImage && backgroundImage.length > 0) {
-    //section.content('style=background: red;');
-    section.style = 'background-image: url(' + backgroundImage + ');';
+    section.style = '--bg-mobile: url(' + backgroundImage + ');\n' +
+        '        --bg-tablet: url(' + backgroundImage + ');\n' +
+        '        --bg-desktop: url(' + backgroundImage + ');\n' +
+        '        background-image: var(--bg-mobile);';
     section.classList.add('background-image');
   }
 
@@ -69,7 +71,14 @@ export const createParticipationStage = ({
   if (hasImage) {
     section.classList.add('image-stage');
     const ib = createElement('div', ['image-box'], null, col);
-    createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
+    const picture = createElement('picture', [], null, ib);
+    const src1 = createElement('source', [], null, picture);
+    src1.setAttribute('media','(min-width: 1300px)');
+    src1.setAttribute('srcset',imageSrc);
+    const src2 = createElement('source', [], null, picture);
+    src2.setAttribute('media','(min-width: 1000px)');
+    src2.setAttribute('srcset',imageSrc);
+    createImage(imageSrc, 1080, 648, 'Beteiligung', [], picture);
     const copy = createElement('span', ['copyright'], copyright, ib);
     copy.setAttribute("aria-hidden", "true");
     createElement('span', ['sr-only'], copyright, ib);

gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss

@@ -13,6 +13,16 @@
   &.background-image {
     background-size: cover;
     background-position: 50% 50%;
+    @media (min-width: 560px) {
+      &[style*='--bg-tablet'] {
+        background-image: var(--bg-tablet) !important;
+      }
+    }
+    @media (min-width: 1000px) {
+      &[style*='--bg-desktop'] {
+        background-image: var(--bg-desktop) !important;
+      }
+    }
   }
 
   &.first-element {
@@ -83,6 +93,11 @@
       bottom: 0;
       z-index: -1;
 
+      picture {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
       img {
         position: relative;
         display: block;

gfi-ihk-2024/stories/sections/slider/slider.scss

@@ -155,7 +155,7 @@
       padding-top: 66.66667%;
     }
 
-    > img, .gallery {
+    > picture, img, .gallery {
       position: absolute;
       left: 0;
       top: 0;
@@ -169,7 +169,7 @@
       flex: 1 1 66.66667%;
       max-width: 66.66667%;
 
-      > img, .gallery {
+      > picture, img, .gallery {
         width: calc(100% - 20px);
         left: 1px;
       }