Re: [TYPO3-german] Responsive Images - Unterschiedliche Bildbreiten je Breakpoint
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###
noscriptimg
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
[TYPO3-german] Responsive Images - Unterschiedliche Bildbreiten je Breakpoint
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
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###
noscriptimg
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
Re: [TYPO3-german] Responsive Images - Unterschiedliche Bildbreiten je Breakpoint
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###
noscriptimg
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
