Re: [TYPO3-german] Responsive Images
Hallo Björn, > Die Lösung mit dem Media-Queries gefällt mir > am Besten (anstelle der JS-Lösung). Hattest du die auch erprobt? Da geht jetzt was durcheinander glaube ich … die Media Queries brauchst du immer, wenn du CSS für verschiedene Ausgabegrößen/Devices haben willst. Media Queries wirken nur auf CSS (sie sind ja CSS). Damit kannst du dann die Bilder je nach Monitorgröße skalieren aber nicht verkleinern (KB) und auch nicht tauschen. Media Queries sind sozusagen das Allround-Werkzeug, das man immer benötigt. JavaScript brauchst du, wenn du zusätzlich Bilder nachladen willst: entweder responsiv (also die Bilder abhängig von der Devicegröße laden) oder Lazy (Bilder laden, wenn sie in den Focus kommen). Oder beides gleichtzeitig. Beides geht mit CSS bzw. Media Queries nicht, das geht nur mit JavaScript. Adaptive Images braucht auch ein Javascript, allerdings nur ein sehr kurzes, das die Bildschirmgröße abfragt und ein Cookie setzt. Dieses JavaScript muss in den Head, so weit nach oben wie möglich, damit es ausgeführt wird, bevor die Bilder laden. Sprachlich würde ich trennen zwischen: - skalieren (über CSS kleiner machen - das, was du als Browser-Skalierung bezeichnest: Media Queries) - responsiv (Bilder austauschen je nach Device-Größe: Media Queries und JavaScript) - lazy loading (Bilder nachladen, wenn sie im Focus sind: JavaScript) und man kann natürlich alles drei kombinieren: dann werden auf kleinen Devices kleinere Bilder erst dann geladen, wenn sie auf dem Monitor erscheinen und zusätzlich an die Devicegröße angepasst. Adaptive Images wird zusätzlich mit Skalierung kombiniert (Media Queries sind also in allen Versionen ein Muss), oft auch mit Lazy Loading, aber in der Regel nicht mit responsiv. Gruß Peter -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images
Hallo Peter, ist ja witzig, denn die Lösung mit Adaptive-Images hatte ich genau in dem Moment gefunden, als dein Beitrag erschien. Ich werde nun einmal schauen, dass ich das technisch umsetze. Die Lösung mit dem Media-Queries gefällt mir am Besten (anstelle der JS-Lösung). Hattest du die auch erprobt? Derweil nutze ich einmal die Browser-Skalierung. Besser so eine Lösung als keine. Habe ich zwischenzeitlich für die Klasse ".csc-textpic" eingebaut und scheint soweit zu funktionieren. Viele Grüße einstweilen Björn -Ursprüngliche Nachricht- Von: typo3-german-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Peter Linzenkirchner Gesendet: Donnerstag, 28. April 2016 14:16 An: German TYPO3 Userlist Betreff: Re: [TYPO3-german] Responsive Images Hallo Björn, Skalierung durch die Browser ist an sich kein Problem, das wird üblicherweise über das CSS geregelt. (width:100%; height:auto;) - das kannst du also einfach über dein CSS regeln. Unter responsiven Bildern versteht man üblicherweise verschiedene physische Größen (bzw. KB) - und das ist tatsächlich aufwändig. Leider nicht vermeidbar, da das stark von den jeweiligen Layouts abhängt. Wenn du das Introduction Package installierst, ist das mit dabei; zusätzlich ausserdem lazy loading, also das Laden der Bilder wenn sie in den Focus scrollen. Wenn Skalierung reicht, kannst du das alles ignorieren. Dann stellst du einfach im Setup die Bildgröße so ein, dass die Bilder für die größte Darstellung groß genug gerendert werden, und den Rest erledigst du über dein CSS. Wenn du darüber hinaus noch was machen willst, kannst du dir auch das hier anschauen: http://adaptive-images.com/ das funktioniert ganz anders: hier wird über die htaccess-Datei + einem JavaScript abgefragt, mit welchem Device jemand die Seiten aufruft, und dann werden die Bilder abgefangen und entsprechend verkleinert. Das finde ich eine durchaus coole Lösung habe ich schon mehrmals eingesetzt. Nicht so optimierbar wie wirklich responsive Bilder, aber ziemlich einfach zu implementieren. Und sehr einfach kombinierbar mit Lazy Loading. Gruß Peter > Am 28.04.2016 um 13:58 schrieb Björn Hahnefeld <b.hahnef...@nal-vonminden.com>: > > Demnach muss wahnsinnig viel umgestellt und eingestellt werden, was > mich fast ein bisschen überfordert. Ich hatte mir das irgendwie > einfacher vorgestellt. Eine Skalierung durch die Browser hätte mir ja > vorerst auch genügt. > > -Ursprüngliche Nachricht- > Von: typo3-german-boun...@lists.typo3.org > [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Marco > Kuprat > Gesendet: Donnerstag, 28. April 2016 13:47 > An: 'German TYPO3 Userlist' > Betreff: Re: [TYPO3-german] Responsive Images > > Hallo Björn, > >> ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche >> nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 >> 6.2), die Bildelemente responsiv zu gestalten. Auf Extensions möchte >> ich gerne verzichten, soweit dies möglich ist. Hat jemand >> diesbezüglich Erfahrungen (vermutlich schon) und ggf. eine passende >> Anleitung für mich? > > > ich fand diesen Artikel ganz hilfreich: > https://somethingphp.com/responsive-images-typo3/ > > > Viele Grüße > > Marco > > ___ > 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 -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia ___ 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
Re: [TYPO3-german] Responsive Images
Hallo Björn, Skalierung durch die Browser ist an sich kein Problem, das wird üblicherweise über das CSS geregelt. (width:100%; height:auto;) - das kannst du also einfach über dein CSS regeln. Unter responsiven Bildern versteht man üblicherweise verschiedene physische Größen (bzw. KB) - und das ist tatsächlich aufwändig. Leider nicht vermeidbar, da das stark von den jeweiligen Layouts abhängt. Wenn du das Introduction Package installierst, ist das mit dabei; zusätzlich ausserdem lazy loading, also das Laden der Bilder wenn sie in den Focus scrollen. Wenn Skalierung reicht, kannst du das alles ignorieren. Dann stellst du einfach im Setup die Bildgröße so ein, dass die Bilder für die größte Darstellung groß genug gerendert werden, und den Rest erledigst du über dein CSS. Wenn du darüber hinaus noch was machen willst, kannst du dir auch das hier anschauen: http://adaptive-images.com/ das funktioniert ganz anders: hier wird über die htaccess-Datei + einem JavaScript abgefragt, mit welchem Device jemand die Seiten aufruft, und dann werden die Bilder abgefangen und entsprechend verkleinert. Das finde ich eine durchaus coole Lösung … habe ich schon mehrmals eingesetzt. Nicht so optimierbar wie wirklich responsive Bilder, aber ziemlich einfach zu implementieren. Und sehr einfach kombinierbar mit Lazy Loading. Gruß Peter > Am 28.04.2016 um 13:58 schrieb Björn Hahnefeld > <b.hahnef...@nal-vonminden.com>: > > Demnach muss wahnsinnig viel umgestellt und eingestellt werden, was mich > fast ein bisschen überfordert. Ich hatte mir das irgendwie einfacher > vorgestellt. Eine Skalierung durch die Browser hätte mir ja vorerst auch > genügt. > > -Ursprüngliche Nachricht- > Von: typo3-german-boun...@lists.typo3.org > [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Marco Kuprat > Gesendet: Donnerstag, 28. April 2016 13:47 > An: 'German TYPO3 Userlist' > Betreff: Re: [TYPO3-german] Responsive Images > > Hallo Björn, > >> ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche >> nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 >> 6.2), die Bildelemente responsiv zu gestalten. Auf Extensions möchte >> ich gerne verzichten, soweit dies möglich ist. Hat jemand >> diesbezüglich Erfahrungen (vermutlich schon) und ggf. eine passende >> Anleitung für mich? > > > ich fand diesen Artikel ganz hilfreich: > https://somethingphp.com/responsive-images-typo3/ > > > Viele Grüße > > Marco > > ___ > 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 -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images
Demnach muss wahnsinnig viel umgestellt und eingestellt werden, was mich fast ein bisschen überfordert. Ich hatte mir das irgendwie einfacher vorgestellt. Eine Skalierung durch die Browser hätte mir ja vorerst auch genügt. -Ursprüngliche Nachricht- Von: typo3-german-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Marco Kuprat Gesendet: Donnerstag, 28. April 2016 13:47 An: 'German TYPO3 Userlist' Betreff: Re: [TYPO3-german] Responsive Images Hallo Björn, > ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche > nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 > 6.2), die Bildelemente responsiv zu gestalten. Auf Extensions möchte > ich gerne verzichten, soweit dies möglich ist. Hat jemand > diesbezüglich Erfahrungen (vermutlich schon) und ggf. eine passende > Anleitung für mich? ich fand diesen Artikel ganz hilfreich: https://somethingphp.com/responsive-images-typo3/ Viele Grüße Marco ___ 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
Re: [TYPO3-german] Responsive Images
Hallo Björn, > ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche > nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 6.2), > die Bildelemente responsiv zu gestalten. Auf Extensions möchte ich > gerne verzichten, soweit dies möglich ist. Hat jemand diesbezüglich > Erfahrungen (vermutlich schon) und ggf. eine passende Anleitung für > mich? ich fand diesen Artikel ganz hilfreich: https://somethingphp.com/responsive-images-typo3/ Viele Grüße Marco ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images
Hallo Stefan, den Artikel "http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/; hatte ich auch schon über Google gefunden und abgearbeitet. Allerdings treten bei mir keine Veränderungen ein und ich habe den Eindruck, dass alles nicht so bei mir funktioniert, wie es laut Anleitung sein sollte :(! Viele Grüße Björn -Ursprüngliche Nachricht- Von: typo3-german-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Stefan Padberg Gesendet: Donnerstag, 28. April 2016 13:18 An: typo3-german@lists.typo3.org Betreff: Re: [TYPO3-german] Responsive Images Am 28.04.2016 um 13:11 schrieb Björn Hahnefeld: > Hallo zusammen, > > ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche > nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 > 6.2), die Bildelemente responsiv zu gestalten. Auf Extensions möchte > ich gerne verzichten, soweit dies möglich ist. Hat jemand > diesbezüglich Erfahrungen (vermutlich schon) und ggf. eine passende Anleitung > für mich? Hallo Björn, der Artikel stammt zwar schon aus dem Jahre 2014, aber er gibt die grundsätzlichen Sachen gut wieder. http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/ Hier ein Blog-Beitrag aus dem Jahre 2015: https://somethingphp.com/responsive-images-typo3/ Hier eine TYPO3 News aus dem Jahre 2013: https://typo3.org/news/article/responsive-image-rendering-in-typo3-cms-62/ Das sind alles gute Ausgangspunkte. Gruß Stefan -- Bergische Webschmiede Dipl.-Ing. Stefan Padberg TYPO3-Integrator und Webprogrammierer :: Borner Str. 18 - 42349 Wuppertal :: +49 202 97648355 :: +49 173 9219845 :: p...@bergische-webschmiede.de :: http://www.bergische-webschmiede.de ___ 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
Re: [TYPO3-german] Responsive Images
Am 28.04.2016 um 13:11 schrieb Björn Hahnefeld: > Hallo zusammen, > > ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche nach > einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 6.2), die > Bildelemente responsiv zu gestalten. Auf Extensions möchte ich gerne > verzichten, soweit dies möglich ist. Hat jemand diesbezüglich Erfahrungen > (vermutlich schon) und ggf. eine passende Anleitung für mich? Hallo Björn, der Artikel stammt zwar schon aus dem Jahre 2014, aber er gibt die grundsätzlichen Sachen gut wieder. http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/ Hier ein Blog-Beitrag aus dem Jahre 2015: https://somethingphp.com/responsive-images-typo3/ Hier eine TYPO3 News aus dem Jahre 2013: https://typo3.org/news/article/responsive-image-rendering-in-typo3-cms-62/ Das sind alles gute Ausgangspunkte. Gruß Stefan -- Bergische Webschmiede Dipl.-Ing. Stefan Padberg TYPO3-Integrator und Webprogrammierer :: Borner Str. 18 - 42349 Wuppertal :: +49 202 97648355 :: +49 173 9219845 :: p...@bergische-webschmiede.de :: http://www.bergische-webschmiede.de ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
[TYPO3-german] Responsive Images
Hallo zusammen, ich habe mich ein bisschen bei Google umgesehen und bin auf der Suche nach einer einfachen Lösung (gerne auch mit Bordmitteln von TYPO3 6.2), die Bildelemente responsiv zu gestalten. Auf Extensions möchte ich gerne verzichten, soweit dies möglich ist. Hat jemand diesbezüglich Erfahrungen (vermutlich schon) und ggf. eine passende Anleitung für mich? Viele Grüße Björn ___ 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,
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
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Ok, danke, werde das nach meiner Neuinstallation gleich so umsetzen. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 09:44 schrieb Manuel Bachl: Huhu, [...] Wenn ich meine Seite nun neu lade, bekomme ich gar kein Bild mehr angezeigt. Der Quelltext meines Bildes ist nach dem Rendern der Seite folgender: img alt=Dummybild src=uploads/pics/dummy.jpg width=2000 height=1312 der Bildpfad ist relativ! wenn du ohne realurl(o.ä.) unterwegs bist sollte das funktionieren, ansonsten ist mindestens ein config.baseURL, besser aber ein config.absRefPrefix anzugeben bernd -- http://www.pi-phi.de/cheatsheet.html ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Mein RealURL TS:
config {
# RealURL
prefixLocalAnchors = all
simulateStaticDocuments = 0
baseURL = https://www.domain.de/
tx_realurl_enable = 1
# Allgemeines
noPageTitle = 2
extTarget = _blank
disablePrefixComment = 1
} # config end
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
[TYPO3-german] Responsive Images srcset funktioniert nicht
Huhu,
ich versuche gerade die Respinsive Images-Variante scrset zum Laufen zu
bekommen (das Picture-Tag wäre mir grundsätzlich lieber aber hier klappt noch
weniger).
In den Konstanten ist img-tag with alternate sources as srcset-attribute
ausgewählt.
Ich habe folgendes TS:
tt_content {
image {
20.maxW = 200
20.1 {
sourceCollection
sourceCollection {
small {
width = 200
srcsetCandidate = 319w
mediaQuery = (max-width: 319px)
dataKey = small
}
phone {
width = 400
maxW = 400
srcsetCandidate = 599w
mediaQuery = (max-width: 599)
dataKey = phone
}
tablet {
width = 660
maxW = 660
srcsetCandidate =
mediaQuery =
dataKey = tablet
}
tabletRetina {
pixelDensity = 2
width = 1220
maxW = 1220
srcsetCandidate = 2x
mediaQuery =
dataKey = tabletRetina
}
}
Layout.srcset {
element = img xsrc=###SRC###
srcset=###SOURCECOLLECTION##PARAMS##ALTPARAMS##SELFCLOSINGTAGSLASH###
source = |*|###SRC###
###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
}
}
}
Die JavaScript-Datei (https://github.com/filamentgroup/Responsive-Images) habe
ich korrekt eingebunden (Quelltext-Check)
Wenn ich meine Seite nun neu lade, bekomme ich gar kein Bild mehr angezeigt.
Der Quelltext meines Bildes ist nach dem Rendern der Seite folgender:
img alt=Dummybild src=uploads/pics/dummy.jpg width=2000 height=1312
Obwohl die src vorhanden ist wird mir nur das typische Bild nicht gefunden
angezeigt.
Muss ich noch etwas tun um das zum Laufen zu bekommen? Und wenn ja, was genau?
Ich habe mich übrigens an folgendes Tutorial gehalten:
http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/
Meine Typo3-Version ist 6.2.10
Würde mich freuen wenn mir jemand helfen kann - gerna auch darüber wenn mir
jemand hilft die Picture-Variante zum Laufen zu bekommen.
Grüße
Manuel
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Habe den Tipp mit absRefPrefix versucht - selbes Phänomen. Ich habe jetzt mal alle Zeilen im TS auskommentiert und das Rendering wieder auf default eingestellt. Auch das JS habe ich entfernt. Ich bekomme keine Bilder mehr. Selbst wenn ich die Bilder (per FTP im entsprechenden Pfad existent) direkt im Browser aufrufe kommet ein Typo3-Error: Page Not Found Reason: File dummy.jpg was not found (2)! Wie gesagt per FTP sehe ich die bilder an den richtigen Stellen. Caches leeren hilft auch nicht weiter ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Hallo Manuel, dann stimmen die Rechte nicht. Gruß Perte Am 05.03.2015 um 10:22 schrieb Manuel Bachl m...@sinn-zweck.de: Habe den Tipp mit absRefPrefix versucht - selbes Phänomen. Ich habe jetzt mal alle Zeilen im TS auskommentiert und das Rendering wieder auf default eingestellt. Auch das JS habe ich entfernt. Ich bekomme keine Bilder mehr. Selbst wenn ich die Bilder (per FTP im entsprechenden Pfad existent) direkt im Browser aufrufe kommet ein Typo3-Error: Page Not Found Reason: File dummy.jpg was not found (2)! Wie gesagt per FTP sehe ich die bilder an den richtigen Stellen. Caches leeren hilft auch nicht weiter ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german -- Xing: http://www.xing.com/profile/Peter_Linzenkirchner Web: http://www.typo3-lisardo.de Facebook: http://tinyurl.com/lisardo-multimedia ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 16:03 schrieb Manuel Bachl:
Ein Default-Objekt habe ich nicht überschrieben. Das scheine ich wohl
tun zu müssen ;-)
Ist es relevant, dass die Bilder nicht aus einem Standard CE kommen,
sondern aus einem eigenen DCE?
da bin ich dann draußen. mit DCE kenn ich mich nicht so aus.
ich bin von std-CEs ausgegangen, die irgendwo unter
tt_content.image... bzw tt_content.textpic... konfiguriert werden. Da
muss man natürlich die richtige Stelle finden wenn man etwas
redefinieren will
Meine Ausgabe läuft hierüber:
SEITENINHALT = CONTENT
SEITENINHALT {
table = tt_content
select {
orderBy = sorting
languageField = sys_language_uid
where = colPos=1
}
} # SEITENINHALT
Die DCE Templates sind ja FLUID...
heutzutage kann man in TYPO3 wunderbar Marker-Templates, Fluid-templates
und naktes Typoscript beliebig ineinander schachteln.
bernd
--
http://www.pi-phi.de/cheatsheet.html
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
hmm. ok, dann werde ich mal schauen ob ich herrn Achim Vieweg (DCE-Entwickler) mal irgendwo im Netz auftreibe und ihn direkt ansprechen, ob er hier Erfahrungen hat. Um eine Neuinstallation heute Abend werde ich aber auf die Schnelle nicht drumherum kommen. Dann ist wenigstens das System wieder sauber... Vielen Dank dennoch für die Hilfestellungen und die Denkanstöße. Wenn ich eine Lösung habe, werde ich sie hier natürlich sehr gerne einstellen. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Hi Manuel Bachl, Manuel Bachl wrote: absRefPrefix = https://www.example.com/ baseURL = https://www.example.com/ Beides geht nicht. baseURL ist überflüssig und sollte nicht verwendet werden. Falls deine Domain im Webroot liegt, dann sollte page.config.absRefPrefix = / reichen. Grüße -- Philipp Gampe – PGP-Key 0AD96065 – TYPO3 UG Bonn/Köln Documentation – Active contributor TYPO3 CMS TYPO3 inspiring people to share! ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Muss ich die entsprechenden Javascript-Funktionen eigentlich manuell bei DOM-ready aufrufen? oder machen die das von alleine? ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Entschuldigt das gespamme hier, aber es tauchen ständig neue Fragen auf...
Wenn mein HTML-Output nach wie vor ein normales img ausgibt, obwohl ich es ja
eigentlich überschrieben habe, dann stimmt doch schon im TS etwas nicht?
mein code der nicht anzukommen schein:
Layout.srcset {
element = img xsrc=###SRC###
srcset=###SOURCECOLLECTION##PARAMS##ALTPARAMS##SELFCLOSINGTAGSLASH###
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC### ###SRCSETCANDIDATE###
}
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Welche Rechte genau braucht dieses Feature denn? Hab diverse Tutorials gesehen, aber keines hat davon etwas erwähnt :-( Wenn ich weiss, welche rechte ich setzen muss mache ich das natürlich ;-) Aber schon einmal danke für die Hinweise ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 10:40 schrieb Manuel Bachl: Welche Rechte genau braucht dieses Feature denn? Hab diverse Tutorials gesehen, aber keines hat davon etwas erwähnt :-( Wenn ich weiss, welche rechte ich setzen muss mache ich das natürlich ;-) Aber schon einmal danke für die Hinweise das dürften die Zugriffsrechte auf dem Server sein. FTP-User ist selten mit dem Apache-user kompatibel. Das anschließend per FTP wieder gerade zu bügeln ist umständlich und man vergisst es oft genug. per SSH geht das dann meist einfacher: im Webroot mal folgendes ausführen: chown -R www-data:www-data * (sofern dein Apache-user der übliche www-data ist) entweder muss der apache-user darauf zugreifen um die Bilder umzurechnen, oder sie direkt an den Besucher auszuliefern. Wenn der Zugriff nicht funktioniert gibt es kein Bild auf der Seite. bernd -- http://www.pi-phi.de/cheatsheet.html ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Meine Seite ist bei all-inkl gehostet. Hier habe ich per ssh keinen Zugriff auf chown. Ich habe die Besitzerrechte nun im Webftp von All-inkl geändert (zur Auswahl standen der FTP-User und der PHP-User). Ich habe den PHP-User gewähl, und sehe in puty nun auch die Rechte als www-data:www-data. Also das hat schonmal funktioniert... nur habe ich nun überhaupt keinen Zugriff mehr auf die Seite. Ich bekomme die Seite Forbidden You don't have permission to access / on this server. wenn ich die Rechte zurück ändere habe ich wieder Zugriff aber keine Bilder...kann es sein, dass ich nur speziellen Ordnern www-data zuweisen sollte? ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Ich habe gerade festgestellt, dass auch Bilder die per css als background eingebunden sind - also nicht in einem img-Tag - verschwunden sind. Wahrscheinlich ist es wie so oft bei Typo3 dass das Problem wo ganz anders liegt :-( ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 11:49 schrieb Manuel Bachl: Meine Seite ist bei all-inkl gehostet. Hier habe ich per ssh keinen Zugriff auf chown. Ich habe die Besitzerrechte nun im Webftp von All-inkl geändert (zur Auswahl standen der FTP-User und der PHP-User). Ich habe den PHP-User gewähl, und sehe in puty nun auch die Rechte als www-data:www-data. Also das hat schonmal funktioniert... nur habe ich nun überhaupt keinen Zugriff mehr auf die Seite. Ich bekomme die Seite Forbidden You don't have permission to access / on this server. wenn ich die Rechte zurück ändere habe ich wieder Zugriff aber keine Bilder...kann es sein, dass ich nur speziellen Ordnern www-data zuweisen sollte? das klingt erstmal so als ob die Rechte von FTP- und Apache-/PHP-user sich nicht vertragen. das lässt auf eine $%-Konfiguration schließen. alternativ zu den Ownern könnte man natürlich auch die Rechte der Dateien und Folder für Gruppen und everyone erweitern. Allerdings ist es nur bedingt sinnvoll/sicher überall mit 666 bzw. 777 zu hantieren. Alternativ machst du alle Dateimanipulationen inkl. upload über das TYPO3-BE. dann sollten Dateien auch nach dem Upload zu lesen sein. bernd -- http://www.pi-phi.de/cheatsheet.html ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 12:58 schrieb Manuel Bachl:
Entschuldigt das gespamme hier, aber es tauchen ständig neue Fragen auf...
vielleicht wären eigenen Threads übersichtlicher?
ich fand es jetzt nicht sonderlich hilfreich auf alle deine Postings in
einem Beitrag zu antworten: daher gibt es jetzt een deutliche
Verzweigung im Thread.
Wenn mein HTML-Output nach wie vor ein normales img ausgibt, obwohl ich
es ja eigentlich überschrieben habe, dann stimmt doch schon im TS etwas
nicht?
mein code der nicht anzukommen schein:
Layout.srcset {
element = img xsrc=###SRC###
srcset=###SOURCECOLLECTION##PARAMS##ALTPARAMS##SELFCLOSINGTAGSLASH###
source = |*|###SRC### ###SRCSETCANDIDATE###,|*|###SRC###
###SRCSETCANDIDATE###
}
das bewirkt ja erstmal noch keinerlei Ausgabe.
Layout ist kein TYPO3-Object.
wo und wie verwendest du es?
wo und wie hast du das default-Object überschrieben?
bernd
--
http://www.pi-phi.de/cheatsheet.html
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 11:56 schrieb Manuel Bachl: Ich habe gerade festgestellt, dass auch Bilder die per css als background eingebunden sind - also nicht in einem img-Tag - verschwunden sind. Wahrscheinlich ist es wie so oft bei Typo3 dass das Problem wo ganz anders liegt :-( das könnte eher an falschen (relativen) Pfaden liegen, die bei Benutzung von realurl sehr schnell auftreten können. Benutze baseURL oder absRefPrefix und bei CSS-bildern immer absolute Pfade eintragen. bernd -- http://www.pi-phi.de/cheatsheet.html ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Am 05.03.15 um 12:51 schrieb Manuel Bachl: Muss ich die entsprechenden Javascript-Funktionen eigentlich manuell bei DOM-ready aufrufen? oder machen die das von alleine? welche Javascript Funktionen? das komt sicherlich auf deine Bibliotheken an und wie sie realisiert sind. bernd -- http://www.pi-phi.de/cheatsheet.html ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Hmm... Ok, wenn ich alles übers BE mache, muss ich dann dennoch etwas ändern? Denn die Bilder wurden ja über das BE hochgeladen (ausser die im CSS). Komischerweise hat auch alles funktioniert, bis zu dem Moment in dem ich das Responsive-Zeug eingeschaltet habe. Ab da ging gar nichts mehr. Da ich zum Glück noch ganz am Anfang der Entwicklung stehe werde ich wohl oder übel meine Daten sichern und Typo3 komplett neu aufsetzen. In der Hoffnung, dass damit wenigstens dieser Bug behoben ist... Und an die Responsive Geschichte mach ich mich nochmal, wenn ich entweder ne bessere Dokumentation gefunden habe oder ich mal mit All-inkl gesprochen habe bzg. der FTP-/PHP-User... Das muss doch wohl möglich sein :-/ Das mit dem JavaScript war eigentlich eine unsinnige Frage... Hat sich erledigt - hätte nur mal die Codes anschauen müssen :-D Ich hab das Gefühl, dass ich mir irgendwie meine Installation zerschossen habe (vermutlich durch adaptive-images.php - hier musste ich nämlich für einen (längst nicht mehr existenten Ordner) die Rechte ändern. Wahrscheinlich hab ich da irgendwo mist gebaut (was für mist man auch bauen kann, wenn man einem Ordner in CuteFTP Rechte vergibt...) Falls noch jemand eine Idee hat, gerne her damit bis hierher erst einmal vielen Herzlichen Dank ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Fand es ein wenig zu dick aufgetragen alles in einzelne Threads zu splitten, da ja an sich alles mit einer Kernfrage zu tun hat. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Quote: Bernd Wilke[2] wrote on Thu, 05 March 2015 15:44
das bewirkt ja erstmal noch keinerlei Ausgabe.
Layout ist kein TYPO3-Object.
wo und wie verwendest du es?
wo und wie hast du das default-Object überschrieben?
bernd
--
http://www.pi-phi.de/cheatsheet.html
Hier mal mein komplettes TS im Root-Template:
Constants:
styles.content.imgtext.layoutKey = srcset
styles.content.imgtext.linkWrap.width = 800
Setup:
config {
# RealURL
prefixLocalAnchors = all
simulateStaticDocuments = 0
absRefPrefix = https://www.example.com/
baseURL = https://www.example.com/
tx_realurl_enable = 1
# Allgemeines
noPageTitle = 2
extTarget = _blank
disablePrefixComment = 1
} # config end
TCAdefaults.tt_content.section_frame=66
tt_content {
stdWrap.innerWrap
}
tt_content.image.20.maxW = 200
tt_content.image.20.1.sourceCollection {
small {
width = 200
srcsetCandidate = 319w
mediaQuery = (max-width: 319px)
dataKey = small
}
phone {
width = 400
maxW = 400
srcsetCandidate = 599w
mediaQuery = (max-width: 599)
dataKey = phone
}
tablet {
width = 660
maxW = 660
srcsetCandidate =
mediaQuery =
dataKey = tablet
}
tabletRetina {
pixelDensity = 2
width = 1220
maxW = 1220
srcsetCandidate = 2x
mediaQuery =
dataKey = tabletRetina
}
}
..
..
..
..
Aktuell eingebunden ist die srcset.min.js von srcset.min.js
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images srcset funktioniert nicht
Quote: Bernd Wilke[2] wrote on Thu, 05 March 2015 15:44
wo und wie verwendest du es?
wo und wie hast du das default-Object überschrieben?
bernd
--
http://www.pi-phi.de/cheatsheet.html
Ein Default-Objekt habe ich nicht überschrieben. Das scheine ich wohl tun zu
müssen ;-)
Ist es relevant, dass die Bilder nicht aus einem Standard CE kommen, sondern
aus einem eigenen DCE?
Meine Ausgabe läuft hierüber:
SEITENINHALT = CONTENT
SEITENINHALT {
table = tt_content
select {
orderBy = sorting
languageField = sys_language_uid
where = colPos=1
}
} # SEITENINHALT
Die DCE Templates sind ja FLUID...
___
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
[TYPO3-german] Responsive images
Hallo Liste, ich habe mal eine Frage zum Thema responsive images: Ich möchte gern, dass die Contentbilder in der Größe gespeichert werden, wie im Konstanten-Editor vordefiniert. Es soll also, wenn ein Bild als Content-Element eingefügt wird, immer diese Originalgröße verwendet werden. Wenn das Bild über die Bildeinstellungen (Reiter Erscheinungsbild) eine geringere Breite zugewiesen bekommt, soll es nur skaliert eingefügt werden und nicht als neu-gerendertes Bild mit der neuen Größe. Es soll dann in der mobilen Ansicht über css die Breite 100% bekommen, also hier immer über den Text stehen, egal was in der Bildausrichtung gewählt wurde. Gibt es eine Möglichkeit, dieses zu ändern? Oder ist das generell nicht empfehlenswert? Was wäre eine Alternative? Danke viele Grüße Stefan ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images - Welche Rendering Methode?
Hallo Jost, danke für deine Tipps, die haben mir weitergeholfen. Ich hab nach ein wenig googlen noch dies hier gefunden: http://typo3blogger.de/responsive-images-typo3-6-2/ Nach diesem Beispiel habe ich es mal für mich unter TYPO3 6.2 getestet, und es funktioniert: http://demo62.jochla.de/content-examples/responsive-images.html. Ich denke das ist auch das was du machst. Jetzt geht es eigentlich nur noch darum, die richtigen breakpoints zu finden ;) Gruß, Johannes. Jost Baron Gesendet: Freitag, 7. November 2014 14:23 An: typo3-german@lists.typo3.org Betreff: Re: [TYPO3-german] Responsive Images - Welche Rendering Methode? -BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi Johannes, Für alte Browser gibt es meines Wissens nach keine Lösung ohne JS, ausser über generierte Styles mit Mediaqueries (d.h. inline-styles gehen nicht, da dort keine Mediaqueries erlaubt sind). Egal welche Methode du nutzt für responsive Bilder, du brauchst immer einen JavaScript-Polyfill, damit das in allen momentan modernen Browsern funktioniert (wenn du nicht irgendwelches User-Agent-Sniffing machen willst). Ich weiß nicht, ob die vordefinierten Render-Methoden einen Polyfill mitliefern, würde aber vermuten, dass das nicht der Fall ist, denn die Polyfills gehen öfter mal nach Updates kaputt, vor allem im Chrome. Nutzen tue ich momentan folgendes: Für Bilder im Inhalt: picture mit srcset-Attributen (ausschließlich für die device-pixel-ratio) in den source-Tags. Für Bilder, die im Hintergrund über die ganze Bildschirmbreite gehen: img mit z.B. sizes=100vw und srcset für device-pixel-ratio und Breite. Gruß Jost On 11/07/2014 01:53 PM, JCL - Johannes C. Laxander wrote: Hallo, picture uns srcset-Attribute sind ja auch zwei Modi die in TYPO3 6.2 implementiert sind. Frage: welches ist die bessere Lösung? picturefill macht ja letztendlich nichts anderes, oder? Der Vorteil dabei, responsive Images sind aufgrund der jQuery Funktionen auch mit älteren Browsern möglich. Nachteil: es wird JavaScript benötigt. Für mobile Geräte ist sicher die rein CSS basierte Variante besser!? Was ist Eure Meinung dazu? Johannes. Jost Baron Gesendet: Donnerstag, 6. November 2014 18:06 Hi Johannes, ich nutze immer das hier: https://github.com/scottjehl/picturefill Das ist glaube ich mit keinem der eingebauten TYPO3-Modi 100%'ig kompatibel (dort gibt es sowohl picture als auch srcset-Attribute). Allerdings ist das aller Wahrscheinlichkeit nach sehr nah an kommenden Browserimplementationen und Standards dran, der Chrome hat meines Wissens schon eine teilweise Implementierung davon. Gruß Jost On 11/06/2014 05:20 PM, JCL - Johannes C. Laxander wrote: Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? Gruß, Johannes. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german -BEGIN PGP SIGNATURE- Version: GnuPG v1 iEYEARECAAYFAlRcx6EACgkQNme/yCvmvTLBfACfaDwGJ2DQfB0SOEGZg78aNFrT mlAAnjrpgeY7lhwUeGBY/FsZCi3A9ehm =siXb -END PGP SIGNATURE- ___ 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
Re: [TYPO3-german] Responsive Images - Welche Rendering Methode?
Hallo, picture uns srcset-Attribute sind ja auch zwei Modi die in TYPO3 6.2 implementiert sind. Frage: welches ist die bessere Lösung? picturefill macht ja letztendlich nichts anderes, oder? Der Vorteil dabei, responsive Images sind aufgrund der jQuery Funktionen auch mit älteren Browsern möglich. Nachteil: es wird JavaScript benötigt. Für mobile Geräte ist sicher die rein CSS basierte Variante besser!? Was ist Eure Meinung dazu? Johannes. Jost Baron Gesendet: Donnerstag, 6. November 2014 18:06 -BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi Johannes, ich nutze immer das hier: https://github.com/scottjehl/picturefill Das ist glaube ich mit keinem der eingebauten TYPO3-Modi 100%'ig kompatibel (dort gibt es sowohl picture als auch srcset-Attribute). Allerdings ist das aller Wahrscheinlichkeit nach sehr nah an kommenden Browserimplementationen und Standards dran, der Chrome hat meines Wissens schon eine teilweise Implementierung davon. Gruß Jost On 11/06/2014 05:20 PM, JCL - Johannes C. Laxander wrote: Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? Gruß, Johannes. -BEGIN PGP SIGNATURE- Version: GnuPG v1 iEYEARECAAYFAlRbqn8ACgkQNme/yCvmvTJTlwCfdZbhLQMzkBP3otESF9V7Mddg ID0AnRGOsEuvor8iVsA+cVfFA1u3r/g7 =FGpO -END PGP SIGNATURE- ___ 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
Re: [TYPO3-german] Responsive Images - Welche Rendering Methode?
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi Johannes, Für alte Browser gibt es meines Wissens nach keine Lösung ohne JS, ausser über generierte Styles mit Mediaqueries (d.h. inline-styles gehen nicht, da dort keine Mediaqueries erlaubt sind). Egal welche Methode du nutzt für responsive Bilder, du brauchst immer einen JavaScript-Polyfill, damit das in allen momentan modernen Browsern funktioniert (wenn du nicht irgendwelches User-Agent-Sniffing machen willst). Ich weiß nicht, ob die vordefinierten Render-Methoden einen Polyfill mitliefern, würde aber vermuten, dass das nicht der Fall ist, denn die Polyfills gehen öfter mal nach Updates kaputt, vor allem im Chrome. Nutzen tue ich momentan folgendes: Für Bilder im Inhalt: picture mit srcset-Attributen (ausschließlich für die device-pixel-ratio) in den source-Tags. Für Bilder, die im Hintergrund über die ganze Bildschirmbreite gehen: img mit z.B. sizes=100vw und srcset für device-pixel-ratio und Breite. Gruß Jost On 11/07/2014 01:53 PM, JCL - Johannes C. Laxander wrote: Hallo, picture uns srcset-Attribute sind ja auch zwei Modi die in TYPO3 6.2 implementiert sind. Frage: welches ist die bessere Lösung? picturefill macht ja letztendlich nichts anderes, oder? Der Vorteil dabei, responsive Images sind aufgrund der jQuery Funktionen auch mit älteren Browsern möglich. Nachteil: es wird JavaScript benötigt. Für mobile Geräte ist sicher die rein CSS basierte Variante besser!? Was ist Eure Meinung dazu? Johannes. Jost Baron Gesendet: Donnerstag, 6. November 2014 18:06 Hi Johannes, ich nutze immer das hier: https://github.com/scottjehl/picturefill Das ist glaube ich mit keinem der eingebauten TYPO3-Modi 100%'ig kompatibel (dort gibt es sowohl picture als auch srcset-Attribute). Allerdings ist das aller Wahrscheinlichkeit nach sehr nah an kommenden Browserimplementationen und Standards dran, der Chrome hat meines Wissens schon eine teilweise Implementierung davon. Gruß Jost On 11/06/2014 05:20 PM, JCL - Johannes C. Laxander wrote: Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? Gruß, Johannes. ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german -BEGIN PGP SIGNATURE- Version: GnuPG v1 iEYEARECAAYFAlRcx6EACgkQNme/yCvmvTLBfACfaDwGJ2DQfB0SOEGZg78aNFrT mlAAnjrpgeY7lhwUeGBY/FsZCi3A9ehm =siXb -END PGP SIGNATURE- ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
[TYPO3-german] Responsive Images - Welche Rendering Methode?
Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? 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 - Welche Rendering Methode?
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi Johannes, ich nutze immer das hier: https://github.com/scottjehl/picturefill Das ist glaube ich mit keinem der eingebauten TYPO3-Modi 100%'ig kompatibel (dort gibt es sowohl picture als auch srcset-Attribute). Allerdings ist das aller Wahrscheinlichkeit nach sehr nah an kommenden Browserimplementationen und Standards dran, der Chrome hat meines Wissens schon eine teilweise Implementierung davon. Gruß Jost On 11/06/2014 05:20 PM, JCL - Johannes C. Laxander wrote: Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? Gruß, Johannes. -BEGIN PGP SIGNATURE- Version: GnuPG v1 iEYEARECAAYFAlRbqn8ACgkQNme/yCvmvTJTlwCfdZbhLQMzkBP3otESF9V7Mddg ID0AnRGOsEuvor8iVsA+cVfFA1u3r/g7 =FGpO -END PGP SIGNATURE- ___ TYPO3-german mailing list TYPO3-german@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
Re: [TYPO3-german] Responsive Images - Welche Rendering Methode?
Hallo Jost, danke für deine Antwort und den Link. Das werde ich mir mal genauer ansehen. Ich beschäftige mich zum ersten Mal intensiver mit Responsive Images und hab noch keinen klaren Über- und Durchblick. Gruß, Johannes. -Ursprüngliche Nachricht- Von: typo3-german-boun...@lists.typo3.org [mailto:typo3-german-boun...@lists.typo3.org] Im Auftrag von Jost Baron Gesendet: Donnerstag, 6. November 2014 18:06 An: typo3-german@lists.typo3.org Betreff: Re: [TYPO3-german] Responsive Images - Welche Rendering Methode? -BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Hi Johannes, ich nutze immer das hier: https://github.com/scottjehl/picturefill Das ist glaube ich mit keinem der eingebauten TYPO3-Modi 100%'ig kompatibel (dort gibt es sowohl picture als auch srcset-Attribute). Allerdings ist das aller Wahrscheinlichkeit nach sehr nah an kommenden Browserimplementationen und Standards dran, der Chrome hat meines Wissens schon eine teilweise Implementierung davon. Gruß Jost On 11/06/2014 05:20 PM, JCL - Johannes C. Laxander wrote: Hallo, mich würde mal interessieren, welche Kriterien / Argumente für die in TYPO3 6.2 integrierten Rendering Methoden sprechen: srcset picture data Welche Methode ist unter welchen Bedingungen empfohlen? Welche Methode wendet ihr an? Gruß, Johannes. -BEGIN PGP SIGNATURE- Version: GnuPG v1 iEYEARECAAYFAlRbqn8ACgkQNme/yCvmvTJTlwCfdZbhLQMzkBP3otESF9V7Mddg ID0AnRGOsEuvor8iVsA+cVfFA1u3r/g7 =FGpO -END PGP SIGNATURE- ___ 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
