Templates überschreiben
Das fluid_styled Template muss als erstes überschrieben werden:
Also, dass die Datei sysext/fluid_styled_content/Resources/Private/Partials/Media/Rendering/Image.html kopieren und im eigenen Extension-Ordner einfügen, also z. B. unter Resources/Private/Extensions/Fluid/Partials/ContentElements/
Das Template sieht dann so aus:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:media class="image-embed-item"
file="{file}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
loading="{settings.media.lazyLoading}"
/>
</html>
Pfad zum neuen Partial anlegen
Entweder über die Konstanten:
styles {
templates {
#layoutRootPath = EXT:responsive_images_demo/Resources/Private/Layouts/ContentElements/
partialRootPath = EXT:responsive_images_demo/Resources/Private/Partials/ContentElements/
#templateRootPath = EXT:responsive_images_demo/Resources/Private/Templates/ContentElements/
}
}
oder im TS:
lib.contentElement {
templateRootPaths {
}
partialRootPaths {
0 = EXT:fluid_styled_content/Resources/Private/Partials/
1 = EXT:extensionName/Resources/Private/Extensions/Fluid/Partials/ContentElements/
}
layoutRootPaths {
}
}
cropVarianten definieren
Entweder über TCEForm:
TCEFORM.sys_file_reference.crop.config.cropVariants {
default {
title = Default
selectedRatio = 1:1
allowedAspectRatios {
1:1 {
title = 1:1
value = 1.0
}
4:3 {
title = 4:3
value = 1.3333333333333333
}
16:9 {
title = 16:9
value = 1.7777777777777777
}
NaN {
title = Frei
value = 0.0
}
}
}
}
oder über eine eigene Datei in Configuration/TCA/Overrides/sys_file_reference.php
Template anpassen
Argument cropVariant hinzufügen:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:media class="image-embed-item"
file="{file}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
loading="{settings.media.lazyLoading}"
cropVariant="default"
/>
</html>
Mehr Infos unter: https://punkt.de/de/blog/2020/responsive-images-in-typo3-v10.html
