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> 
 // 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 = containerwidth 
             } 
             containerMaxWidthInText = {$styles.content.maxWinText} 
             containerMaxWidthInText { 
                 override.field = containerwidth 
             } 
             pixelDensity = 1,2 
         } 
         768 { 
             containerMaxWidth = 300 
             containerMaxWidthInText = 150 
             maxColumns = 4 
             overrideColumnsMap { 
                 2 = 1 
             } 
             mediaQuery = (max-device-width: 768px) 
             pixelDensity = 1,2 
         } 
     } 
 } 
 </pre> 


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

 <pre> 
 <picture> 
    <f:for each="{pictureSources}" as="source"> 
      <f:pictureSource 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