hr-design-system-handlebars 1.82.3 → 1.82.5

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.82.5 (Tue Jul 16 2024)
+
+#### 🐛 Bug Fix
+
+- added data-primary-type and data-image-id to img tag inside picture e… [#1011](https://github.com/mumprod/hr-design-system-handlebars/pull/1011) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.82.4 (Tue Jul 16 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3248 - Teaser-Bilder laden im 1:1-Format bei langsamer Internetverbindung [#1009](https://github.com/mumprod/hr-design-system-handlebars/pull/1009) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.82.3 (Tue Jul 16 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3306,7 +3306,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1721116898848;
+  counter-reset: cnt1721129529899;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3327,7 +3327,7 @@ article.indexTextDS .indexTextHighlighted .link {
 /*! ****************************/
 /*! Aspect Ratio with fallback */
 /*! ****************************/
-.ar-auto {
+.ar-auto, .ar-auto > img {
         aspect-ratio: auto;
     }
 @supports not (aspect-ratio: auto) {
@@ -3343,7 +3343,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-16-9 {
+.ar-16-9, .ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 @supports not (aspect-ratio: 16 / 9) {
@@ -3359,7 +3359,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-16-7 {
+.ar-16-7, .ar-16-7 > img {
         aspect-ratio: 16 / 7;
     }
 @supports not (aspect-ratio: 16 / 7) {
@@ -3375,7 +3375,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-4-3 {
+.ar-4-3, .ar-4-3 > img {
         aspect-ratio: 4 / 3;
     }
 @supports not (aspect-ratio: 4 / 3) {
@@ -3391,7 +3391,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-4-1 {
+.ar-4-1, .ar-4-1 > img {
         aspect-ratio: 4 / 1;
     }
 @supports not (aspect-ratio: 4 / 1) {
@@ -3407,7 +3407,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-1-1 {
+.ar-1-1, .ar-1-1 > img {
         aspect-ratio: 1 / 1;
     }
 @supports not (aspect-ratio: 1 / 1) {
@@ -3423,7 +3423,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-100-27 {
+.ar-100-27, .ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 @supports not (aspect-ratio: 100 / 27.1) {
@@ -3439,7 +3439,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-9-16 {
+.ar-9-16, .ar-9-16 > img {
         aspect-ratio: 9 / 16;
     }
 @supports not (aspect-ratio: 9 / 16) {
@@ -3455,7 +3455,7 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
-.ar-7-16 {
+.ar-7-16, .ar-7-16 > img {
         aspect-ratio: 7 / 16;
     }
 @supports not (aspect-ratio: 7 / 16) {
@@ -3704,7 +3704,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1721116898848 1;
+  counter-increment: cnt1721129529899 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3720,7 +3720,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1721116898848);
+  content: counter(cnt1721129529899);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5787,7 +5787,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
   .print\:overflow-auto {
     overflow: auto;
   }
-    .print\:ar-auto {
+    .print\:ar-auto,.print\:ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -5961,7 +5961,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     line-height: 1.5;
   }
 
-    .sm480\:ar-16-7 {
+    .sm480\:ar-16-7,.sm480\:ar-16-7 > img {
         aspect-ratio: 16 / 7;
     }
 
@@ -5993,7 +5993,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 @media print {
 
   @media (min-width: 480px) {
-    .print\:sm480\:ar-auto {
+    .print\:sm480\:ar-auto,.print\:sm480\:ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -6284,7 +6284,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     font-size: 1.25rem;
     line-height: 1.6875rem;
   }
-    .sm\:ar-auto {
+    .sm\:ar-auto,.sm\:ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -6313,7 +6313,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         }
     }
 
-    .sm\:ar-16-9 {
+    .sm\:ar-16-9,.sm\:ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 
@@ -6888,7 +6888,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     transition-property: none;
   }
 
-    .md\:ar-16-9 {
+    .md\:ar-16-9,.md\:ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 
@@ -6917,7 +6917,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         }
     }
 
-    .md\:ar-1-1 {
+    .md\:ar-1-1,.md\:ar-1-1 > img {
         aspect-ratio: 1 / 1;
     }
 
@@ -6945,7 +6945,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
             clear: both;
         }
     }
-    .md\:ar-100-27 {
+    .md\:ar-100-27,.md\:ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 
@@ -7032,7 +7032,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 @media print {
 
   @media (min-width: 768px) {
-    .print\:md\:ar-auto {
+    .print\:md\:ar-auto,.print\:md\:ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -7539,7 +7539,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
   .lg\:duration-0 {
     transition-duration: 0ms;
   }
-    .lg\:ar-100-27 {
+    .lg\:ar-100-27,.lg\:ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 
@@ -7649,7 +7649,7 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     .print\:lg\:hidden {
       display: none;
     }
-    .print\:lg\:ar-auto {
+    .print\:lg\:ar-auto,.print\:lg\:ar-auto > img {
         aspect-ratio: auto;
     }
 

package/dist/views/components/base/image/responsive_image.hbs

@@ -25,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +42,9 @@
                 {{#with this.sizes}} sizes="{{this}}" {{/with~}}
                 loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                 {{#if ../../_noDelay}}
-                        fetchpriority="high"
-                 {{/if}}
-                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                    fetchpriority="high"
+                {{/if}}
+                {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,7 +1,7 @@
 <div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
         <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=(inline-switch this.realTeaserSize '["100"]' '["ar-16-9 md:ar-1-1","ar-16-9"]')~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}

package/dist/views/components/teaser/components/teaser_media_player.hbs

@@ -9,7 +9,7 @@
     {{/unless}}
 
     {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
-    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg=../../_addClassImg-adjust_context _noDelay=../../_noDelay-adjust_context ~}}                          
+    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg=_addClassImg _noDelay=_noDelay ~}}                          
     {{#if this.isTickerTeaser}}</a>{{/if}}
 
 

package/dist/views_static/components/base/image/responsive_image.hbs

@@ -25,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +42,9 @@
                 {{#with this.sizes}} sizes="{{this}}" {{/with~}}
                 loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                 {{#if ../../_noDelay}}
-                        fetchpriority="high"
-                 {{/if}}
-                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                    fetchpriority="high"
+                {{/if}}
+                {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"

package/dist/views_static/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,7 +1,7 @@
 <div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
         <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=(inline-switch this.realTeaserSize '["100"]' '["ar-16-9 md:ar-1-1","ar-16-9"]')~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.82.3",
+    "version": "1.82.5",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -6,7 +6,7 @@
     /*! ****************************/
     /*! Aspect Ratio with fallback */
     /*! ****************************/
-    .ar-auto {
+    .ar-auto, .ar-auto > img {
         aspect-ratio: auto;
     }
 
@@ -24,7 +24,7 @@
         }
     }
 
-    .ar-16-9 {
+    .ar-16-9, .ar-16-9 > img {
         aspect-ratio: 16 / 9;
     }
 
@@ -42,7 +42,7 @@
         }
     }
 
-    .ar-16-7 {
+    .ar-16-7, .ar-16-7 > img {
         aspect-ratio: 16 / 7;
     }
 
@@ -60,7 +60,7 @@
         }
     }
 
-    .ar-4-3 {
+    .ar-4-3, .ar-4-3 > img {
         aspect-ratio: 4 / 3;
     }
 
@@ -78,7 +78,7 @@
         }
     }
 
-    .ar-4-1 {
+    .ar-4-1, .ar-4-1 > img {
         aspect-ratio: 4 / 1;
     }
 
@@ -96,7 +96,7 @@
         }
     }
 
-    .ar-1-1 {
+    .ar-1-1, .ar-1-1 > img {
         aspect-ratio: 1 / 1;
     }
 
@@ -113,7 +113,7 @@
             clear: both;
         }
     }
-    .ar-100-27 {
+    .ar-100-27, .ar-100-27 > img {
         aspect-ratio: 100 / 27.1;
     }
 
@@ -131,7 +131,7 @@
         }
     }
 
-    .ar-9-16 {
+    .ar-9-16, .ar-9-16 > img {
         aspect-ratio: 9 / 16;
     }
     @supports not (aspect-ratio: 9 / 16) {
@@ -148,7 +148,7 @@
         }
     }
 
-    .ar-7-16 {
+    .ar-7-16, .ar-7-16 > img {
         aspect-ratio: 7 / 16;
     }
     @supports not (aspect-ratio: 7 / 16) {

package/src/assets/fixtures/teaser/teaser_standard_25_serif_link.json

@@ -9,6 +9,23 @@
         {
             "@->contentpath": "logicItem.includeModel.realTeaserSize",
             "@->value": "25"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.isMobile1to1",
+            "@->value": "true"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.teaserImage",
+            "@->value": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "teaser_25",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "mercedes-suv-g-100"
+                    }
+                ]
+            }
         }
     ]
 }

package/src/stories/views/components/base/image/responsive_image.hbs

@@ -25,7 +25,7 @@
                            {{#with this.srcset}} srcset="{{this}}"{{/with}}>
                 {{/each}}
             {{/with}}
-                <img class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
+                <img {{#if ../_isWebview}}data-primary-type="hr-nt:image" data-image-id="{{nextRandom}}"{{/if}} class="w-full{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}"{{#if ../_noDelay}} fetchpriority="high"{{/if}} src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_title}} title="{{../_title}}"{{~/if}} {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
         </picture>
     {{/if}}
 
@@ -42,9 +42,9 @@
                 {{#with this.sizes}} sizes="{{this}}" {{/with~}}
                 loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
                 {{#if ../../_noDelay}}
-                        fetchpriority="high"
-                 {{/if}}
-                 {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
+                    fetchpriority="high"
+                {{/if}}
+                {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
                 class="w-full{{~#with ../../_addClassImg }} {{this}}{{/with}}"

package/src/stories/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -1,7 +1,7 @@
 <div class="flex flex-col {{~#if this.showFirstImageOrGenreImage}}{{~inline-switch this.realTeaserSize '["100"]' '[" md:flex-row md:gap-x-6"]'}}{{~/if~}}">
     {{~#if this.showGenreImage}}
         <div class="pb-5{{~inline-switch this.realTeaserSize '["100"]' '[" md:basis-1/2-gap-6 lg:basis-1/3-gap-6 md:ar-1-1 md:pl-5"]'}}">
-            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=this.aspectRatio ~}}
+            {{~> components/base/image/responsive_image this.genreImage _type=this.teaserType _variant=this.imageVariant _addClass=(inline-switch this.realTeaserSize '["100"]' '["ar-16-9 md:ar-1-1","ar-16-9"]')~}}
         </div>
     {{~/if~}}
     {{~#if this.showFirstImage}}

package/src/stories/views/components/teaser/components/teaser_media_player.hbs

@@ -9,7 +9,7 @@
     {{/unless}}
 
     {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
-    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg=_addClassImg-adjust_context _noDelay=_noDelay-adjust_context ~}}                          
+    {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg=_addClassImg _noDelay=_noDelay ~}}                          
     {{#if this.isTickerTeaser}}</a>{{/if}}
 
 

package/src/stories/views/components/teaser/fixtures/teaser_standard_25_serif_link.json

@@ -1 +1 @@
-{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w, images/mercedes-suv-g-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","hideBylineAndShorttext":false,"sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"},"isUserConsentNeeded":false}}}}
+{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"title":"Mercedes-Luxusautos in Millionenhöhe gestohlen","topline":"Spektakuläre Diebstähle in Südhessen","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"25","realTeaserSize":"25","isMobile1to1":"true","teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/mercedes-suv-g-100_v-16to9__medium.jpg","sources":[{"media":"all and (max-width: 47.938em)","sizes":"40vw","srcset":"images/mercedes-suv-g-100_v-1to1__small.jpg 380w, images/mercedes-suv-g-100_v-1to1__medium.jpg 480w, images/mercedes-suv-g-100_v-1to1.jpg 720w, images/mercedes-suv-g-100_v-1to1__large.jpg 960w"},{"media":"all and (min-width: 48em) ","sizes":"33vw","srcset":"images/mercedes-suv-g-100_v-16to9__small.jpg 320w, images/mercedes-suv-g-100_v-16to9__medium.jpg 480w, images/mercedes-suv-g-100_v-16to9__medium__extended.jpg 640w, images/mercedes-suv-g-100_v-16to9.jpg 960w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":true,"isAuthor":false,"hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Panorama","headlineTag":"h1","icon":"","imageVariant":"topteaser","shorttext":"Die besten Themen in der Tagesschau App","hideBylineAndShorttext":false,"sophoraId":"textlink-256446","profiles":"","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":true,"iconName":"extern","readMoreText":{"readMoreScreenreader":"Zur Tagesschau Website","readMore":"Zur Tagesschau Website","readMoreLong":"Zur Tagesschau Website"},"isUserConsentNeeded":false}}}}