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

Impressum
Datenschutz