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

[Johannes C. Laxander]

Hallo Thomas,

erst mal ein dickes Dankeschön für deine Hilfe.
Ich werde deine Lösung mal auprobieren und gebe dir dann wieder Feedback.

Gruß, Johannes.

-----Ursprüngliche Nachricht-----
Von: typo3-german-bounces at lists.typo3.org
[mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Thomas Kieslich
Gesendet: Mittwoch, 5. August 2015 11:28
An: typo3-german at lists.typo3.org
Betreff: Re: [TYPO3-german] Responsive Images - Unterschiedliche Bildbreiten
je Breakpoint

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.
>

_______________________________________________
TYPO3-german mailing list
TYPO3-german at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german