ViewHelper Documentation


Renders a picture element with different images/sources for specific media breakpoints


<v:media.picture src="fileadmin/some-image.png" alt="Some Image">
    <v:media.source media="(min-width: 1200px)" width="500c" height="500c" />
    <v:media.source media="(min-width: 992px)" width="300c" height="300c" />
    <v:media.source media="(min-width: 768px)" width="200c" height="200c" />
    <v:media.source width="80c" height="80c" />

Browser Support

To have the widest Browser-Support you should consider using a polyfill like:


additionalAttributes anySimpleType

Additional tag attributes. They will be added directly to the resulting HTML tag.

data anySimpleType

Additional data-* attributes. They will each be added with a "data-" prefix.

src string

Path to the image.

alt string

Text for the alt tag.

title string

Text for the alt tag.

ViewHelper Resources

Schema Resources