[IMP] web: override size attributes in image widget

Size attributes (e.g. `max-width`) are sometimes set in css (i.e. with classes,
see `oe_avatar`).

They must however be overriden if they are specified on the widget.

Example:
  <field name="image" widget="image" class="oe_avatar" options="{'size': [180, 180]}"/>

The `max-width: 90px` set on oe_avatar must be overriden in this case.

Note that the attribute `img_width` and `img_height` have been depreciated as
`width` and `height` are fulfilling the exact same purpose.

1 files changed, 12 insertions, 0 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 3a5a1537387..ac005599bdb 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1167,6 +1167,18 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
             }
         }
         var $img = $(qweb.render("FieldBinaryImage-img", {widget: this, url: url}));
+        // override css size attributes (could have been defined in css files)
+        // if specified on the widget
+        var width = this.nodeOptions.size ? this.nodeOptions.size[0] : this.attrs.width;
+        var height = this.nodeOptions.size ? this.nodeOptions.size[1] : this.attrs.height;
+        if (width) {
+            $img.attr('width', width);
+            $img.css('max-width', width + 'px');
+        }
+        if (height) {
+            $img.attr('height', height);
+            $img.css('max-height', height + 'px');
+        }
         this.$('> img').remove();
         this.$el.prepend($img);
         $img.on('error', function () {