[TYPO3-german] Typo3 und adaptive images

Christian Tauscher christian.tauscher at media-distillery.de
Sun Jun 24 14:41:35 CEST 2012


Hallo liebe Liste!

Ich nehme Bezug auf die Diskussion "Typo3 und adaptive images" die
ulrich am 23.4. hier unter gleichem Titel gestartet hat.
Schon ein bischen her deswegen ein neuer Thread.

Er suchte nach eine Möglichkeit nicht nur das Layout "resposible", also
der Gerätegröße automatisch angepasst zu gestalten - das geht per
media-Querys wunderbar - er will das sich auch die Bilder entsprechend
anpassen, weil immer nur Monsterbilder im Browser irgendwie per css
gleicher machen ist ja nur Augenwischerei.


Er verweist in diesem Zusammenhang auf http://adaptive-images.com/ ein
sehr interessanter Ansatz!
Dort wird per .htaccess eine http-Anfrage zu einem Bild umgeleitet auf
ein schlaues Script das dann ein dem Device angepasstes Bild ausliefert.
In diesem Script sind ein paar Schlüsselgrößen/breiten definiert z.B.
1000px, 800px, 600px... Jeh nach Gerät wird das nächst passende Bild an
stelle des von Browser ursprünglich angefragten Ausgeliefert.

So weit so gut.
Wie kann man das jetzt in TYPO3 ab besten integrieren mit allen Coolen
TYPO3-features.


Das o.g.script definiert sich ein paar Bildbreiten die wohl eher der
Seitenbreite als solcher entsprechen. Was ist aber mit Bilder die von
Haus aus kleiner sind? z.B. Text/Bild.

Basierend auf cssStyledContent (CSC) definiert man z.B. im
Root-template/Constants

styles.content.imgtext.maxW = 1000

Bilder im Fließtext kann man dann auch noch genauer definieren, Abstand
Text-Bild etc auch noch.... Endlos. Bleiben wir exemplarisch bei maxW.

Dieser Wert maxW muss ja schon den Zielgrößen variabel angepasst werden.
CSC sieht aber nur eine Größe vor.

Ich stell mir jetzt eine erweiterte definition in CSC vor:

styles.content.imgtext.maxW.responsible = 1000, 800, 600, 400

Wenn man jetzt den Gifbuilder analog zu adaptive-images.com aufbohrt,
wäre man doch rückwärtskompatibel zum bisherigen verhalten und das
cashing könnte weiter unangetastet bleiben und das Mobilgerät und der
Desktop bekämen was sie wirklich brauchen.
Und unabhängig von der Render-Engine (klassisch, TV, Fluid etc.) wäre
man damit auch, weil man's spezifisch per TS definieren kann.

Freude Freude Eierkuchen.

Oder doch nicht.
Bin ich auf dem Holzweg.

Andererseits könnte man das ja als condition/Userfunc lösen:

[userFunc = checkDeviceWidth(400)]
  styles.content.imgtext.maxW.responsible = 400
[global]
[userFunc = checkDeviceWidth(600)]
  styles.content.imgtext.maxW.responsible = 600
[global]
[userFunc = checkDeviceWidth(1000)]
  styles.content.imgtext.maxW.responsible = 1000
[global]


Ist das effizient?
Woher weiß das phpScript die Geräte zuverlässig? WURFL?
Erst JavaScript -> Cookie ist ja einen Schritt zu spät.
Was ist vorzuziehen?



Dann gibts es ja noch das Projekt
http://git.typo3.org/TYPO3v4/Extensions/responsive_typo3.git

Scheint mir in die richtige Richtung zu gehen, aber ich bekomms nicht
zum laufen.... Bin noch am debuggen.



Ihr seht schon: ist grad noch etwas Brain-Storming....
Vielleicht hilfts einem anderen vielleicht habt ihr Ideen die aus der
Praxis kommen.

Das Responsible-Thema ist bestimmt noch nicht durch....

Danke für eure Geduld,

Christian.


P:S.:
Bevor auch hier sich die technische Frage in die Frage wandelt soll man
überhaupt "one fits all" programmieren oder eher extra Seitenbaum mit
eigen Inhalten.... Einigen wir und bitte gleich auf den Sonderfall:
Wir haben alles durchdacht und möchten eine Lösung die alle Geräte
abdeckt. Responsible halt.








More information about the TYPO3-german mailing list