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-boun...@lists.typo3.org
[mailto:typo3-german-boun...@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@lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>
--
----
Dr. Dieter Porth - Web-Entwickler
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
![https://example.com/fileadmin/user_upload/panel.jpg"](https://example.com/fileadmin/user_upload/panel.jpg"){kind=link}
