[TYPO3-german] TYPO3 6.2 - Responsive Images
Christian Ehret
chris at ehret.name
Mon Sep 1 14:33:52 CEST 2014
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.
Wenn ich jetzt den doch relativ "einfachen" Fall "Text mit Bild" anschaue, kommt dann so etwas raus:
<div class="csc-default" id="c36">
<!-- Header: [begin] -->
<div class="csc-header csc-header-n2"><h1>Überschrift</h1></div>
<!-- Header: [end] -->
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-responsive csc-textpic-intext-right"><div data-csc-cols="2" data-csc-images="1" class="csc-textpic-imagewrap"><figure class="csc-textpic-image csc-textpic-last"><picture><source media="(max-device-width: 600px)" src="/fileadmin/_processed_/csm_DSC_0297_76a0b5b3f7.jpg"></source><source media="(max-device-width: 600px) AND (min-resolution: 192dpi)" src="/fileadmin/_processed_/csm_DSC_0297_feffe40693.jpg"></source><img alt="" src="/fileadmin/_processed_/csm_DSC_0297_76a0b5b3f7.jpg"></picture></figure></div><div class="csc-textpic-text">
<!-- Text: [begin] -->
<p class="bodytext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Text: [end] -->
</div></div>
<!-- Image block: [end] -->
</div>
Ich könnte jetzt z.B. mit
div.csc-textpic-intext-right .csc-textpic-imagewrap {
width: 50%;
}
die 100% Weite die TYPO3 da standardmäßig rendert überschreiben. Das würde dann grundsätzlich auch funktionieren, allerdings lade ich dann die dennoch die Bilder - in diesem Beispiel - mit der doppelten Größe als benötigt. Und dass kann ja auch nicht wirklich sinnvoll sein?
Freue mich über ein paar Gedanken von euch zu diesem Thema.
Danke schon mal
Christian
More information about the TYPO3-german
mailing list