<div class="c-text-media c-text-media--above o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image above</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<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>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>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.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at
felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at
felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div>
</div>
<div class="c-text-media c-text-media--{{modifier}} {{spaceAfter}}">
{{#if noHeader}}
<!-- no headline set -->
{{else}}
<h2 class="c-text-media__headline u-typo:xl">{{#if linkedHeadline}}<a href="#">{{/if}}{{title}}{{#if linkedHeadline}}</a>{{/if}}</h2>
{{/if}}
{{#if h3Header}}
<h3 class="c-text-media__headline u-typo:l">{{title}}</h3>
{{/if}}
{{#if h4Header}}
<h4 class="c-text-media__headline u-typo:m">{{title}}</h4>
{{/if}}
<div class="c-text-media__content">
{{#if below}}
<div class="c-text-media__text">
<p>{{textS}}</p>
<p>{{textM}}</p>
<p>{{textL}}</p>
</div>
<div class="c-text-media__image">
{{render '@image--16x9'}}
</div>
{{else}}
<div class="c-text-media__image">
{{#if imageSmall}}
{{render '@image--16x9-small'}}
{{else}}
{{render '@image--16x9'}}
{{/if}}
</div>
<div class="c-text-media__text">
<p>{{textS}}</p>
<p>{{textM}}</p>
<p>{{textL}}</p>
<p>{{textL}}</p>
</div>
{{/if}}
</div>
</div>
{
"spaceAfter": "o-space-b:default",
"textS": "Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.",
"textM": "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.",
"textL": "Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.",
"modifier": "above",
"title": "Text Media: image above"
}
There are no notes for this item.