TYPO3 image CropVariants
Quellen
Die Notizen sind nicht aktuell.
Ich hatte für TYPO3 8.7 LTS die Featurebeschreibungen und Beispiele verlinkt. Ich arbeite inzwischen mit 9.5 LTS. Es dürfte sich nicht viel verändert haben.
Ich habe für 9.5 LTS mit dem Bootstrap Package von Benjamin Kott die image cropVariants in einer eigenen EXT angepasst. Die Notizen dazu werde ich hier hinzufügen.
Aus TCA Reference master:
https://docs.typo3.org/m/typo3/reference-tca/master/en-us/ColumnsConfig/Type/ImageManipulation.html
TYPO3 8.7 Changelog:
Feature: #75880 - Implement multiple cropping variants in image manipulation tool
Weitere Fundstellen:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html
https://techblog.sitegeist.de/responsive-images-with-typo3-8-7/
https://www.clickstorm.de/blog/crop-funktion-fuer-bilder-in-typo3-8-7/
https://typo3worx.eu/2016/02/image-cropping-typo3-backend/
für tx_news
Beispiel CropVariant
# Usage and configuration of image cropping
# Stack Overflow Documentation ist offline, daher hier fürs Archiv
# https://stackoverflow.com/documentation/typo3/9820/image-cropping-typo3-8-7-lts#t=201708071023417277319
#PageTS Settings:
## Default Image cropping ##
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Desktop
selectedRatio = NaN
allowedAspectRatios {
NaN {
title = Free
value = 0.0
}
21:9 {
title = 21:9
value = 2.3333333
}
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
}
21:9 {
title = 21:9
value = 2.3333333
}
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
}
21:9 {
title = 21:9
value = 2.3333333
}
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
}
}
}
}
## Default Image cropping - END ##
Fluid Template Example:
<f:for each="{images}" as="image">
<picture>
<source srcset="{f:uri.image(image: image, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" media="(min-width: 1200px)">
<source srcset="{f:uri.image(image: image, maxWidth: '992', cropVariant: 'default')}, {f:uri.image(image: image, maxWidth: '1984', cropVariant: 'default')} 2x" media="(min-width: 992px)">
<source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'tablet')}, {f:uri.image(image: image, maxWidth: '1536', cropVariant: 'tablet')} 2x" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, maxWidth: '768', cropVariant: 'mobile')}, {f:uri.image(image: image, maxWidth: '1536', cropVariant: 'mobile')} 2x" media="(max-width: 767px)">
<!---Fallback--->
<img class="img-responsive" src="{f:uri.image(image: image, maxWidth: settings.maxImgWidth, cropVariant: 'default')}" alt="{image.alternative}" longdesc="{image.description}" title="{image.title}">
</picture>
</f:for>