Skip to content

Instantly share code, notes, and snippets.

@mdbloch
Last active January 27, 2020 12:55
Show Gist options
  • Save mdbloch/d0c5b2bc93a8eafe0c32ed7c6fed6a2e to your computer and use it in GitHub Desktop.
Save mdbloch/d0c5b2bc93a8eafe0c32ed7c6fed6a2e 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
}
}
}
}
Copy link

ghost commented Jun 27, 2019

There is a problem. Combined with image_zoom, the crop output doesn`t work on mobile devices. It will take the default picture. The images are stored correctly in _prcessed only not output.Disable the image magnification, it works as it should. Is there a workaround solution for this?

@mdbloch
Copy link
Author

mdbloch commented Jul 18, 2019

@Neofine82 Do you have a link where the problem occurs, maybe it helps if i can check the rendered code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment