Responsive Images
Mehrere Bilder aus "document"
<div class="###element_data_picture_file_0_fieldname###">
<f:for each="{data.content.4t3_data.picture}" as="fileItem" key="itemkey" reverse="false" iteration="iterator">
<picture>
<source srcset="{f:uri.image(src: '{ft3:generate(action: 'graphic', type: 'picture', file: 'fileadmin/{fileItem.original.identifier}')}', width:'556')}" media="(min-width: 1200px)" />
<source srcset="{f:uri.image(src: '{ft3:generate(action: 'graphic', type: 'picture', file: 'fileadmin/{fileItem.original.identifier}')}', width:'456')}" media="(min-width: 992px)" />
<source srcset="{f:uri.image(src: '{ft3:generate(action: 'graphic', type: 'picture', file: 'fileadmin/{fileItem.original.identifier}')}', width:'722')}" media="(min-width: 768px)" />
<source srcset="{f:uri.image(src: '{ft3:generate(action: 'graphic', type: 'picture', file: 'fileadmin/{fileItem.original.identifier}')}', width:'480')}" media="(min-width: 0px)" />
<img src="{f:uri.image(src: '{ft3:generate(action: 'graphic', type: 'picture', file: 'fileadmin/{fileItem.original.identifier}')}', width:'722')}" alt="{f:if(condition: '{fileItem.reference.alternative}', then: '{fileItem.reference.alternative}', else: '{f:if(condition:'{fileItem.original.alternative}', then:'{fileItem.original.alternative}', else: '###page_title###')}')}" />
</picture>
</f:for>
</div>
Easyadmin:
picture|Abbildungen|document (ohne "data_"!!)
|
- Der Platzhalter ###element_data_picture_file_0_fieldname### muss sich in der Klasse eines übergeordneten Containers befinden.
- Die Breitenangaben width und height geben an, in welcher Größe das jeweilige Bild generiert und bei den entsprechenden media-queries ausgegeben wird.
- Der Alt-Tag hat eine doppelte Abfrage: Wenn der Alt-Text im Element gepflegt ist, wird dieser gezogen, ansonsten wird der Alt-Tag aus der Dateiliste gezogen, ansonsten der Seitentitel. Der Seitentitel kann natürlich auch durch die Headline des Elementes o. ä. ersetzt werden.
|
