TYPO3 Core

Story #75879

Updated by Frans Saris over 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 
				 
 lib.fluidContent.settings.media.sourceCollection { 
     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 
				         
         } 
     } 
 } 
 </pre> 

 *PictureSourceProcessor* 
 <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 { 
				 columns.field < lib.fluidContent.settings.media.sourceCollection.columns.field 
				 sources < lib.fluidContent.settings.media.sourceCollection.sources 
				 as = pictureSources 
			 } 
		 } 
	 } 
 } 
 </pre> 

 *Output of pictureSourceProcessor* 
 <pre> 
 pictureSources { 
     default { 
         width = 600 
     } 
    768 { 
         width = 300 
         mediaQuery = (max-device-width: 768px) 
         pixelDensity { 
          0 = 1 
          1 = 2 
         } 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}" media="{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>

Back