animierte gifs unter Typo3 7.6 / 8.7 / 10.4 mit fluid-styled-content

Animierte gifs

Nachdem es für Typo3 6.2/Typo3 7.6 mit css-styled-content verschiedene Tipps gab, wie man animierte gifs anzeigen kann ("Quality and Type" in "Appearance" auf "none" setzen (diese Option fällt bei fluid-styled-content weg, genauso wie "Effect"), versch. Einstellungen im Install Tool), sollten animierte gifs in Typo3 7.6 mit fluid-styled-content ohne weitere Änderungen anzuzeigen sein. Waren sie aber bei mir zunächst nicht...Bei mir war die Lösung:

Das animierte gif darf nicht größer sein als die Konstante maxW von fluid-styled-content - wenn es größer ist, wird es vom System skaliert und landet im Ordner _processed - dabei geht die Animation kaputt.
Das animierte gif einfach in der passenden Größe (max-width) für den Container zuschneiden, in dem es angezeigt werden soll, und so hochladen. Dann wird es nicht skaliert und von Typo3 aus dem Original-Bildpfad geladen, die Animation bleibt dabei erhalten.
Natürlich sollte man das animierte gif auch nicht unter "Appearance" mit "width" und "height" zuschneiden.

Oktober 2016

Update für Typo3 Version 10 (funktionierte auch nach Upgrade auf Typo3 11.5 weiterhin):

Obige Hinweise gelten nach wie vor; zusätzlich

[GFX][gif_compress] auf false stellen

[GFX][thumbnails_png] auf false stellen

sowie verhindern, dass im <picture> Source-Sets angegeben sind, die immer zu einer Bildprozessierung führen:

1. Neues Layout erstellen in Page Tsconfig:
TCEFORM.tt_content.layout {
## ggf. Eintraege entfernen
removeItems = 1,2,3
addItems {
    100 = irgendwas
}
## layout option image gallery
types {
    textmedia {
      addItems {
        200 = irgendwas anderes
        250 = Gif-Animation
       }
     }

...

2. Änderung im jeweiligen html-Partial von fluidStyledContent abhängig von diesem Layout:

<f:comment>mit Anpassung für gif-Animation </f:comment>
<f:if condition="{data.layout}==200">
    <f:then>
    <f:media class="image-embed-item" file="{file}" width="{dimensions.width}c" height="{dimensions.width}c" alt="{file.alternative}" title="{file.title}" cropVariant="desktop" loading="{settings.media.lazyLoading}"/>
    </f:then>
    <f:else>
        <f:if condition="{data.layout}==250">
        <f:then>
        <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.width}" alt="{file.alternative}" title="{file.title}" cropVariant="desktop" loading="{settings.media.lazyLoading}"/>
        </f:then>
        <f:else>
        <picture>
        <source srcset="{f:uri.image(image: file, width: '{small * usedColPosPercentage / data.imagecols * imagePercentage}', cropVariant: 'smartphone')}" media="(max-width: {settings.imageSizeSmall}px)">
        <source srcset="{f:uri.image(image: file, width: '{medium * usedColPosPercentage / data.imagecols * imagePercentage}', cropVariant: 'tablet')}" media="(max-width: {settings.imageSizeMedium}px)">
        <source srcset="{f:uri.image(image: file, width: '{large * usedColPosPercentage / data.imagecols * imagePercentage}', cropVariant: 'desktop')}">
        <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" alt="{file.alternative}" title="{file.title}" cropVariant="desktop" loading="{settings.media.lazyLoading}"/>
        </picture>
        </f:else>
        </f:if>

    </f:else>
</f:if>

Damit hatte ich wieder ein bewegtes gif.

Oktober 2020