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

[Thomas Kieslich]

Hallo Johannes
Ja die sind von mir angelegt da ich die Bildergalerien mit dem neat 
Framework formatiere.
http://neat.bourbon.io/
Das Original ist das Typoscript Setup aus dem boostrap package. Dort ist 
es logischerweise für Bootstrap angepasst ;-)

Grüße, Thomas

Am 06.08.15 um 12:27 schrieb Johannes C. Laxander:
> Hallo Thomas,
>
> sind die CSS-Klassen "image-column col-4" von dir angelegt oder sind das
> Bootstrap-Klassen (ich bin in Bootstrap noch nicht so bewandert, habe aber
> in der Doku davon nichts gefunden)?
>
> 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
>