TYPO3 Plugin:

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:

schlüssel	beschreibung	beispiel
breite	Die Zielgröße des erzeugten Bildes. Unterstützt Modifikationen wie `m` & c	1200c (schneidet das Bild auf 1200px zu)
srcset	eine Zeichenkette, die die Bedingung beschreibt, unter der das Bild angezeigt wird	`1200w` (1200px Ansichtsfenster)
dataKey	ein Name für das generierte Datenattribut	`desktop`
größen[optional]	eine Medienanfrage mit benutzerdefinierten Stilen, die angewendet werden sollen	`(min-Breite: 1200px) 1170pxx`

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

ein benutzerdefinierter Bildrenderer ist registriert
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
der Renderer liest das aktuelle TypoScript und mischt es mit der globalen Erweiterung zusammen konfiguration wie die enableSmallDefaultImage-Einstellung
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++

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Helpline: +49 40 609 40 79 40

Verteilung:FLUID_STYLED_RESPONSIVE_IMAGES ist auf

0.64 % aller TYPO3 installiert.

1.11 % aller TYPO3 9.5.x Installationen installiert
0.56 % aller TYPO3 8.7.x Installationen installiert
0.8 % aller TYPO3 7.6.x Installationen installiert
25 % aller TYPO3 7.2.x Installationen installiert
0.15 % aller TYPO3 6.2.x Installationen installiert
0.24 % aller TYPO3 6.1.x Installationen installiert
0.62 % aller TYPO3 4.7.x Installationen installiert
0.27 % aller TYPO3 4.6.x Installationen installiert
0.87 % aller TYPO3 4.5.x Installationen installiert
0.9 % aller TYPO3 4.4.x Installationen installiert
2.59 % aller TYPO3 4.3.x Installationen installiert
1.11 % aller TYPO3 4.2.x Installationen installiert
1.76 % aller TYPO3 4.1.x Installationen installiert
0.65 % aller TYPO3 4.0.x Installationen installiert