ALLES ÜBER fluid_styled_responsive_images UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

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

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üsselbeschreibungbeispiel
breiteDie Zielgröße des erzeugten Bildes. Unterstützt Modifikationen wie m & c1200c (schneidet das Bild auf 1200px zu)
srcseteine Zeichenkette, die die Bedingung beschreibt, unter der das Bild angezeigt wird1200w (1200px Ansichtsfenster)
dataKeyein Name für das generierte Datenattributdesktop
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

  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++

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

Verteilung:FLUID_STYLED_RESPONSIVE_IMAGES ist auf

0.62 % aller TYPO3 installiert.

  • 1 % aller TYPO3 9.5.x Installationen installiert
  • 0.54 % aller TYPO3 8.7.x Installationen installiert
  • 0.79 % aller TYPO3 7.6.x Installationen installiert
  • 25 % aller TYPO3 7.2.x Installationen installiert
  • 0.14 % aller TYPO3 6.2.x Installationen installiert
  • 0.23 % aller TYPO3 6.1.x Installationen installiert
  • 0.6 % aller TYPO3 4.7.x Installationen installiert
  • 0.26 % aller TYPO3 4.6.x Installationen installiert
  • 0.86 % aller TYPO3 4.5.x Installationen installiert
  • 0.87 % aller TYPO3 4.4.x Installationen installiert
  • 2.53 % aller TYPO3 4.3.x Installationen installiert
  • 1.09 % aller TYPO3 4.2.x Installationen installiert
  • 1.72 % aller TYPO3 4.1.x Installationen installiert
  • 0.63 % aller TYPO3 4.0.x Installationen installiert

FLUID_STYLED_RESPONSIVE_IMAGES Version:Verteilung nach installierten Versionen

  • 23.53 % FLUID_STYLED_RESPONSIVE_IMAGES v.8.7.0
  • 58.82 % FLUID_STYLED_RESPONSIVE_IMAGES v.1.2.0
  • 14.71 % FLUID_STYLED_RESPONSIVE_IMAGES v.1.1.0
  • 2.94 % FLUID_STYLED_RESPONSIVE_IMAGES v.1.0.0

PHP Version:FLUID_STYLED_RESPONSIVE_IMAGES wird benutzt mit

  • 1.27 % PHP/7.1
  • 5.06 % PHP/7.0
  • 16.46 % PHP/5.6
  • 8.86 % PHP/5.5
  • 11.39 % PHP/5.4
  • 32.91 % PHP/5.3
  • 24.05 % PHP/5.2

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen FLUID_STYLED_RESPONSIVE_IMAGES zu

  • 16 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 14 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 14 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 57 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen FLUID_STYLED_RESPONSIVE_IMAGES zu

  • 34 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 43 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 12 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 5 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 11 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=37955 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.