Skip to content

Instantly share code, notes, and snippets.

@sebkln

sebkln/SrcsetImage.html

Last active August 1, 2022 05:46
Show Gist options
  • Save sebkln/842eb8bb5889d34b6ddfe7881966bfa7 to your computer and use it in GitHub Desktop.
Save sebkln/842eb8bb5889d34b6ddfe7881966bfa7 to your computer and use it in GitHub Desktop.
Download ZIP
TYPO3 Fluid sourceset image partial
Raw
SrcsetImage.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:comment>
<!--
Below: Compare the column size with the actual image size.
This allows the editor to set a maxWidth in the Content Element.
The 'sizes' attribute will prevent upscaling to 100vw of smaller images.
Please keep in mind:
- Only srcset values for images greater than this calculated width are generated!
- If no maxWidth is set in the CE flexform, these constants for maxWidths in Typoscript are applied:
styles.content.textmedia.maxWInText =
styles.content.textmedia.maxW =
Be sure to adjust these settings to your needs.
As PDFs don't have a value in {file.properties.width}, we have to check the file type first.
-->
</f:comment>
<f:variable name="imgsize">{file.properties.width}</f:variable>
<f:variable name="columnsize">{dimensions.width}</f:variable>
<f:if condition="{file.properties.type} == 5">
<f:then>
<f:variable name="calculatedsize">{dimensions.width}</f:variable>
</f:then>
<f:else>
<f:variable name="calculatedsize">{f:if(condition:'{columnsize} <= {imgsize}', then: '{columnsize}', else:
'{imgsize}')}
</f:variable>
</f:else>
</f:if>
<f:variable name="img480">{f:uri.image(image: file,maxWidth:'480')} 480w,</f:variable>
<f:variable name="img768">{f:uri.image(image: file,maxWidth:'768')} 768w,</f:variable>
<f:variable name="img992">{f:uri.image(image: file,maxWidth:'992')} 992w,</f:variable>
<f:variable name="img1400">{f:uri.image(image: file,maxWidth:'1400')} 1400w,</f:variable>
<f:variable name="img2000">{f:uri.image(image: file,maxWidth:'2000')} 2000w,</f:variable>
<img src="{f:uri.image(image: file,maxWidth: '{calculatedsize}')}"
alt="{file.alternative}"
class="image-embed-item"
title="{file.title}"
srcset="{f:if(condition:'{calculatedsize} >= 480', then:'{img480}')}
{f:if(condition:'{calculatedsize} >= 768', then:'{img768}')}
{f:if(condition:'{calculatedsize} >= 992', then:'{img992}')}
{f:if(condition:'{calculatedsize} >= 1400', then:'{img1400}')}
{f:if(condition:'{calculatedsize} >= 2000', then:'{img2000}')}"
sizes="{calculatedsize}px">
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment