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