@Matthias Eberlein wollte gerade schreiben, dass T3 so ein JS schon
haben sollte.
@Peter Linzenkirchner muss ich unbedingt auch mal testen und eine
richtige Anleitung dazu schreiben.
vllt. kann mir wer dabei helfen ;)
grüße,
Sebastian
------------------------------------------
TYPO3 - TIPPS - ANLEITUNGEN - NEWS
unter: http://blog.ingeniumdesign.de/
TYPO3 Webdesign Agentur Wiesbaden - Frankfurt
unter: http://www.ingeniumdesign.de/
Facebook Fan
http://www.facebook.com/ingeniumdesign/
------------------------------------------
Am 23.04.2014 23:55, schrieb Peter Linzenkirchner:
Hallo Christian,
entscheidend ist, dass das normale Bild das kleinste sein muss. Meine
Konfiguration:
tt_content.image.20.maxW = 200
tt_content.image.20.1.sourceCollection >
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
}
}
Wichtig ist diese Zeile:
tt_content.image.20.maxW = 200
Damit erhalte ich im <img src="kleinsteDatei.jpg" srcset="die größeren Dateien">
Darüber hinaus brauchst du natürlich das passende JavaScript, welches die Bilder dann auch
tauscht. Das hängt davon ab, welche Technik du verwendest. Diese stellst du ja in den
Constants ein, ich habe hier z. B. bei "REndering-type für responsive images" die
Option "img-tag with alternate sources as srcset-attribute gewählt.
Dazu gehört dann dieses JavaScript: https://github.com/borismus/srcset-polyfill/
OK, das ist wirklich nicht intuitiv - Anleitung bei http://www.lobacher.de:
http://lobacher.de/files/TYPO3-CMS-6.2-LTS-Die-Neuerungen-Lobacher.pdf
irgendwo in der Mitte ...
Gruß
Peter
Am 23.04.2014 um 23:22 schrieb Christian Leicht <use...@schani.com>:
Hallo,
ich versuche gerade eine Seite mit Responsive Images umzusetzen. Die
6.2er Möglichkeiten nutze ich auch, habe aber das Problem das alle
Bilder in den verschiedenen Auflösungen geladen werden. Wenn ich ein
Bild auf die Seite stelle wird das Original, das ja überdimensioniert
in fileadmin abgelegt ist im src des IMG eingetragen. Das bedeutet aber
auch das das Original geladen wird.
Wenn ich die Seite z.B. mittels tools.pingdom.com prüfe, wird eine große
Datenmenge der Bilder angezeigt. Auf einer Langsamen Internetverbindung
macht sich die Ladezeit auch bemerkbar. Auf dem iPhone lädt es auch
dementsprechend lange. Das Bild hat ja auch im Original 600kB
Sollte dieses src Bild nicht komplett weg sein? Die anderen 3 Bilder in
srcset existieren zwar auf dem Server, werden aber nicht benutzt. Egal
in welcher Fenstergröße es wird immer nur das Original Bild angezeigt
und dann über den img {width: 100%} auf die notwendige Größe skaliert.
<img src="/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg
<view-source:http://wwl2014.leicht.info/fileadmin/Bilder%20Dokumente/dummy/Ansicht1.jpg>"
srcset="/fileadmin/_processed_/csm_Ansicht1_1dae772559.jpg 300w,
fileadmin/_processed_/csm_Ansicht1_f1178cb7ea.jpg 600w 2x,
fileadmin/_processed_/csm_Ansicht1_2664ab2299.jpg 600w" alt="">
Muss ich noch ein JS einbinden damit das klappt?
Irgendwie kann ich mir nicht vorstellen wie das ganze funktionieren soll.
Besten Dank für Infos
Christian
Mail: use...@schani.com
_______________________________________________
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
