[TYPO3-german] TYPO3 6.2 - Responsive Images

[Peter Linzenkirchner]

Hallo Stefan, 

du kannst für Standard-Inhaltselemente abhängig vom jeweils verwendeten Grid aus Gridelements getrennte SourceCollections definieren. Ich hatte das Problem auch, wobei ich noch Retina abdecken wollte, und mein größtes Bild deshalb 2000 Pixel Breite hatte. Für die Hintergrundbilder (über supersized) habe ich mir was eigenes geschrieben: über window.innerWidth die Breite abgefragt, und jeweils verschiedene Bildgrößen angefordert: 

page.jsFooterInline {

	10 = TEXT
	10.value (
	
	$(document).ready(function(){
		if (window.innerWidth < 600) {
	)
	20 < temp.supersizedStart
	30 < temp.supersizedFiles
	30.renderObj.file.maxW = 600
	40 < temp.supersizedFinish

	50 = TEXT 
	50.value (

		};
		if (window.innerWidth >= 600 && window.innerWidth <= 1024) {

	)

etc. also mehrmals den gleichen Code, aber mit unterschiedlichen Bildgrößen, mit anderen Breakpoints als der Inhalt, weil die Bilder ja den Bildschirm ausfüllen sollen. Das geht ganz gut, ist aber nicht besonders schön. Drum rum Gewurschtel.

Gruß
Peter
 




Am 01.09.2014 um 15:50 schrieb Stefan Padberg <post at bergische-webschmiede.de>:

> 
> 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
> 
> _______________________________________________
> 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