TYPO3 Core

Story #75879

Updated by Frans Saris almost 8 years ago

https://www.w3.org/TR/2013/WD-html-picture-element-20130226/ 


 *Example typoscript configuration:* 
 <pre> 
 tt_content { 
	 textmedia =< lib.fluidContent 
	 textmedia { 
		 templateName = Textmedia 
		 dataProcessing { 
			 10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor 
			 10 { 
				 references.fieldName = assets 
			 } 
			 20 = TYPO3\CMS\Frontend\DataProcessing\PictureSourceProcessor 
			 20 { 
				 // Taking into account: 
				 // - Mediaquery 
				 // - Container width 
				 // - Columns 
				 // ContainerWidth(InText) can be overruled in the content element 
				 // Keys to use as identifier for mediaQuery 
				 columns.field = imagecols 
				 sources { 
				         default { 
				             containerMaxWidth = {$styles.content.maxW} 
				             containerMaxWidth { 
				                 override.field = container_width 
				             } 
				             containerMaxWidthInText = {$styles.content.maxWinText} 
				             containerMaxWidthInText { 
				                 override.field = container_width 
				             } 
				             pixelDensity = 1,2 
				         } 
				         768 { 
				             containerMaxWidth = 300 
				             containerMaxWidthInText = 150 
				             maxColumns = 4 
				             overrideColumnsMap { 
				                 2 = 1 
				             } 
				             mediaQuery = (max-device-width: 768px) 
				             pixelDensity = 1,2 
				         } 
				 } 
				 as = pictureSources 
			 } 
		 } 
	 } 
 } 
 </pre> 

 *Output of pictureSourceProcessor* 
 <pre> 
 pictureSources { 
     default { 
         width = 600 
         mediaQuery = 
         pixelDensity { 
           0 = 1 
           1 = 2 
         } 
     } 
     
    768 { 
         width = 300 
         mediaQuery = (max-device-width: 768px) 
         pixelDensity { 
          0 = 1 
          1 = 2 
         } 
     } 
 } 
 </pre> 

 *pictureSourceViewHelper* 
 <pre> 
     pictureSourceViewHelper 
       - FileInterface $image 
       - string $mediaQuery 
       - int $width 
       - array $pixelDensity 
 </pre> 

 *Fluid partial* 
 <pre> 
 <picture> 
    <f:for each="{pictureSources}" as="source"> 
      <f:pictureSource mediaQuery="{source.mediaQuery}" width="{source.width}m" pixelDensity="{source.pixelDensity}" image="{file}" /> 
    </f:for> 
   <f:image image="{file}" width="{pictureSources.default.width}m" alt="" /> 
 </picture> 
 </pre> 

 *Output* 
 <pre> 
 <picture> 
    <source srcset="small-1.jpg 1x, small-2.jpg 2x"> 
    <source media="(max-device-width: 768px)" srcset="large-1.jpg 1x, large-2.jpg 2x"> 
    <img src="small-1.jpg" alt=""> 
 </picture> 
 </pre>

Back