hr-design-system-handlebars 1.52.10 → 1.52.11

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.52.11 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2698: add copytext-image component [#813](https://github.com/mumprod/hr-design-system-handlebars/pull/813) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.52.10 (Tue Jan 23 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/index.css

@@ -1187,6 +1187,9 @@ article.indexText ul {
 .float-left {
   float: left;
 }
+.float-none {
+  float: none;
+}
 .clear-both {
   clear: both;
 }
@@ -1205,6 +1208,10 @@ article.indexText ul {
 .m-4 {
   margin: 1rem;
 }
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1419,6 +1426,9 @@ article.indexText ul {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-4\.5 {
+  margin-top: 1.125rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -1461,6 +1471,12 @@ article.indexText ul {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+.line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .block {
   display: block;
 }
@@ -1826,6 +1842,11 @@ article.indexText ul {
      -moz-appearance: none;
           appearance: none;
 }
+.break-inside-avoid {
+  page-break-inside: avoid;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
+}
 .grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -3228,7 +3249,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1706031818952;
+  counter-reset: cnt1706086838048;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3530,7 +3551,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706031818952 1;
+  counter-increment: cnt1706086838048 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3546,7 +3567,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1706031818952);
+  content: counter(cnt1706086838048);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5362,6 +5383,15 @@ article.indexText ul {
 }
 @media (min-width: 480px) {
 
+  .sm480\:float-left {
+    float: left;
+  }
+
+  .sm480\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .sm480\:mx-10 {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
@@ -5380,6 +5410,10 @@ article.indexText ul {
     margin-left: 2rem;
   }
 
+  .sm480\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .sm480\:mt-4 {
     margin-top: 1rem;
   }
@@ -5388,10 +5422,18 @@ article.indexText ul {
     margin-top: 1.25rem;
   }
 
+  .sm480\:mt-5\.5 {
+    margin-top: 1.375rem;
+  }
+
   .sm480\:h-8 {
     height: 2rem;
   }
 
+  .sm480\:w-1\/2 {
+    width: 50%;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
@@ -6008,6 +6050,13 @@ article.indexText ul {
     -webkit-line-clamp: 4;
   }
 
+  .md\:line-clamp-none {
+    overflow: visible;
+    display: block;
+    -webkit-box-orient: horizontal;
+    -webkit-line-clamp: none;
+  }
+
   .md\:block {
     display: block;
   }

package/dist/views/components/content/copytext/components/image/figcaption.hbs

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

package/dist/views/components/content/copytext/components/image/figure.hbs

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

package/dist/views/components/content/copytext/copytext.hbs

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

package/dist/views_static/components/content/copytext/components/image/figcaption.hbs

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

package/dist/views_static/components/content/copytext/components/image/figure.hbs

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

package/dist/views_static/components/content/copytext/copytext.hbs

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -31,6 +31,7 @@
     "event_status_gets_update": "Wird aktualisiert!",
     "feature_box_anchor": "Livestream Player anspringen",
     "featured_content_headline": "Mehr zum Thema:",
+    "figures_copyright": "Bild © ",
     "gallery_image_copyright": "Bild © {0}",
     "geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
     "geotag_metadescription_prefix": "",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/fixtures/content/copytext/copytext.inc.json

@@ -745,5 +745,87 @@
                 ]
             }
         ]
-    }             
+    },
+    "copytext_image": {
+        "copytextParagraph": [
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Speichermedien sowie Waffen und Munition sichergestellt"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."
+                        }
+                    ]   
+                }
+            },
+            {
+                "paragraphBoxItem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "buchmesse-fahnen-102"
+                        }
+                    ]
+                }
+            },
+            {
+                "paragraphBoxItem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "buchmesse-fahnen-102"
+                        }
+                    ]
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            }
+           
+        ]
+    }            
 }    

package/src/assets/fixtures/content/copytext/copytext_image.json

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "content/copytext/copytext.inc.json",
+    "@->contentpath": "copytext_image"
+}

package/src/assets/fixtures/teaser/teaser_images.inc.json

@@ -408,5 +408,49 @@
                 }
             ]
         }
+    },
+    "copytext_image_100": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": true
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
+    "copytext_image_50": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": false
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
     }
 }

package/src/stories/views/components/content/copytext/components/image/figcaption.hbs

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

package/src/stories/views/components/content/copytext/components/image/figure.hbs

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

package/src/stories/views/components/content/copytext/components/image/image.hbs

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

package/src/stories/views/components/content/copytext/copytext.hbs

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -6,6 +6,7 @@ import copytext_cite_json from './fixtures/copytext_cite.json'
 import copytext_podcastepisode_json from './fixtures/copytext_podcastepisode.json'
 import copytext_faq_json from './fixtures/copytext_faq.json'
 import copytext_jobposting_json from './fixtures/copytext_jobposting.json'
+import copytext_image_json from './fixtures/copytext_image.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -63,3 +64,9 @@ export const WithAdditionalInfo = {
     name: 'Zusatzinfo',
     args: copytext_additionalInfo_json,
 }
+
+export const WithImage = {
+    render: Template.bind({}),
+    name: 'Image',
+    args: copytext_image_json,
+}

package/src/stories/views/components/content/copytext/fixtures/copytext_image.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."}]}},{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}}]}

package/tailwind.config.js

@@ -177,6 +177,8 @@ module.exports = {
                 11: '2.75rem',
             },
             margin: {
+                '4.5': '1.125rem',
+                '5.5': '1.375rem',
                 '7.5': '1.875rem',
                 '13': '3.125rem',
                 '30': '7.5rem',

package/dist/views/components/content/copytext/components/image.hbs

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}

package/dist/views_static/components/content/copytext/components/image.hbs

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}

package/src/stories/views/components/content/copytext/components/image.hbs

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}