Skip to content

Instantly share code, notes, and snippets.

@mdbloch
mdbloch / Image.html
Last active January 27, 2020 12:55
TYPO3 8.7 - Responsive Image
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<picture>
<source srcset="{f:uri.image(image: file, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" media="(min-width: 1200px)">
<source srcset="{f:uri.image(image: file, maxWidth: '992', cropVariant: 'desktop')}, {f:uri.image(image: file, maxWidth: '1984', cropVariant: 'desktop')} 2x" media="(min-width: 992px)">
<source srcset="{f:uri.image(image: file, maxWidth: '768', cropVariant: 'tablet')}, {f:uri.image(image: file, maxWidth: '1536', cropVariant: 'tablet')} 2x" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: file, maxWidth: '768', cropVariant: 'mobile')}, {f:uri.image(image: file, maxWidth: '1536', cropVariant: 'mobile')} 2x" media="(max-width: 767px)">
<!---Fallback--->
<img class="img-responsive" src="{f:uri.image(image: file, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" alt="{image.alternative}" longdesc="{image.description}" title="{image.title}">
</picture>