Single Media selection


Shows a list with the possibility to assign a single asset from the media section to a page. Also allows to define a position, which can be handled later in the template.


Parameter Type Description
types string A comma separated list of available asset types to assign. Each item in the list must be one of document, image, video or audio.
displayOptions collection A collection of booleans, which defines to which positions the assets can be assigned (leftTop, top, rightTop, …)
defaultDisplayOption string Defines which of the displayOptions is the default one

Return value

See the Media object for available variables and functions.


<property name="document" type="single_media_selection">
        <title lang="en">Document</title>

Extended Example

<property name="image" type="single_media_selection">
        <title lang="en">Image</title>

        <param name="types" value="image,video"/>

        <param name="displayOptions" type="collection">
            <param name="leftTop" value="true"/>
            <param name="top" value="true"/>
            <param name="rightTop" value="true"/>
            <param name="left" value="true"/>
            <param name="middle" value="false"/>
            <param name="right" value="true"/>
            <param name="leftBottom" value="true"/>
            <param name="bottom" value="true"/>
            <param name="rightBottom" value="true"/>

        <param name="defaultDisplayOption" value="left"/>


{% set image = content.image %}
<img src="{{ image.thumbnails['400x400'] }}" alt="{{ image.title }}" title="{{ image.description|default(image.title) }}">

If your property defines displayOptions, you can access the selected displayOption via view.<property_name>.displayOptions:

{% set image = content.image %}

<div class="position-{{ view.image.displayOption }}">
    <img src="{{ image.thumbnails['400x400'] }}" alt="{{ image.title }}" title="{{ image.description|default(image.title) }}">

If you want to provide a link for downloading a document, you can use .url attribute or wrap it with the sulu_get_media_url to control which disposition header the target url should use:

<a href="{{ sulu_get_media_url(document.url, 'inline') }}">
    {{ document.title }}


For performance reasons you should never use the .url attribute to render images on your website. Always use thumbnails and configure your image formats to provide fast optimized cacheable images.