{% if not albumsArray is empty %}
    <ul class="albums-list" hover-overlaystyle="font-size:0;">
        {% for albumsObject in albumsArray %}
            <li style="height:310px;width: auto;display: inline-block;margin-left:17px;margin-bottom:17px;">
                <a class="hover-overlay" href="{{ url('homepage') }}multimedia/albums/photos/{{ albumsObject.id }}/{{ albumsObject.name|trans|slugifyText }}" title="{{ albumsObject.name }}">
                    <span class="more-pictures">{{ 'More'|trans }}</span>
                </a>
                <a class="picture-wrapper" href="{{ url('homepage') }}multimedia/albums/photos/{{ albumsObject.id }}/{{ albumsObject.name|trans|slugifyText }}" style="display: block;height:100%" title="{{ albumsObject.name }}">
                    <img src="{{ albumsObject.pictures[0].path|files }}" style="height:100%;" alt="{{ albumsObject.name|raw }}">
                </a>
            </li>
        {% endfor %}
    </ul>
{% endif %}