[TYPO3-german] TYPO3 6.2 - Responsive Images

Stefan Padberg post at bergische-webschmiede.de
Mon Sep 1 15:50:53 CEST 2014


Hallo Christian,

ich kann deine Überlegungen bestätigen. Auch mich hat das Konzept nicht 
überzeugt.

Ich musste in einem Projekt beim größten Breakpoint ein Hintergrundbild 
mit 1980px Breite haben. Der Redakteur sollte es im Backend austauschen 
können, also nix mit CSS-Hintergrundbild usw.

Das hätte bedeutet, dass alle Bilder in diesem Breakpoint mit 1980px 
Breite hätten gerendert worden müssen.

Das kann es nicht sein. Ich kann damit leben, dass die Redakteure nicht 
mehr die Breite und Höhe eingeben dürfen. Das muss dann halt alles übers 
Stylesheet laufen. Es muss auch nicht jedes Bild pixelgenau gerendert 
weren. Der Browser darf es ruhig etwas anpassen und verkleinern.

Aber mit 1980px? Das geht nicht.

Ich würde mir wünschen, dass man in der Konfiguration die Breite in 
Prozentzahlen angeben kann, sodass das Umskalieren der Bilder die 
Originalbreite respektiert.

Beste Grüße
Stefan


Am 01.09.2014 um 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.
>
> 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


-- 
Bergische Webschmiede
Typo3 Dienstleistungen
:: Dipl.-Ing. Stefan Padberg
:: www.bergische-webschmiede.de

---
Diese E-Mail ist frei von Viren und Malware, denn der avast! Antivirus Schutz ist aktiv.
http://www.avast.com



More information about the TYPO3-german mailing list