Barmer Fractal

Figure: No Image Lazyloading 

<figure class="m-figure ">

    <picture class="a-picture ">
        <source media="(max-width: 640px)" srcset="../../images/1x1/mann-mit-kind.jpg">
        <source media="(min-width: 641px)" srcset="../../images/16x9/mann-mit-kind.jpg">
        <img src="../../images/16x9/mann-mit-kind.jpg" alt="Dies ist ein alternativ Text">
    </picture>

</figure>
 
<figure class="m-figure {{viewtypes.specifier}}">

  {{# switches.hasHeadline }}
    <h2 class="figure__headline {{viewtypes.headlineSpecifier}}">
      {{content.headline}}
    </h2>
  {{/switches.hasHeadline}}

  {{# switches.hasPicture}}
    {{# switches.hasLazyLoading }}
      {{ render '@picture' this.partials.picture merge=true }}
    {{/switches.hasLazyLoading}}
    {{^ switches.hasLazyLoading }}
      {{ render '@picture--no-lazy' this.partials.picture merge=true }}
    {{/switches.hasLazyLoading}}
  {{/switches.hasPicture}}

  {{# switches.hasBlockquote }}
    <blockquote class="figure__blockquote a-richtext">
      {{{ content.blockquoteRichtext }}}
    </blockquote>
  {{/switches.hasBlockquote}}

  {{# switches.hasDownload }}
    <div class="figure__download">
      {{ render '@button--download' this.partials.button merge=true }}
    </div>
  {{/ switches.hasDownload }}

  {{# switches.hasFigcaption }}
    <figcaption class="figure__figcaption {{viewtypes.figcaptionSpecifier}}" {{# switches.hasDownload }}aria-hidden="true"{{/ switches.hasDownload }}>
      {{#if switches.hasBlockquoteSource }}
        &ndash; {{content.blockquoteSourceName}}{{#content.blockquoteSourceAge}} ({{this}}){{/content.blockquoteSourceAge}}{{#content.blockquoteSourcePosition}}, {{this}}{{/content.blockquoteSourcePosition}}
      {{else}}
        {{{ content.captionText }}}
      {{/if}}
    </figcaption>
  {{/ switches.hasFigcaption }}
</figure>
 
{
  "switches": {
    "hasHeadline": false,
    "hasPicture": true,
    "hasBlockquote": false,
    "hasFigcaption": false,
    "hasBlockquoteSource": false,
    "hasLazyLoading": false
  },
  "viewtypes": {
    "specifier": "",
    "headlineSpecifier": "figure__headline--h3",
    "figcaptionSpecifier": ""
  },
  "content": {
    "sources": [
      {
        "media": "(max-width: 640px)",
        "srcset": "../../images/1x1/mann-mit-kind.jpg",
        "width": false,
        "height": false
      },
      {
        "media": "(min-width: 641px)",
        "srcset": "../../images/16x9/mann-mit-kind.jpg",
        "width": false,
        "height": false
      }
    ],
    "img": {
      "src": "../../images/16x9/mann-mit-kind.jpg",
      "alt": "Dies ist ein alternativ Text",
      "width": false,
      "height": false
    }
  },
  "partials": {
    "picture": {
      "content": {
        "sources": [
          {
            "media": "(max-width: 640px)",
            "srcset": "../../images/1x1/mann-mit-kind.jpg",
            "width": false,
            "height": false
          },
          {
            "media": "(min-width: 641px)",
            "srcset": "../../images/16x9/mann-mit-kind.jpg",
            "width": false,
            "height": false
          }
        ],
        "img": {
          "src": "../../images/16x9/mann-mit-kind.jpg",
          "alt": "Dies ist ein alternativ Text",
          "width": false,
          "height": false
        }
      }
    }
  }
}

No notes defined.