[TYPO3-german] Frage zu Responsive Images in Typo3 8.7.1 LTS
Dr. Dieter Porth
web37p2 at web59550.greatnet-hosting.de
Wed Apr 26 06:54:16 CEST 2017
Hallo Sebastian,
Grundsätzlich stimme ich Christian zu. Nehme Fluid. Es ist
übersichtlicher und besser zu pflegen und zu testen. TypoScript ist nach
meinen Erfahrungen eher hässlich zu warten und zu testen, wenn man nach
Monaten Änderungen vornehmen will.
Ich fand dein Herangehen aber interessant und habe mal in der
Dokumentation
https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#sourcecollection
nachgelesen.
Da steht unter
"sourceCollection.dataKey" der DatenTyp "stdWrap
<https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Stdwrap/Index.html#stdwrap>"
sowie die Erläuterung "Definition of your image size definition
depending on your responsive layout, breakpoints and display density.".
Ich denke, dass dein "sourceCollection.small" dem
"sourceCollection.dataKey" entspricht. Vielleicht kannst du mit einer
Konstruktion wie
sourceCollection.small.stdWrap.cObject = COA
sourceCollection.small.stdWrap.cObject{
...
}
sourceCollection.medium.stdWrap.cObject = COA
sourceCollection.medium.stdWrap.cObject{
...
}
dein gewünschtes Ziel erreichen.
Technisch bleibt dein Weg insgesamt aber trotzdem suboptiomal! Warum,
weil du den Cache unnötig belastest!
Bei deinem Konzept rendert TYPO3 via TypoScript eine Seite vollständig.
Dies heißt, wenn ein Surfer deine Seite das erste Mal aufruft, muss der
Server von TYPO3 nicht nur das HTML deiner Seite sondern auch pro Bild
vier verschiedene Images rendern und speichern, obwohl der Surfer
vermutlich nur ein Image pro Bild braucht.
Schneller und effizienter wäre es im Idealfall vermutlich, wenn TYPO3
nur einen Bild-Link auf der Basis eine existierenen Bildes produzieren
würde. Das Image des Bildes würde TYPO3 über einen effizienten
EID-Mechanismus erst dann generieren, wenn es vom Browser abgerufen
wird. Mit dem Konzept des Rendern on Demand könnte man TYPO3
beschleunigen und vielleicht sogar die Arbeit des Imageenderns auf einen
separaten, spezialisierten Image-Server auslagern. Weitergehend könnte
man sogar die Größen-Entscheidung einem dynamischen JavaScript
überlassen, so dass Webseiten z.B. für Light-Box-Anwendungen,
dynamischer werden.
Es sei aber gesagt, dass auch eine Fluid-Lösung mit Hausmitteln des
aktuellen TYPO3 8.7 suboptimal wäre, weil TYPO3 das oben dargestellte,
suboptimale Konzept vom vollständigen Rendern verfolgt. Über das
Fluid-Konzept wäre eine Trennung von HTML-Rendern und Image-Rendern via
Viewhelper und via eid-Verfahrenrelativ einfach zu trennen.
Mit besten Grüßen
Dieter
Am 25.04.2017 um 10:25 schrieb Wolfertz, Sebastian:
> Hallo Liste,
>
> ich bastel grade an Code der mir ein voll adaptives <picture>-Tag ausgibt. Derzeit sieht die Ausgabe wie folgt aus:
>
> <picture>
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_0aa85320d6.jpg
> 1x" media="(max-width: 320px)" >
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_cfeff4a8e6.jpg
> 2x" media="(max-width: 320px)" >
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_395536288c.jpg
> 1x" media="(max-width: 720px)" >
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_07158a71f8.jpg
> 2x" media="(max-width: 720px)" >
> <img src="https://example.com/fileadmin/user_upload/panel.jpg" width="100%" alt="Testtext" >
> </picture>
>
>
> Die sources sollten aber damit es richtig funktioniert so aussehen:
>
>
> <picture>
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_0aa85320d6.jpg
> 1x,
> https://example.com/fileadmin/_processed_/a/2/csm_panel_cfeff4a8e6.jpg 2x" media="(max-width: 320px)" >
> <source srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_395536288c.jpg
> 1x,
> https://example.com/fileadmin/_processed_/a/2/csm_panel_07158a71f8.jpg 2x" media="(max-width: 720px)" >
> <img src="https://example.com/fileadmin/user_upload/panel.jpg" width="100%" alt="Testtext" >
> </picture>
>
>
>
> Im TS mache ich das über das folgende Objekt das als Teil eines FILES-Objektes läuft:
>
>
> renderObj = IMAGE
> renderObj {
> # WIDTH = 100% FOR UPSCALING AS SOON AS ORIGINAL-IMAGE-SIZE IS PASSED
> params = width="100%"
> file.import.data =file:current:publicUrl
> altText.data =file:current:alternative
> layoutKey = picture
> layout {
> picture {
> element = <picture> ###SOURCECOLLECTION### <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###SELFCLOSINGTAGSLASH###></picture>
> source = <source srcset="###SRC### ###SRCSETCANDIDATE###" media="###MEDIAQUERY###" ###SELFCLOSINGTAGSLASH###>
> }
> }
> sourceCollection {
> small {
> # ALIGN TO BOOTSTRAP BREAK-POINTS
> mediaQuery = (max-width: 320px)
> width = 290
> quality = 70
> # ALIGN TO DEVICE RESOLUTION
> pixelDensity = 1
> srcsetCandidate = 1x
> dataKey = small
> }
> smallRetina {
> mediaQuery = (max-width: 320px)
> width = 290
> quality = 70
> pixelDensity = 2
> srcsetCandidate = 2x
> dataKey = smallRetina
> }
> medium {
> mediaQuery = (max-width: 720px)
> width = 690
> quality = 70
> pixelDensity = 1
> srcsetCandidate = 1x
> dataKey = medium
> }
> mediumRetina {
> mediaQuery = (max-width: 720px)
> width = 690
> quality = 70
> pixelDensity = 2
> srcsetCandidate = 2x
> dataKey = mediumRetina
> }
> }
> }
>
>
> Hat jemand eine Idee wie ich die richtige Ausgabe erreichen kann? Ist das per TypoScript überhaupt möglich oder macht mir die Art und Weise wie das Image-Objekt zusammen gebaut wird da einen Strich durch die Rechnung? Es muß doch möglich sein jeweils mehrere sources zu einem srcset zusammen zu fassen?!
>
> Vielen Dank für die Hilfe,
>
> Sebastian
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>
--
----
Dr. Dieter Porth - Web-Entwickler
More information about the TYPO3-german
mailing list