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-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Thomas Kieslich Gesendet: Mittwoch, 5. August 2015 11:28 An: typo3-german@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@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
