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
min	string	The minimum number of selected media
max	string	The maximum number of selected media
sortable	bool	Defines if the user should be able to sort the selected items. Default value is true.

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 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 to provide fast optimized cacheable images.