fluid_styled_responsive_images

TYPO3 CMS Erweiterung "fluid_styled_responsive_images".

Dieses Projekt zielt darauf ab, einen Bildwiedergabeprozess bereitzustellen, der Folgendes ermöglicht reaktionsfähige Bilder mit fluid, wo die Annahme getroffen wird, dass TYPO3 CMS bietet keinen Mechanismus aus dem Kasten für fluid-Templates, während ein ist in der Lage, dies mit TypoScript zu tun.

• Installation
• Konfiguration
  • Modus srcset
  • Konfigurationsbeispiel
• Verwendung
• Innenleben
• Erweiterung von fluid_gestylten_reagierenden_Bildern
• Lizenz

Installation

a) Installieren Sie die stabile Version aus dem TYPO3 CMS Extension Repository (TER) über den Extension Manager b) über composer mit der aktuellen stabilen Version installieren und neue stabile Versionen verfolgen: composer erfordern "typo3-ter/fluid-styled-responsive-images ^1.2" und aktivieren die Erweiterung über den Extension Manager / Ihren bevorzugten Mechanismus c) die aktuelle Entwicklungsversion zu verwenden, indem entweder "typo3-ter/fluid-styled-responsive-images" benötigt werden: "dev-master" in Ihrer composer.json Datei, führen Sie das composer Update aus d) klonen Sie die aktuelle Entwicklungsversion in Ihr typo3conf/ext-Verzeichnis (z.B. cd typo3conf/ext && rm -Rf fluid_styled_responsive_images && git clone https://github.com/alexanderschnitzler/fluid-styled-responsive-images.git fluid_styled_responsive_images)

Konfiguration

Die Erweiterung wird über TypoScript konfiguriert, wie die meisten Teile Ihrer Website. Fügen Sie das statische TypoScript der Erweiterung ein und beginnen Sie dann mit der Konfiguration durch Ihr eigenes TypoScript-Setup.

Der ImageRenderer unterstützt derzeit die Spezifikation [srcset](srcset) und rendern als Datenattribute, d.h. individuelles Rendern mit Javascript einfacher.

Minimale, leere Konfiguration:

tt_content.textmedia.settings.responsive_image_rendering {
    layoutKey = srcset

    sourceCollection {
        # Bitte schreiben Sie Ihre eigene sourceCollection-Konfiguration
    }
}

Modus srcset

Ein sourceCollection-Eintrag ist ein TypoScript-Hash. Sie kann die folgenden Indizes enthalten:

Für genauere Beschreibungen schauen Sie sich bitte die html img Elementspezifikation an auf srcset.

Konfigurationsbeispiel

tt_content.textmedia {
    einstellungen {
        responsive_image_rendering {
            layoutKey = srcset

            sourceCollection {
                10 {
                    dataKey = Desktop
                    breite = 1260m
                    srcset = 1260w
                }

                20 {
                    dataKey = Tabelle
                    breite = 960m
                    srcset = 960w
                }

                30 {
                    dataKey = tablet-klein
                    breite = 720m
                    srcset = 720w
                }

                40 {
                    dataKey = Medium
                    breite = 640m
                    srcset = 640w
                }

                50 {
                    dataKey = Medium-Telefon
                    breite = 360m
                    srcset = 360w
                }

                60 {
                    dataKey = klein
                    breite = 320m
                    srcset = 320w
                }
            }
        }
    }
}

Verwendung

Nach der Installation und Konfiguration wird die Ausgabe des <f:media> viewhelper verwendet die Logik, die diese Erweiterung für Bilder liefert, und rendert das Bild.

Innenleben

1. ein benutzerdefinierter Bildrenderer ist registriert
2. wenn die RendererRegistry nach einem Renderer gefragt wird, der für den aktuellen Mimetyp geeignet ist, der Renderer schlägt sich vor, wenn einer der bekannten Bildmimetypen abgeglichen wird
3. der Renderer liest das aktuelle TypoScript und mischt es mit der globalen Erweiterung zusammen konfiguration wie die enableSmallDefaultImage-Einstellung
4. der Renderer berechnet dann die benötigten Größen und gibt ein vorgefertigtes Bild-Tag zurück

Erweiterung von fluid_gestylten_reagierenden_Bildern

Da fluid_styled_content verwendet wird, kann ein Großteil der Ausgabe in TYPO3 CMS angepasst werden.

Beispiel für die Registrierung von benutzerdefinierten Vorlagen und die Anpassung von Bildern in Zusammenarbeit mit der Firma der GalleryProzessor in fluid_styled_content, um ein präzises Rendering zu ermöglichen mit Bootstrap 3 basierte Vorlagen: websightgmbh/ws-texmedia-bootstrap.

Lizenz

GPL-2.0++