[TYPO3-german] Frage zu Responsive Images in Typo3 8.7.1 LTS
Wolfertz, Sebastian
S.Wolfertz at streit-online.de
Wed Apr 26 13:04:39 CEST 2017
Hallo Christian, Hallo Dieter,
vielen Dank für eure Hilfe!
Ich komme ursprünglich noch aus Version 4 und TemplaVoila und mir war gar nicht klar, dass ich mit Fluid auf die Media-Files des Page-Objektes zugreifen kann.
Mit eurem Hinweis auf Fluid habe ich es jetzt viel einfacher lösen können. Jetzt muss ich nur noch die Liste der Breakpoints und zugehörigen Breiten auslagern und die Sache ist geritzt.
<f:for each="{v:page.resources.fal(field: 'media')}" as="media" iteration="iteration">
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
<picture>
<f:alias map="{sizes: {320: '290', 420: '390', 534: '500', 991: '720', 1199: '940', 1200: '1140'}}">
<f:for each="{sizes}" as="size" key="query" iteration="iter">
<v:variable.set name="retina" value="{v:math.product(a: size, b: 2)}" />
<source srcset="{f:uri.image(src: media.id, treatIdAsReference: 1, maxWidth: size, crop: media.crop)} 1x, {f:uri.image(src: media.id, treatIdAsReference: 1, maxWidth: retina, crop: media.crop)} 2x" media="({f:if(condition: iter.isLast, then: 'min', else: 'max')}-width: {query}px)">
</f:for>
</f:alias>
<f:image src="{media.id}" treatIdAsReference="1" crop="{media.crop}" alt="{media.alternative}" />
</picture>
</div>
</f:for>
Schade dass die VHS View Helper v:uri.image und v:media.image kein crop unterstützen, bzw. die Fluid-Äquivalente kein quality... sonst könnte ich auch noch an der Qualität der Bilder drehen, denn diese entspricht aus irgendeinem Grund nicht den im Install-Tool festgelegten 70%.
Die Cachebelastung hält sich mMn. sehr in Grenzen, ich lasse die Seite regelmäßig Crawlen, so dass Typo3 immer das gesamte HTML und die Bilder bereits gerendert im Cache hat und durch das Picture-Tag läd' der Browser des Besuchers ja immer nur die Datei runter, die er braucht. Mangels dynamischer Inhalte passt mir das so ganz gut.
Wenn die Seite online geht melde ich mich aber gerne mit den Google Pagespeed Insights zurück wenn es jemanden insteressiert.
Vielen lieben Dank nochmal,
Sebastian
-----Ursprüngliche Nachricht-----
Von: typo3-german-bounces at lists.typo3.org [mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Dr. Dieter Porth
Gesendet: Mittwoch, 26. April 2017 06:54
An: German TYPO3 Userlist
Betreff: Re: [TYPO3-german] Frage zu Responsive Images in Typo3 8.7.1 LTS
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_0aa853
> 20d6.jpg
> 1x" media="(max-width: 320px)" >
> <source
> srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_cfeff4
> a8e6.jpg
> 2x" media="(max-width: 320px)" >
> <source
> srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_395536
> 288c.jpg
> 1x" media="(max-width: 720px)" >
> <source
> srcset="https://example.com/fileadmin/_processed_/a/2/csm_panel_07158a
> 71f8.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_0aa853
> 20d6.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_395536
> 288c.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
_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
More information about the TYPO3-german
mailing list