TYPO3 - Responsive Images

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/

http://typo3blogger.de/responsive-images-typo3-6-2/

http://scottjehl.github.io/picturefill/

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/

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

<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">
 <!-- fallback --> 
 <img xsrc="small.jpg" alt="responsive image">
</picture>

Srcset Attribute

<img alt="responsive image" xsrc="small.jpg" srcset="large.jpg 1600w, large.jpg 800w 1.95x, medium.jpg 800w, medium.jpg 400w 1.95x">

Data Attribute

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

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

Default	Rendering ohne Responsive Images
srcset	Rendering als Srcset Attribute
picture	Rendering als Picture Tag
data	Rendering als Data Attribute

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

Beispiel TypoScript Objekt für Fluid Template

http://stackoverflow.com/questions/31808505/how-to-implement-the-sourcecollection-responsive-image-rendering-in-typo3

Beispiel (Medienpalast)

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
#		}
#	}
#}