[TYPO3-german] Responsive Images

Björn Hahnefeld b.hahnefeld at nal-vonminden.com
Thu Apr 28 14:41:04 CEST 2016


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-bounces at lists.typo3.org
[mailto:typo3-german-bounces at 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.hahnefeld at 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-bounces at lists.typo3.org
> [mailto:typo3-german-bounces at 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 at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
> 
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at 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 at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german



More information about the TYPO3-german mailing list