TYPO3 - Responsive Images - Versionsgeschichte

149.172.227.142: /* Beispiele */

2016-09-12T13:59:20Z

Beispiele

149.172.227.142 am 12. September 2016 um 13:10 Uhr

2016-09-12T13:10:35Z

149.172.227.142: /* Kurzeinführung */

2016-09-12T12:36:19Z

Kurzeinführung

149.172.227.142: /* Siehe auch */

2016-09-12T12:35:27Z

Siehe auch

149.172.227.142: /* Siehe auch */

2016-09-12T11:21:07Z

Siehe auch

149.172.227.142 am 12. September 2016 um 11:08 Uhr

2016-09-12T11:08:26Z

149.172.227.142: /* Kurzeinführung */

2016-09-12T10:46:35Z

Kurzeinführung

149.172.227.142: Die Seite wurde neu angelegt: „== Kurzeinführung == Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/ Derzeit aktuelle HTML-Lösungen binden die verschiedenen Bildgrö…“

2016-09-12T10:46:21Z

Die Seite wurde neu angelegt: „== Kurzeinführung == Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/ Derzeit aktuelle HTML-Lösungen binden die verschiedenen Bildgrö…“

Neue Seite

== Kurzeinführung ==
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

Derzeit aktuelle HTML-Lösungen binden die verschiedenen Bildgrößen im HTML als Ressource ein. Meist kommt dabei zusätzlicher JavaScript-Code zum Einsatz, um das DOM-Objekt der Seite entsprechend des Breakpoints zu modifizieren oder um einen Fallback für ältere Browser zu erstellen. Die drei gängigsten und am weitesten verbreiteten Lösungen sind dabei:

'''Picture Tag'''
<syntaxhighlight lang="html">
<picture alt="responsive image">
<source xsrc="large.jpg" media="(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)">
<source xsrc="medium.jpg" media="(min-width:800px), (min-resolution: 136dpi) and (min-width:400px)">
<source xsrc="small.jpg">

<img xsrc="small.jpg" alt="responsive image">
</picture>
</syntaxhighlight>

'''Srcset Attribute'''
<syntaxhighlight lang="html">
<img alt="responsive image" xsrc="small.jpg" srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">
</syntaxhighlight>

'''Data Attribute'''
<syntaxhighlight lang="html">
<img alt="responsive image" xsrc="small.jpg" data-large="large.jpg“ data-large-1.95x="large.jpg“ data-medium="medium.jpg“ data-medium-1.95x="large.jpg“>
</syntaxhighlight>

== Umsetzung über css_styled_content ==
Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

Ab 6.2 sind über„css_styled_content“ bereits diese drei Lösungen vorbereitet. Ein Integrator muss nur noch eine passende JavaScript-Bibliothek auswählen und implementieren, dann stehen Responsive Images im Frontend zur Verfügung. Welche Responsive-Images-Lösung zum Einsatz kommen soll, lässt sich über die Konstante „styles.content.imgtext.layoutKey“ auswählen. Mögliche Werte sind dabei:

Werte der Konstante '''styles.content.imgtext.layoutKey'''
<pre>
Default Rendering ohne Responsive Images
srcset Rendering als Srcset Attribute
picture Rendering als Picture Tag
data Rendering als Data Attribute
</pre>

Nachdem die Konstante gesetzt ist, erstellt TYPO3 für jedes eingebundene Bild zwei verschiedene Auflösungen: zwei Bilder mit 600 Pixel Breite, eins für normale Displays und eins für ein Retina-Display.

