[TYPO3-german] TYPO3 6.2 - Responsive Images

Mon Sep 1 16:51:59 CEST 2014

Hallo, 

die meisten Bootstrap-Lösungen für TYPO3 schalten diese Inhaltselemente aus dem Grund auch einfach aus, bzw. schränken es so ein, dass es eben kein Text neben Bild gibt. Nicht umsonst erkennt man die meisten Bootstrap-seiten auf den ersten Blick, deren Design ist eben stereotyp. Müsste nicht so sein, aber dann wird es eben aufwändig. 

Ich übernehme aus diesem Grund auch keine der vorgefertigten Lösungen sondern baue mir immer eine eigene. Das eigentliche Problem sind nämlich vor allem die Bilder die direkt im RTE geladen werden: die Icons die kleiner sein _müssen_ als 100%. Man nimmt dadurch den Redakteuren eine enorme Menge an Gestaltungsmöglichkeiten.

Man kann im Prinzip so arbeiten, dass die Größenangaben der Bilder ins Frontend ausgegeben werden, und nur durch das CSS überschrieben werden. Also width="100" height="30" im HTML und max-widhth:100%; height:auto im CSS. Es gibt manchmal ein paar Probleme mit dem Firefox, der unter bestimmten Umständen das max-width ignoriert, aber bisher konnte ich die immer lösen. 

Alternative wäre, verschiedene Sourcesets zu defnieren und diese getrennt für die einzelnen Spalten in den Backend-Layouts oder Gridelements zu definieren: 

tt_content.gridelements_pi1.20.10.setup {
4 < lib.gridelements.defaultGridSetup
	4 {
		columns {
			3 < .default
			3.wrap = <header>|</header>
			4 < .default

			4.renderObj.20.image.20.width = 100
			4.renderObj.20.image.20.maxW = 100
			#4.renderObj.20.image.20.1.sourceCollection >
			4.renderObj.20.image.20.1.sourceCollection {
				tablet {
					width = 320
					maxW = 320
					srcsetCandidate = 
					mediaQuery = 
					dataKey = tablet
				}
				tabletRetina {
					pixelDensity = 2

					width = 640
					maxW = 640
					srcsetCandidate = 2x
					mediaQuery = 
					dataKey = tabletRetina
				}
			}
			4.wrap = <nav>|</nav>
		}
		wrap = <div class="wrapper"><section class="teasermenu">|</section></div>

und so weiter. Der Redakteur muss in dem Fall immer Bilder in der Maximalgröße hochladen (bei mir hier bis zu 2000 Pixel) und diese werden dann auf die Breite runtergebrochen, die für das jeweilige Grid nötig ist. Das war ne menge Fleisarbeit ..s

Da ist die ideale Lösung tatsächlich noch nicht gefunden. 

Gruß
Peter

Am 01.09.2014 um 15:32 schrieb bernd wilke <t3ng at bernd-wilke.net>:

> Am 01.09.14 14:33, schrieb Christian Ehret:
>> Hallo zusammen!
>> Ich beschäftige mich gerade mit TYPO3 6.2 und Responsive Images auch in
>> Bezug auf Retina Displays. Die ein oder andere Anleitung dazu gibt es ja
>> schon, z.B. diese hier von Ingo Schmitt:
>> http://blog.marketing-factory.de/typo3/tutorial_responsive_images/ - das
>> funktioniert soweit bei mir auch schon sehr gut.
>> 
>> Ich habe nun aber eine grundlegende (Verständnis-)frage: mit dem Ansatz
>> von Ingo Schmitt geht im Backend die Möglichkeit komplett verloren,
>> Bilder durch den Redakteur skalieren zu lassen - also die Angaben Höhe
>> und Breite bei Erscheinungsbild sind dann wirkungslos (und letztendlich
>> auch die Ausgangsgröße in der das Bild hochgeladen wird). Damit könnte
>> ich noch leben, denn bei einem einheitlichem Design ist es ggf. sogar
>> von Vorteil, wenn der Redakteur das nicht jedes mal selbstständig
>> festlegen kann  Allerdings werden dann doch mehrere Breiten benötigt,
>> z.B. bei "nur Bild", "Bild mit Text", verschiedenen Spalten oder - um
>> noch einen drauf zu setzten - bei der Verwendung innerhalb von Plugins
>> wie jfmulticontent. Habe ich da jetzt irgendetwas übersehen? Mir wäre es
>> jetzt nicht wichtig, die Felder für Höhe und Breite wieder zu
>> aktivieren, aber entweder dem Redakteur aus ein paar unterschiedlichen
>> Breiten auswählen lassen, oder vielleicht sogar noch besser, abhängig
>> von der Verwendungsart.
> 
> grundsätzlich hast du das Problem, dass du keine wirklich festen Werte vorsehen kannst.
> je nach responsive framework kannst du ein paar vorentscheidungen treffen. und dann darauf warten mit welchen Bildshirmgrößen auf deine Website zugegriffen wird.
> du bekommst evtl. eine maximale Größe, in der ein Bild überhaupt angefordert werden könnte. Wenn du nicht 100% flexibel arbeitest, sondern mit media switches kommen nur ein paar Größen in Frage. Wenn du mit Spalten arbeitest könntest du natürlich auch die Bildgrößen per JS oder CSS bestimmen lassen und (ggfls sogar per URL-Parameter) unterschiedlich große Bilder laden.
> Das CE Text mit Bild ist dabei eigentlich überflüssig, bzw. zu kompliziert zu konfigurieren (nutze x von y Spalten für Bild???). Dazu kann man dann eher Spaltencontainer benutzen, in denen das Bild dann 100% der zur Verfügung stehenden Größe nutzt. wenn diese Container dann auch noch ineinander geschachtelt sein können kann die Berechnung der maximalen Größe allerdings auch beliebig komplex werden.
> 
> Eine andere Komplikation ist das Verhalten der Bilder bei unterschiedlichen Breiten. Ein Bild wird (optimalerweise) ja nicht immer nur einfach im Ganzen skaliert. Je nach Anzeige (zb. übereinander statt nebeneinander wenn die Spalte < 300px) könnte auch ein anderer Ausschnitt gewünscht sein.
> Im Prinzip musst du dem Redakteur also erlauben (bzw. ihn sogar dazu zwingen) nicht nur ein Bild anzugeben, sondern ein ganzes Set, die dann bei Bedarf in verschiedenen Größen ausgeliefert, bzw. im HTML (/ per JS) eingebunden und vom Client angefordert werden.
> 
> Einen Königsweg, der immer funktioniert wird es dabei wohl nicht geben.
> 
> bernd
> -- 
> http://www.pi-phi.de/cheatsheet.html
> _______________________________________________
> 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