[REF] website_sale: multi-image notebook design

addons/website_sale/static/src/less/website_sale_backend.less

+.o_website_sale_image_list .o_kanban_view.o_kanban_ungrouped.o_attachments_previews {
+    width: auto;
+
+    .o_kanban_record.o_attachment.o_website_sale_image_card {
+        border: none;
+        background: none;
+        margin: 0 0 @grid-gutter-width*0.2;
+        padding: @o-mail-attachment-margin;
+        .o-flex(0, 1, 50%);
+
+        @media (min-width: @screen-sm-min) {
+            .o-flex(0, 0, percentage(1/3));
+        }
+
+        @media (min-width: @screen-md-min) {
+            .o-flex(0, 0, percentage(1/5));
+        }
+
+        @media (min-width: @screen-lg-min){
+            .o-flex(0, 0, percentage(1/6));
+        }
+
+        .o_image_box {
+            padding-top: 50%;
+
+            @media (min-width: @screen-sm-min) {
+                padding-top: 75%;
+            }
+        }
+
+        .o_image_overlay {
+            bottom: 16%;
+            background: fade(@gray-darker, 20%);
+        }
+
+        .o_website_sale_image_card_title {
+            .o-text-overflow(block);
+            padding:6px;
+            position: relative;
+            background: @gray-lighter;
+            color:@headings-color;
+        }
+
+        .o_website_sale_image_card_remove, .o_website_sale_image_card_size {
+            .o-position-absolute(0, 0);
+            border-radius: 0 2px;
+        }
+
+        .o_website_sale_image_card_size {
+            left: 0;
+            right: auto;
+            border-radius: 0 0 2px;
+            font-weight: normal;
+            font-size: @font-size-small - 1;
+
+            &.label-normal {
+                background-color: @gray-lighter;
+                color: @text-color;
+            }
+        }
+    }
+}
\ No newline at end of file

addons/website_sale/views/product_views.xml

@@ -89,20 +89,36 @@
                 </button>
             </button>
             <xpath expr="//notebook[last()]" position="inside">
-                <page string="Images" groups="base.group_no_one">
-                    <field name="product_image_ids" mode="kanban" context="{'default_name': name, 'default_product_tmpl_id': active_id}">
-                        <kanban string="Product Images">
+                <page string="Images">
+                    <field name="product_image_ids" class="o_website_sale_image_list" context="{'default_name': name, 'default_product_tmpl_id': active_id}">
+                        <kanban string="Product Images" class="o_attachments_previews">
                             <field name="name"/>
-                            <field name="image" />
+                            <field name="image"/>
                             <templates>
                                 <t t-name="kanban-box">
-                                    <div class="oe_kanban_global_click">
-                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times pull-right"/>
-                                        <div class="o_kanban_image">
-                                            <img t-if="record.image.raw_value" t-att-src="'data:image/png;base64,'+record.image.raw_value"/>
-                                        </div>
-                                        <div class="oe_kanban_details">
-                                            <field name="name"/>
+                                    <div class="o_attachment oe_kanban_global_click o_website_sale_image_card">
+                                        <div class="o_attachment_wrap">
+                                            <div class="o_image_box">
+                                                <div class="o_attachment_image" t-att-style="'background-image:url(data:image/png;base64,'+record.image.raw_value +')'"/>
+                                                <div t-attf-class="o_image_overlay" t-att-title="record.name.value"/>
+                                                <div class="o_website_sale_image_card_title" t-att-title="record.name.value">
+                                                    <field name="name"/>
+                                                </div>
+                                            </div>
+
+                                            <t t-set="size" t-value="[record.image.value][0]"/>
+                                            <t t-set="size_status" t-value="'normal'" t-if="size.indexOf('Bytes') !== -1 or ( size.indexOf('Kb') !== -1 and size[2]=='.')"/>
+                                            <t t-set="size_status" t-value="'warning'" t-elif="( size.indexOf('Kb') !== -1 and size[3]=='.')"/>
+                                            <t t-set="size_status" t-value="'danger'"  t-else=""/>
+
+                                            <t t-set="message" t-value="'Acceptable file size'" t-if="size_status == 'normal'"></t>
+                                            <t t-set="message" t-value="'Huge file size. The image should be optimized/reduced.'" t-elif="size_status == 'warning'"></t>
+                                            <t t-set="message" t-value="'Optimization required! Reduce the image size or increase your compression settings.'" t-else=""></t>
+
+                                            <span t-attf-class="o_website_sale_image_card_size label label-#{size_status}" t-att-title="message">
+                                                <t t-esc="record.image.value"/>
+                                            </span>
+                                            <a t-if="!read_only_mode" type="delete" class="btn btn-xs btn-default o_website_sale_image_card_remove"><i class="fa fa-trash"/></a>
                                         </div>
                                     </div>
                                 </t>

addons/website_sale/views/templates.xml

@@ -5,6 +5,7 @@
         <xpath expr="." position="inside">
             <script type="text/javascript" src="/website_sale/static/src/js/website_sale_backend.js"></script>
             <link rel="stylesheet" href="/website_sale/static/src/less/website_sale_dashboard.less"/>
+            <link rel="stylesheet" href="/website_sale/static/src/less/website_sale_backend.less"/>
         </xpath>
     </template>