<?xml version="1.0"?>
<t t-name="website_sale.shop_product_image">
        <div t-if="product_image._name == 'product.image' and product_image.embed_code" t-att-class="image_classes + ' ratio ratio-16x9'">
            <t t-out="product_image.embed_code"/>
        </div>
        <div t-elif="len(product_images) == 1 and website.product_page_image_layout != 'grid'" class="position-relative d-inline-flex overflow-hidden m-auto w-100">
            <span t-attf-class="o_ribbon #{ribbon._get_position_class()} z-1" t-attf-style="#{text_color and ('color: %s; ' % text_color)}#{bg_color and 'background-color:' + bg_color}" t-out="ribbon['name'] or ''"/>
            <div t-field="product_image.image_1920" name="o_img_with_max_suggested_width" class="d-flex align-items-start justify-content-center w-100 oe_unmovable" t-options="{                     'widget': 'image',                     'preview_image': 'image_1024',                     'class': 'oe_unmovable product_detail_img w-100 rounded',                     'alt-field': 'name',                     'zoom': product_image.can_image_1024_be_zoomed and 'image_1920',                 }"/>
        </div>
        <div t-else="" t-field="product_image.image_1920" t-att-class="image_classes + ' oe_unmovable'" t-options="{                 'widget': 'image',                 'preview_image': 'image_1024',                 'class': 'oe_unmovable product_detail_img w-100 mh-100 rounded',                 'alt-field': 'name',                 'zoom': product_image.can_image_1024_be_zoomed and 'image_1920',             }"/>
    </t>

    