Test page for b13 Image ViewHelper
Image Tags
Simple Image
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" alt="Testimage 400px width" />
Simple Image as webp
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" fileExtension="webp" alt="Testimage 400px width" />
Simple Image with Retina option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" useRetina="1" alt="Testimage 400px width with retina option" />
Simple Image with addWebp option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" addWebp="1" alt="Testimage 400px width with addWebp option" />
Simple Image with onlyWebp option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" onlyWebp="1" alt="Testimage 400px width onlyWebp option" />
Simple Image with Retina and addWebp option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" addWebp="1" useRetina="1" alt="Testimage 400px width with retina and addWebp option " />
Image with multiple sizes
Image with 2 sizes
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" sources="{0: {width: 800, media: 'min-width: 1024px'}, 1: {width: 400}}" alt="Testimage with 400px image size, 800px image size for screens > 1024px" />
Image with 2 sizes and retina option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" useRetina="1" sources="{0: {width: 800, media: 'min-width: 1024px'}, 1: {width: 400}}" alt="Testimage with 400px image size, 800px image size for screens > 1024px, with retina" />
Single image with multiple image sizes and two breakpoints as srcset (should render as a picture tag)
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" sources="{0: {width: 400, variants: '310, 345, 400', sizes: '100vh'}}" alt="Testimage with 400px image size, with multiple images as a srcset, including webp image format with fallback" />
Single image with multiple image sizes as srcset (should render as an image tag)
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" sizes="(min-width: 400px) 400px, 100vh" width="400" variants="310, 345, 400" alt="Testimage with 400px image size, with multiple images as a srcset, including webp image format with fallback" />
Image (Picture element) with srcset and a sizes-value, with webP option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" addWebp="1" pictureClass="myPictureClass" sources="{0: {width: '800', media: 'min-width: 1024px', variants: '800, 1200, 1600, 2000', sizes: '100vh'}, 1: {width: 400, variants: '310, 345, 400', sizes: '100vh'}}" alt="Testimage with 400px image size, 800px image size for screens > 1024px, with multiple images as a srcset, including webp image format with fallback" />
Image (Picture element) with multiple sources
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" pictureClass="myPictureClass" sources="{0: {width: 800, media: 'min-width: 1024px', src: 'EXT:picture/Resources/Public/Test/Picture_alt.png'}, 1: {width: 400}}" alt="Testimage with 400px image size, 800px image size with rotated image for screens > 1024px" />
Image (Picture element) with multiple sources and webP option
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" addWebp="1" pictureClass="myPictureClass" sources="{0: {width: 800, media: 'min-width: 1024px', src: 'EXT:picture/Resources/Public/Test/Picture_alt.png'}, 1: {width: 400}}" alt="Testimage with 400px image size, 800px image size with rotated image for screens > 1024px, with webP option" />
Breakpoint testing
Image with 3 sizes for the 3 given breakpoints in TypoScript setup
<i:image src="EXT:picture/Resources/Public/Test/Picture.png" width="400" pictureClass="myPictureClass" sources="{lg: {width: 800}, md: {width: 600}, sm: {width: 400}}" alt="Testimage with 3 breakpoints referenced by name" />
{html -> f:format.raw()}
{fluid -> f:format.raw()}
{html}