<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ppm="http://typo3.org/ns/Pixelant/PxaProductManager/ViewHelpers"
      xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="item-img">
    <f:if condition="{image}">
        <f:then>
            <div class="item-image">
                <sms:image image="{image}"
                           srcset="{settings.images.listView.maxWidth/2}, {settings.images.listView.maxWidth}, {settings.images.listView.maxWidth*1.5}"
                           sizes="(max-width: 719px) 50vw,(max-width: 1023px) 33vw, (max-width: 1439px) 25vw, 20vw"
                           width="{settings.images.listView.maxWidth}"
                           alt="{title}"
                           additionalAttributes="{loading: 'lazy'}"
                           picturefill="false"/>
            </div>
        </f:then>
        <f:else>
            <div class="item-image item-image--placeholder">
                <ppm:svg source="{f:uri.image(image: category.image)}"></ppm:svg>
            </div>
        </f:else>
    </f:if>
</div>

</html>
