Display settings

Use full width
Color scheme of code blocks:
dark light
Make settings permanent

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: true
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: true
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"