[TYPO3-german] Responsive Images - Unterschiedliche Bildbreiten je Breakpoint

[Thomas Kieslich]

Hi, Johannes
Ich habe nur eine Lösung die sich am übergeordneten Element orientiert.
Ist noch in Arbeit, funktioniert aber ganz gut. Das ganze respektiert 
auch Retina Auflösungen.
Die Basis war das immer wieder hilfreiche bootstrap_package. (DANKE)

Die JS findest du hier:
http://www.thomaskieslich.de/fileadmin/download/jquery.responsiveimages.js

in Action findest du es hier:
http://www.thomaskieslich.de/fotos/

Kurzfassung:
Die Sourcecollection stellt die Bilder in original + retina und mehreren 
abgestuften Größen.
Das Script schaut nach der Breite des übergeordneten Containers und 
liefert ein Bild in der passenden oder nächst höheren Größe aus. Dabei 
wird auch hidpi beachtet. Das ganze geht auch mit Fluid.
Die Lightbox auf der Seite hat übrigens auch eine hochauflösenden Variante.

Ich hoffe das hilft weiter.
Grüße Thomas

TypoScript:
layout {
                 responsive {
                     element (
                         <img 
src="typo3conf/ext/theme_base/Resources/Public/Images/blank.png" 
class="lazyload" width="###WIDTH###" style="opacity: 0;" 
data-source-width="###WIDTH###" 
###PARAMS######SOURCECOLLECTION######ALTPARAMS######SELFCLOSINGTAGSLASH###>
                         <noscript><img 
src="###SRC###"###ALTPARAMS###/></noscript>
                     )
                     source = data-###DATAKEY###="###SRC###"
                     source.noTrimWrap = ; ;;
                     source.noTrimWrap.splitChar = ;
                 }
             }

sourceCollection {
                 src {
                     dataKey = ###WIDTH###
                 }

                 src-hdpi {
                     pixelDensity = 2
                     dataKey = ###WIDTH###
                 }

                 small {
                     width = 480
                     maxW = 480
                     dataKey = 480
                 }

                 medium {
                     width = 960
                     maxW = 960
                     dataKey = 960
                 }

                 large {
                     width = 1920
                     maxW = 1920
                     dataKey = 1920
                 }
             }

Am 05.08.15 um 10:00 schrieb Johannes C. Laxander:
> Hallo,
>
> unter https://plus.google.com/108439171586570003043/posts/dQwMSq8Sqru habe
> ich von Sven Wappler schon einen Tipp dazu bekommen.
>
> Nun möchte ich aber noch mal in die Runde fragen, wie ihr das mit CSS Styled
> Content Rendering gelöst habt? Gibt es andere Ansätze / Lösungen für mein
> Problem:
>
> Wie kann ich für einen über MediaQuery definierten Breakpoint
> unterschiedliche Bildbreiten definieren, abhängig davon, ob
>
> a) ein Bild die gesamte Breite des Containers einnehmen soll,
> b) zwei Bilder nebeneinander angeordnet werden, oder
> c) ob ein Bild im Textfluß eingebettet ist?
>
> In TypoScript habe ich diese Definition erstellt:
>
> tt_content.image.20.1.sourceCollection.small {
>    width = 150
>    srcsetCandidate = 600w;
>    mediaQuery = (max-width: 360px)
>    dataKey = small
>    maxW = 300px
> }
>
> Für b) passt diese Einstellung. Für a) und c) nicht.
>
> Wer kann mir bitte einen Tipp geben, oder noch besser: die Lösung posten? ;)
>
> Gruß, Johannes.
>