<article class="portfolio-list__item animated zoomIn">
    <a id="portfolioListLink-{{ item.id }}" class="portfolio-list__link" href="javascript:;" role="button">
        {% if item.preview_image.extension == 'svg' %}
            <img 
                class="portfolio-list__image"
                src="{{ item.preview_image.path }}"
                alt="{{ item.preview_image.description }}">
        {% else %}
            <img
                class="portfolio-list__image"
                src="{{ item.preview_image.path|resize(__SELF__.property('width'),auto,{ mode: 'exact' }) }}"
                srcset="
                    {% for width in __SELF__.property('widths') %}
                        {{ item.preview_image.path|resize(width,auto,{ mode: 'exact' }) }} {{ width }}w,
                        {{ item.preview_image.path|resize(2 * width,auto,{ mode: 'exact' }) }} {{ 2 * width }}w,
                    {% endfor %}"
                sizes="{{ __SELF__.property('sizes') }}"
                alt="{{ item.preview_image.description }}">
        {% endif %}
        <h5 class="portfolio-list__title">{{ item.title }}</h5>
    </a>
</article>