Skip to content

Instantly share code, notes, and snippets.

@pengmaradi
Forked from mdbloch/Image.html
Created August 7, 2017 10:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pengmaradi/39c4fc81a2e00c68e345749933de7308 to your computer and use it in GitHub Desktop.
Save pengmaradi/39c4fc81a2e00c68e345749933de7308 to your computer and use it in GitHub Desktop.
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>
</html>
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Lare Desktop
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Free
value = 0.0
}
16:9 {
title = 16:9
value = 1.7777777
}
4:3 {
title = 4:3
value = 1.3333333
}
3:2 {
title = 3:2
value = 1.5
}
1:1 {
title = 1:1
value = 1
}
}
}
desktop {
title = Desktop
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Free
value = 0.0
}
16:9 {
title = 16:9
value = 1.7777777
}
4:3 {
title = 4:3
value = 1.3333333
}
3:2 {
title = 3:2
value = 1.5
}
1:1 {
title = 1:1
value = 1
}
}
}
tablet {
title = Tablet
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Free
value = 0.0
}
16:9 {
title = 16:9
value = 1.7777777
}
4:3 {
title = 4:3
value = 1.3333333
}
3:2 {
title = 3:2
value = 1.5
}
1:1 {
title = 1:1
value = 1
}
}
}
mobile {
title = Mobile
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Free
value = 0.0
}
16:9 {
title = 16:9
value = 1.7777777
}
4:3 {
title = 4:3
value = 1.3333333
}
3:2 {
title = 3:2
value = 1.5
}
1:1 {
title = 1:1
value = 1
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment