media.picture¶
Renders a picture element with different images/sources for specific media breakpoints
Example¶
<v:media.picture src="fileadmin/some-image.png" alt="Some Image" loading="lazy">
<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" />
</v:media.picture>
Browser Support¶
To have the widest Browser-Support you should consider using a polyfill like: http://scottjehl.github.io/picturefill
Arguments¶
additionalAttributes¶
- DataType
- mixed
- Required
- false
- Description
- Additional tag attributes. They will be added directly to the resulting HTML tag.
data¶
- DataType
- mixed
- Required
- false
- Description
- Additional data-* attributes. They will each be added with a “data-” prefix.
aria¶
- DataType
- mixed
- Required
- false
- Description
- Additional aria-* attributes. They will each be added with a “aria-” prefix.
src¶
- DataType
- mixed
- Required
- false
- Description
- Path to the image or FileReference.
treatIdAsReference¶
- DataType
- boolean
- Required
- false
- Description
- When TRUE treat given src argument as sys_file_reference record.
alt¶
- DataType
- string
- Required
- false
- Description
- Text for the alt attribute.
title¶
- DataType
- string
- Required
- false
- Description
- Text for the title attribute.
class¶
- DataType
- string
- Required
- false
- Description
- CSS class(es) to set.
loading¶
- DataType
- string
- Required
- false
- Description
- Native lazy-loading for images. Can be “lazy”, “eager” or “auto”