{% if not albumsArray is empty %}
<ul class="picture-list">
    {% for albumsObject in albumsArray %}
        {% if albumsObject.pictures[0] is defined %}
    <li>
        <a class="hover-overlay" href="{{ url('homepage') }}multimedia/albums/photos/{{ albumsObject.id }}/{{ albumsObject.name|trans|slugifyText }}" title="{{ albumsObject.name }}" onclick="{{ box.getEvent()|raw }}">
            <span class="more-pictures">{{ 'More'|trans }}</span>
        </a>
        <a class="picture-wrapper" href="{{ url('homepage') }}multimedia/albums/photos/{{ albumsObject.id }}/{{ albumsObject.name|trans|slugifyText }}" title="{{ albumsObject.name }}" onclick="{{ box.getEvent()|raw }}">
            <img src="{{ albumsObject.pictures[0].path|files('198_198') }}" alt="{{ albumsObject.name }}">
            <div class="ic_caption">{{ albumsObject.name }}</div>
        </a>
    </li>
        {% endif %}
    {% endfor %}
</ul>
{% endif %}