customresponsiveimages

Benutzerdefinierte Responsive Images für TYPO3 CMS

Diese Erweiterung bietet eine Reihe von Konfigurationen für ansprechende Bilder in TYPO3 unter Berücksichtigung der Spaltenbreite des Inhalts.

Installation

• Erweiterung installieren
• Aktivieren Sie "enableDefaultConfiguration" in EM, wenn Sie möchten, dass Presets in den Elementen Text mit Bild und Bild automatisch geladen werden. Wenn Sie dies nicht tun, müssen Sie sich selbst darum kümmern, dass Sie den "imageorientierten" Feldern Elemente hinzufügen.
• Fügen Sie die statische TypoScript-Datei hinzu.
• Binden Sie Ressourcen/Public/JavaScript/picturefill.3.0.1.min.js in Ihre Website ein.
• Füge CSS-Stile hinzu. Sie können auch die Datei Less in Resources/Private/Stylesheets verwenden.

Wichtig: Da die reaktionsschnelle Bildnutzung komplex ist und für jede Website angepasst werden muss, ist dies nicht nur eine Plug-and-Play-Erweiterung (und nicht beabsichtigt).

Anpassen

Die Standard-TSconfig liefert Voreinstellungen für viele Kombinationen:

• Bilder in voller Breite über und unter dem Text
• 50%/33%/25%/12,5% Bilder im Text oder neben dem Text
• Galerien mit 2, 3, 4 oder 6 Bildern hintereinander

Sie können über die Seite TSConfig zusätzliche Elemente hinzufügen oder entfernen, siehe tx_customresponsiveimages.items.

Die Ausgabekonfiguration erfolgt in der Datei plugin.tx_customresponsiveimages. Standardmäßig werden 6 Varianten eines Bildes erzeugt:

• Standardvariante für Bildschirmgrößen > 991px
• Mittlere Variante für Bildschirmgrößen > 414px und < 991 px
• Kleine Variante für Bildschirmgrößen < 415px
• Eine hochauflösende Variante für jede dieser Varianten, die Bilder mit der doppelten Größe erzeugt.

Die Größe eines Bildes hängt von der Spalte ab, in der es sich befindet. Daher muss die maximale Größe für jede Spalte und für jede Sammlung festgelegt werden. Achten Sie darauf, dass Sie die maximale Breite für jede Collection und jedes colPos in colPosWidths festlegen. Fehlt diese, fällt sie auf die FallbackWidth (Standard: 1000px) zurück.

Der widthFactorByImageOrient definiert den Faktor, der zum Bestimmen der Breite eines erzeugten Bildes verwendet wird.

Beispiel:

• Die maximale Breite der Spalte beträgt 800 Pixel.
• Die Bildorientierung ist "Im Text 1/4" (Wert: 122).

• Das Bild muss eine Größe von 200 Pixeln haben, da es 1/4 der maximalen Breite abdecken muss. Daher ist der Faktor 0,25.

  plugin.tx_customresponsiveimages { { widthFactorByImageorient { 122 = 0.25 } }

In einigen Fällen können Sie verschiedene Faktoren für verschiedene Sammlungen definieren, z.B. weil Sie möchten, dass ein Bild mit einer Größe von 25% auf einem Desktop als 50%iges Bild auf einem Smartphone angezeigt wird. Während Sie die visuelle Ausgabe durch eine CSS-Medienabfrage anpassen, benötigen Sie auch ein größeres Bild als berechnet

Beispiel:

• Die maximale Breite der Spalte 0 beträgt 800 Pixel auf dem Desktop, 600 Pixel auf mittelgroßen Geräten und 400 Pixel auf Smartphones.
• Die Bildorientierung ist "Im Text 1/4" (Wert: 122).

• Die Standard- und mittlere Version des Bildes sollte 1/4 der Größe der Spalte sein, die kleine Version sollte 1/2 der Größe der Spalte sein.

  plugin.tx_customresponsiveimages { { widthFactorByImageorient { 122 { standard = 0,25

  bei einem kleinen Gerät beträgt die maximale Breite 1/2

          klein = 0,5
  }
  }

  }

Dadurch werden die folgenden Versionen des Bildes erzeugt:

• Standard-/Desktop-Version 800 * 0,25 = 200 Pixel
• Mittlere Version 600 * 0,25 = 150 Pixel
• Smartphone-Version 400 * 0,5 = 200 Pixel
• Seine Netzhautversionen

Galerien

Für Galerien werden Sie höchstwahrscheinlich die Miniaturansichten mit identischen Größen haben. Daher wird standardmäßig eine spezielle Konfiguration (galleryDefault, galleryMiddle, gallerySmall) auf alle Galerie-Presets (imageorient 160, 161, 162, 163) angewendet.

Die Breite der Miniaturansicht wird wie bei normalen Bildern bestimmt. Die Höhe der Miniaturansicht wird durch die Konfiguration von galleryAspectRatio bestimmt. Er ist standardmäßig auf 0,66666666 (2/3) eingestellt. Wenn Sie z.B. quadratische Miniaturansichten wünschen, können Sie diese auf 1 setzen.

Höchstwahrscheinlich werden Sie die Miniaturansichten zuschneiden wollen, anstatt sie zu zerquetschen. Daher können Sie die cropConfiguration für diese Styles festlegen. Wenn Sie also Thubnails für alle Standard-Galerietypen zuschneiden möchten, können Sie einfach den Standard verwenden:

plugin.tx_customresponsiveimages { {
    cropConfiguration {
        160 = c
        161 = c
        162 = c
        163 = c
    }
}

Beispiel:

• Du hast eine Galerie mit 4 Bildern in Folge (imageorient 142) in colPos 0 und die Standardbreite dieser Spalte ist 800px.
• Jedes Galeriebild hat eine Breite von 200px.
• Da das aspectRatio standardmäßig auf 0,6666666 eingestellt ist und die cropConfiguration eingestellt ist, werden Ihre Miniaturansichten beschnitten und haben eine Größe von 200*132 Pixel.

Hinweis:

Wenn das galleryAspectRatio auf 0 gesetzt ist, behalten die Bilder in der Galerie ihre ursprünglichen Proportionen und die cropConfiguration wird ignoriert.

Nachteile

Für eine optimale Bildausgabe erfordert diese Lösung, dass ein colPos nur einmal verwendet wird, auch wenn Sie unterschiedliche Backend-Layouts verwenden.

Beispiel:

• Sie haben ein Backend-Layout "Full width", bei dem colPos 0 mit einer maximalen Größe von 1000 Pixel angezeigt wird. Sie haben ein anderes Backend-Layout "50%/50%", bei dem colPos 0 mit einer maximalen Größe von 500 Pixel angezeigt wird.
• In diesem Fall müssen Sie die maximale Größe für diese Spalte auf 1000 Pixel einstellen. Die Bilder für Ihr Backend-Layout "50%/50%" sind daher unnötig doppelt so groß wie nötig.

Credits

Entwickelt von der visol digitale Dienstleistungen GmbH, www.visol.ch

Verwendet das Tag <picture> für die reaktionsschnelle Bildwiedergabe und die pictureFill-Lösung unter https://github.com/scottjehl/picturefill (Version 3).