Media selection

Description

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

Parameters

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

Example

<property name="images" type="media_selection">
    <meta>
        <title lang="en">Images</title>
    </meta>

    <params>
        <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>

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

Twig

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

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

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

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>:doc:../twig-extensions/functions/sulu_get_media_url to control which disposition header the target url should use:

<ul>
    {% for document in content.documents %}
        <li>
            <a href="{{ document.url }}>
                {{ document.title }}
            </a>
        </li>
    {% endfor %}
</ul>

Note

For performance reasons you should never use the .url attribute to render images on your website. Always use thumbnails and <configure your image formats>:doc:../../../book/image-formats to provide fast optimized cacheable images.