[REF] website_sale: multi-image modal design

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

@@ -59,4 +59,28 @@
             }
         }
     }
+}
+
+.o_website_sale_image_modal {
+    .o_website_sale_image_modal_container {
+        border-left: 1px solid @gray-lighter-darker;
+
+        .o_field_image {
+            margin-bottom: 0;
+            box-shadow: 0 2px 10px @gray-lighter-dark;
+
+            > img {
+                border: 1px solid @gray-lighter-darker;
+                min-height: 200px;
+                max-height: 350px; // Fallback for browsers that dosn't support responsive units
+                max-height: 50vh;
+                width: auto;
+            }
+
+            .o_form_image_controls {
+                .o-hover-opacity(0.7, 1);
+                padding: 2%;
+            }
+        }
+    }
 }
\ No newline at end of file

addons/website_sale/views/product_views.xml

@@ -238,14 +238,18 @@
         <field name="model">product.image</field>
         <field name="arch" type="xml">
             <form string="Product Images">
-                <sheet>
-                    <field name="image" widget="image" class="oe_avatar" options="{'size': [90, 90]}"/>
-                    <div class="oe_title">
-                        <label class="oe_edit_only" for="name" string="Image Name"/>
-                        <h1><field name="name" placeholder="Image Name" required="True"/></h1>
-                        <field name="product_tmpl_id" invisible="1"/>
+                <div class="row o_website_sale_image_modal">
+                    <div class="col-sm-6 col-lg-5">
+                        <div class="oe_title">
+                            <label class="small text-muted" for="name" string="Image Name"/>
+                            <h2><field name="name" placeholder="Image Name" required="True"/></h2>
+                            <field name="product_tmpl_id" invisible="1"/>
+                        </div>
                     </div>
-                </sheet>
+                    <div class="col-sm-6 col-lg-7 text-center o_website_sale_image_modal_container">
+                        <field name="image" widget="image"/>
+                    </div>
+                </div>
             </form>
         </field>
     </record>