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
