46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
<f:layout name="Default" />
|
|
|
|
<f:section name="Header" />
|
|
<f:section name="Main">
|
|
<f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
|
|
|
|
<div class="textimage-container image-pos-{data.imageorient}">
|
|
<div class="textimage-image-wrapper">
|
|
<f:if condition="{data.image}">
|
|
<f:then>
|
|
<picture>
|
|
<source
|
|
srcset="
|
|
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
|
|
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default')} 768w,
|
|
{f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default')} 1024w"
|
|
sizes="(max-width: 320px) 90vw,
|
|
(max-width: 768px) 600px,
|
|
600px" />
|
|
<f:image
|
|
image="{data.image.0}"
|
|
treatIdAsReference="1"
|
|
cropVariant="default"
|
|
width="1024c"
|
|
alt="{data.header}"
|
|
class="textimage-image" />
|
|
</picture>
|
|
</f:then>
|
|
<f:else>
|
|
<p>No image available</p>
|
|
</f:else>
|
|
</f:if>
|
|
</div>
|
|
<div class="textimage-wrapper">
|
|
<f:if condition="{data.header}">
|
|
<h2 class="textimage-header">{data.header}</h2>
|
|
</f:if>
|
|
<f:if condition="{data.bodytext}">
|
|
<div class="textimage-text">
|
|
<f:format.html>{data.bodytext}</f:format.html>
|
|
</div>
|
|
</f:if>
|
|
</div>
|
|
</div>
|
|
</f:section>
|