Freie Grundschule Pfefferwerk - Frontend Design

Image: 16 X 9 

<figure class="c-figure">
    <div class="c-figure__inner">
        <!--
            @int:
            aspect ratio of images 16:9
        -->
        <!--
                todo: lightbox JS
                @int:
                lightbox image: set image max-width to 1280px
            -->
        <a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.">

            <picture>
                <!--[if IE 9]>
                <video style="display: none;"><![endif]-->
                <!--
                    @int:
                    set image max-width to 950px
                -->
                <source media="(min-width: 700px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png">
                <!--
                    @int:
                    set image max-width to 640px
                -->
                <source media="(min-width: 350px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_640x360.png">
                <!--
                    @int:
                    set image max-width to 320px
                -->
                <source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
                <!--[if IE 9]></video><![endif]-->
                <!--
                    @int:
                    set image max-width to 950px
                -->
                <img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" alt="image alt text" title="image title">
            </picture>

            <div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>

        </a>
    </div>

    <figcaption class="c-figure__figcaption u-typo:s">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</figcaption>
</figure>
 
<figure class="c-figure">
    <div class="c-figure__inner">
        <!--
            @int:
            aspect ratio of images 16:9
        -->
        {{#if lightbox}}
            <!--
                todo: lightbox JS
                @int:
                lightbox image: set image max-width to 1280px
            -->
        <a
            href="{{imgL}}"
            class="c-figure__link js-lightbox-trigger"
            title="image title"
            data-description="{{caption}}">
        {{/if}}

        {{#if imageSmall}}
            <picture>
                <!--[if IE 9]>
                <video style="display: none;"><![endif]-->
                <!--
                    @int:
                    set image max-width to 320px
                -->
                <source srcset="{{imgS}}">
                <!--[if IE 9]></video><![endif]-->
                <!--
                    @int:
                    set image max-width to 320px
                -->
                <img
                    src="{{imgS}}"
                    alt="image alt text"
                    title="image title">
            </picture>
        {{else}}
            <picture>
                <!--[if IE 9]>
                <video style="display: none;"><![endif]-->
                <!--
                    @int:
                    set image max-width to 950px
                -->
                <source media="(min-width: 700px)" srcset="{{imgL}}">
                <!--
                    @int:
                    set image max-width to 640px
                -->
                <source media="(min-width: 350px)" srcset="{{imgM}}">
                <!--
                    @int:
                    set image max-width to 320px
                -->
                <source srcset="{{imgS}}">
                <!--[if IE 9]></video><![endif]-->
                <!--
                    @int:
                    set image max-width to 950px
                -->
                <img
                    src="{{imgL}}"
                    alt="image alt text"
                    title="image title">
            </picture>
        {{/if}}

        <div class="c-figure__copyright u-typo:s">{{copyright}}</div>

        {{#if lightbox}}
        </a>
        {{/if}}
    </div>

    {{#if caption }}
        <figcaption class="c-figure__figcaption u-typo:s">{{caption}}</figcaption>
    {{/if }}
</figure>
 
{
  "imgS": "/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png",
  "imgM": "/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_640x360.png",
  "imgL": "/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png",
  "caption": "Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.",
  "copyright": "Copyright © 2018 Freie Grundschule Pfefferwerk",
  "lightbox": true
}

There are no notes for this item.