81 lines
5.1 KiB
HTML
81 lines
5.1 KiB
HTML
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
|
|
<picture>
|
|
<f:for each="{variants}" key="name" as="variant">
|
|
<f:variable name="breakpoint">{variant.breakpoint as integer}</f:variable>
|
|
<f:variable name="width">{variant.width as integer}</f:variable>
|
|
<f:variable name="height" value="" />
|
|
<f:if condition="{width}">
|
|
<f:if condition="{variant.aspectRatio}">
|
|
<f:variable name="aspectRatio">{variant.aspectRatio as float}</f:variable>
|
|
<f:variable name="height">{width / aspectRatio}</f:variable>
|
|
<f:variable name="height">{height as integer}</f:variable>
|
|
</f:if>
|
|
<f:variable name="mediaQuery">{f:if(condition: breakpoint, then: 'media="(min-width: {breakpoint}px)"')}</f:variable>
|
|
<f:if condition="{variant.sizes}">
|
|
<f:variable name="srcset" value="" />
|
|
<f:for each="{variant.sizes}" key="sizeKey" as="sizeConfig" iteration="iteration">
|
|
<f:variable name="sizeWidth">{sizeConfig.multiplier as float}</f:variable>
|
|
<f:variable name="sizeWidth">{sizeWidth * width}</f:variable>
|
|
<f:variable name="sizeHeight" value="" />
|
|
<f:if condition="{height}">
|
|
<f:then>
|
|
<f:variable name="sizeHeight">{sizeConfig.multiplier as float}</f:variable>
|
|
<f:variable name="sizeHeight">{sizeHeight * height}</f:variable>
|
|
<f:variable name="sizeUrl">{f:uri.image(image: file, cropVariant: name, width: '{sizeWidth}c', height: '{sizeHeight}c',absolute:'true')}</f:variable>
|
|
</f:then>
|
|
<f:else>
|
|
<f:if condition="{maxWidth} < {sizeWidth}">
|
|
<f:then>
|
|
<f:variable name="sizeUrl">{f:uri.image(image: file, cropVariant: 'default', width: maxWidth, absolute:'true')}</f:variable>
|
|
</f:then>
|
|
<f:else>
|
|
<f:variable name="sizeUrl">{f:uri.image(image: file, cropVariant: 'default', width: sizeWidth, absolute:'true')}</f:variable>
|
|
</f:else>
|
|
</f:if>
|
|
</f:else>
|
|
</f:if>
|
|
<f:variable name="srcset">{srcset}{sizeUrl} {sizeKey}{f:if(condition: iteration.isLast, else: ',')}</f:variable>
|
|
</f:for>
|
|
</f:if>
|
|
<source data-variant="{name}" {f:if(condition: sizeHeight, then: 'data-width="{width}" data-height="{sizeHeight}"', else: 'data-maxwidth="{width}"')} {mediaQuery->f:format.raw()} srcset="{srcset}">
|
|
</f:if>
|
|
</f:for>
|
|
<f:variable name="defaultWidth" value="{variants.default.width}" />
|
|
<f:variable name="defaultAspectRatio" value="{variants.default.aspectRatio}" />
|
|
<f:if condition="{defaultAspectRatio}">
|
|
<f:variable name="aspectRatio">{defaultAspectRatio as float}</f:variable>
|
|
<f:variable name="defaultHeight">{defaultWidth / aspectRatio}</f:variable>
|
|
<f:variable name="defaultHeight">{defaultHeight as integer}c</f:variable>
|
|
</f:if>
|
|
|
|
<f:if condition="{defaultHeight}">
|
|
<f:then>
|
|
<f:variable name="src" value="{f:uri.image(image: file, cropVariant: 'default', width: defaultWidth, height: defaultHeight, absolute:'true')}" />
|
|
</f:then>
|
|
<f:else>
|
|
<f:if condition="{maxWidth}">
|
|
<f:then>
|
|
<f:variable name="src" value="{f:uri.image(image: file, cropVariant: 'default', width: maxWidth, absolute:'true')}" />
|
|
</f:then>
|
|
<f:else>
|
|
|
|
<f:variable name="src" value="{f:uri.image(image: file, cropVariant: 'default', width: defaultWidth, absolute:'true')}" />
|
|
</f:else>
|
|
</f:if>
|
|
</f:else>
|
|
</f:if>
|
|
|
|
<f:variable name="finalWidth" value="{bk2k:data.imageInfo(src: src, property: 'width')}" />
|
|
<f:variable name="finalHeight" value="{bk2k:data.imageInfo(src: src, property: 'height')}" />
|
|
|
|
<f:if condition="itemprop">
|
|
<f:then>
|
|
<img loading="lazy" itemprop="image" src="{src}" width="{finalWidth}" height="{finalHeight}" intrinsicsize="{finalWidth}x{finalHeight}" title="{file.properties.title}" alt="{file.properties.alternative}">
|
|
</f:then>
|
|
<f:else>
|
|
<img loading="lazy" src="{src}" width="{finalWidth}" height="{finalHeight}" intrinsicsize="{finalWidth}x{finalHeight}" title="{file.properties.title}" alt="{file.properties.alternative}">
|
|
</f:else>
|
|
</f:if>
|
|
</picture>
|
|
</html>
|