Documentation · ViewHelper reference

XSD schema file | vhs master

Media / PictureViewHelper

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

Example

<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" />
</v:media.picture>

Browser Support

To have the widest Browser-Support you should consider using a polyfill like: http://scottjehl.github.io/picturefill/ /

  • Tag usage example

    <v:media.picture additionalAttributes="{foo: 'bar'}" data="{foo: 'bar'}" src="NULL" alt="NULL" title="NULL">
    	<!-- tag content - may be ignored! -->
    </v:media.picture>
  • Inline usage example

    {v:media.picture(additionalAttributes: {foo: 'bar'}, data: {foo: 'bar'}, src: 'NULL', alt: 'NULL', title: 'NULL')}

Arguments

Argument Description Type
additionalAttributes

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

array
alt

Text for the alt attribute.

string
data

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

array
src

Path to the image.

string
title

Text for the title attribute.

string
Required attribute

Revision history