@@ Zeile 53: / Zeile 53: @@
 ==Beispiele==
 <syntaxhighlight lang="typoscript">
 plugin.tx_mplib {

← Nächstältere Version		Version vom 12. September 2016, 13:10 Uhr
Zeile 50:		Zeile 50:

	Nachdem die Konstante gesetzt ist, erstellt TYPO3 für jedes eingebundene Bild zwei verschiedene Auflösungen: zwei Bilder mit 600 Pixel Breite, eins für normale Displays und eins für ein Retina-Display.		Nachdem die Konstante gesetzt ist, erstellt TYPO3 für jedes eingebundene Bild zwei verschiedene Auflösungen: zwei Bilder mit 600 Pixel Breite, eins für normale Displays und eins für ein Retina-Display.
		+
		+
		+	==Beispiele==
		+	<syntaxhighlight lang="typoscript">
		+	plugin.tx_mplib {
		+	settings {
		+	viewHelpers {
		+	media {
		+	image {
		+	# default picturefill version [ \| 1 \| 2 ] (default: empty)
		+	defaultPicturefillVersion = {$plugin.tx_mplib.settings.viewHelpers.media.image.defaultPicturefillVersion}
		+	}
		+	}
		+	}
		+	}
		+	}
		+
		+	################### RESPONSIVE IMAGE TEMPLATE ###################
		+	# verwendbar mit cObject viewHelper
		+	# bsp. bildpfad <f:cObject typoscriptObjectPath="lib. ...." data="{image:'uploads/pics/{imageName}', altText:'{altText}', titleText:'{titleText}', class:'img-responsive'}" />
		+	# bsp. imageResource <f:cObject typoscriptObjectPath="lib. ...." data="{image:'{imageObj.uid}', altText:'{altText}', titleText:'{titleText}', class:'img-responsive'}" />
		+
		+	lib.responsiveImageTemplate = IMAGE
		+	lib.responsiveImageTemplate {
		+	# hier kann auch der Gifbuilder verwendet werden ...
		+	file {
		+	import.field = image
		+	# wenn im template eine file reference object Uid angegeben wird
		+	#treatIdAsReference = 1
		+
		+	# sollte angegeben werden - wird für das default (fallback) bild verwendet
		+	width =
		+	height =
		+	}
		+
		+	altText.field = altText
		+	titleText.field = titleText
		+	params = class="{field:class}"
		+	params.insertData = 1
		+
		+	# layout das verwendet werden soll
		+	layoutKey = picturefill2
		+
		+	# mogliche layouts (picturefill2, default, srcset, picture, data)
		+	layout < tt_content.image.20.1.layout
		+	layout {
		+	picturefill2 {
		+	element = <picture><!--[if IE 9]><video style="display: none;"><![endif]-->###SOURCECOLLECTION###<!--[if IE 9]></video><![endif]--><img src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==" srcset="###SRC###"###PARAMS######ALTPARAMS######SELFCLOSINGTAGSLASH###></picture>
		+	source = <source srcset="###SRC###" media="###MEDIAQUERY###"###SELFCLOSINGTAGSLASH###>
		+	}
		+	}
		+	# wie für den Image-Viewhelper aus mp_lib
		+	sourceCollection {
		+	lg {
		+	maxW = 1600
		+	maxH =
		+	mediaQuery = (min-width: 1200px)
		+	dataKey = lg
		+	}
		+	md {
		+	maxW = 1199
		+	maxH =
		+	mediaQuery = (min-width: 992px) AND (max-width: 1199px)
		+	dataKey = md
		+	}
		+	sm {
		+	maxW = 991
		+	maxH =
		+	mediaQuery = (min-width: 768px) AND (max-width: 991px)
		+	dataKey = sm
		+	}
		+	xs {
		+	maxW = 767
		+	maxH =
		+	mediaQuery = (min-width: 480px) AND (max-width: 767px)
		+	dataKey = xs
		+	}
		+	xxs {
		+	maxW = 479
		+	maxH =
		+	mediaQuery = (max-width: 479px)
		+	dataKey = xxs
		+	}
		+	}
		+	}
		+
		+	## verwendungs bsp - mit gifbuilder:
		+	#lib.dummyImageObject < lib.responsiveImageTemplate
		+	#lib.dummyImageObject {
		+	# file >
		+	# file = GIFBUILDER
		+	# file {
		+	# XY = 414,296
		+	# transparentBackground = 1
		+	# 10 = IMAGE
		+	# 10 {
		+	# align = c,c
		+	# file {
		+	# import.field = image
		+	# #treatIdAsReference = 1
		+	# width = 414m
		+	# height = 296m
		+	# }
		+	# }
		+	# }
		+	#
		+	# sourceCollection {
		+	# lg {
		+	# width = 283m
		+	# height = 202m
		+	# }
		+	# md {
		+	# width = 283m
		+	# height = 202m
		+	# }
		+	# sm {
		+	# width = 212m
		+	# height = 151m
		+	# }
		+	# xs {
		+	# width = 339m
		+	# height = 242m
		+	# }
		+	# xxs {
		+	# width = 414m
		+	# height = 296m
		+	# }
		+	# }
		+	#}
		+	</syntaxhighlight>

← Nächstältere Version		Version vom 12. September 2016, 12:36 Uhr
Zeile 9:		Zeile 9:

	== Kurzeinführung ==		== Kurzeinführung ==
		+	Hinweis: Im Moment (2016) sieht es so aus als ob srcset als Standard das Rennen macht...
		+
	Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/		Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

← Nächstältere Version		Version vom 12. September 2016, 12:35 Uhr
Zeile 3:		Zeile 3:

	https://www.drweb.de/magazin/responsive-images-mit-rwd-images-js-machen-oder-auf-den-standard-warten/		https://www.drweb.de/magazin/responsive-images-mit-rwd-images-js-machen-oder-auf-den-standard-warten/
		+
		+	http://typo3blogger.de/responsive-images-typo3-6-2/
		+
		+	http://scottjehl.github.io/picturefill/

	== Kurzeinführung ==		== Kurzeinführung ==

← Nächstältere Version		Version vom 12. September 2016, 11:21 Uhr
Zeile 1:		Zeile 1:
	== Siehe auch ==		== Siehe auch ==
		+	http://typo3worx.eu/2016/03/responsive-images-on-typo3-websites/
		+
	https://www.drweb.de/magazin/responsive-images-mit-rwd-images-js-machen-oder-auf-den-standard-warten/		https://www.drweb.de/magazin/responsive-images-mit-rwd-images-js-machen-oder-auf-den-standard-warten/

← Nächstältere Version		Version vom 12. September 2016, 11:08 Uhr
Zeile 1:		Zeile 1:
		+	== Siehe auch ==
		+	https://www.drweb.de/magazin/responsive-images-mit-rwd-images-js-machen-oder-auf-den-standard-warten/
		+
	== Kurzeinführung ==		== Kurzeinführung ==
	Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/		Quelle: http://t3n.de/magazin/typo3-6-2-lts-responsive-images-235194/

@@ Zeile 5: / Zeile 5: @@
 '''Picture Tag'''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <picture alt="responsive image">
   <source xsrc="large.jpg" media="(min-width:1600px), (min-resolution: 136dpi) and (min-width:800px)">
@@ Zeile 16: / Zeile 16: @@
 '''Srcset Attribute'''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <img alt="responsive image" xsrc="small.jpg" srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">
 </syntaxhighlight>
 '''Data Attribute'''
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html5">
 <img alt="responsive image" xsrc="small.jpg" data-large="large.jpg“ data-large-1.95x="large.jpg“ data-medium="medium.jpg“ data-medium-1.95x="large.jpg“>
 </syntaxhighlight>