diff --git a/addons/web/models/ir_qweb.py b/addons/web/models/ir_qweb.py
index 875899f7d57..51694a3bc42 100644
--- a/addons/web/models/ir_qweb.py
+++ b/addons/web/models/ir_qweb.py
@@ -21,20 +21,12 @@ class Image(models.AbstractModel):
_description = 'Qweb Field Image'
_inherit = 'ir.qweb.field.image'
- @api.model
- def record_to_html(self, record, field_name, options):
- assert options['tagName'] != 'img',\
- "Oddly enough, the root tag of an image field can not be img. " \
- "That is because the image goes into the tag, or it gets the " \
- "hose again."
-
- if options.get('qweb_img_raw_data', False):
- return super(Image, self).record_to_html(record, field_name, options)
-
- aclasses = ['img', 'img-fluid'] if options.get('qweb_img_responsive', True) else ['img']
- aclasses += options.get('class', '').split()
- classes = ' '.join(map(escape, aclasses))
+ def _get_src_urls(self, record, field_name, options):
+ """Considering the rendering options, returns the src and data-zoom-image urls.
+ :return: src, src_zoom urls
+ :rtype: tuple
+ """
max_size = None
if options.get('resize'):
max_size = options.get('resize')
@@ -56,6 +48,30 @@ class Image(models.AbstractModel):
src = '/web/image/%s/%s/%s%s/%s?unique=%s' % (record._name, record.id, options.get('preview_image', field_name), max_size, url_quote(filename), sha)
+ src_zoom = None
+ if options.get('zoom') and getattr(record, options['zoom'], None):
+ src_zoom = '/web/image/%s/%s/%s%s/%s?unique=%s' % (record._name, record.id, options['zoom'], max_size, url_quote(filename), sha)
+ elif options.get('zoom'):
+ src_zoom = options['zoom']
+
+ return src, src_zoom
+
+ @api.model
+ def record_to_html(self, record, field_name, options):
+ assert options['tagName'] != 'img',\
+ "Oddly enough, the root tag of an image field can not be img. " \
+ "That is because the image goes into the tag, or it gets the " \
+ "hose again."
+
+ if options.get('qweb_img_raw_data', False):
+ return super(Image, self).record_to_html(record, field_name, options)
+
+ aclasses = ['img', 'img-fluid'] if options.get('qweb_img_responsive', True) else ['img']
+ aclasses += options.get('class', '').split()
+ classes = ' '.join(map(escape, aclasses))
+
+ src, src_zoom = self._get_src_urls(record, field_name, options)
+
if options.get('alt-field') and getattr(record, options['alt-field'], None):
alt = escape(record[options['alt-field']])
elif options.get('alt'):
@@ -63,12 +79,6 @@ class Image(models.AbstractModel):
else:
alt = escape(record.display_name)
- src_zoom = None
- if options.get('zoom') and getattr(record, options['zoom'], None):
- src_zoom = '/web/image/%s/%s/%s%s/%s?unique=%s' % (record._name, record.id, options['zoom'], max_size, url_quote(filename), sha)
- elif options.get('zoom'):
- src_zoom = options['zoom']
-
itemprop = None
if options.get('itemprop'):
itemprop = options['itemprop']
@@ -96,3 +106,11 @@ class Image(models.AbstractModel):
img.append('/>')
return u''.join(img)
+
+class ImageUrlConverter(models.AbstractModel):
+ _description = 'Qweb Field Image'
+ _inherit = 'ir.qweb.field.image_url'
+
+ def _get_src_urls(self, record, field_name, options):
+ image_url = record[options.get('preview_image', field_name)]
+ return image_url, options.get("zoom", None)
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 3e49fdbf250..8ebde6cbda9 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1955,6 +1955,45 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
},
});
+var CharImageUrl = AbstractField.extend({
+ className: 'o_field_image',
+ description: _lt("Image"),
+ supportedFieldTypes: ['char'],
+ placeholder: "/web/static/src/img/placeholder.png",
+
+ _renderReadonly: function () {
+ var self = this;
+ const url = this.value;
+ if (url) {
+ 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
+ const width = this.nodeOptions.size ? this.nodeOptions.size[0] : this.attrs.width;
+ const 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.one('error', function () {
+ $img.attr('src', self.placeholder);
+ self.displayNotification({
+ type: 'info',
+ message: _t("Could not display the specified image url."),
+ });
+ });
+ }
+
+ return this._super.apply(this, arguments);
+ },
+});
+
var KanbanFieldBinaryImage = FieldBinaryImage.extend({
// In kanban views, there is a weird logic to determine whether or not a
// click on a card should open the record in a form view. This logic checks
@@ -1966,6 +2005,17 @@ var KanbanFieldBinaryImage = FieldBinaryImage.extend({
events: {},
});
+var KanbanCharImageUrl = CharImageUrl.extend({
+ // In kanban views, there is a weird logic to determine whether or not a
+ // click on a card should open the record in a form view. This logic checks
+ // if the clicked element has click handlers bound on it, and if so, does
+ // not open the record (assuming that the click will be handled by someone
+ // else). In the case of this widget, there are clicks handler but they
+ // only apply in edit mode, which is never the case in kanban views, so we
+ // simply remove them.
+ events: {},
+});
+
var FieldBinaryFile = AbstractFieldBinary.extend({
description: _lt("File"),
template: 'FieldBinaryFile',
@@ -3539,6 +3589,8 @@ return {
AbstractFieldBinary: AbstractFieldBinary,
FieldBinaryImage: FieldBinaryImage,
KanbanFieldBinaryImage: KanbanFieldBinaryImage,
+ CharImageUrl: CharImageUrl,
+ KanbanCharImageUrl: KanbanCharImageUrl,
FieldBoolean: FieldBoolean,
BooleanToggle: BooleanToggle,
FieldChar: FieldChar,
diff --git a/addons/web/static/src/js/fields/field_registry.js b/addons/web/static/src/js/fields/field_registry.js
index ef174702579..e96ee705b77 100644
--- a/addons/web/static/src/js/fields/field_registry.js
+++ b/addons/web/static/src/js/fields/field_registry.js
@@ -43,7 +43,9 @@ registry
.add('CopyClipboardText', basic_fields.TextCopyClipboard)
.add('CopyClipboardChar', basic_fields.CharCopyClipboard)
.add('image', basic_fields.FieldBinaryImage)
+ .add('image_url', basic_fields.CharImageUrl)
.add('kanban.image', basic_fields.KanbanFieldBinaryImage)
+ .add('kanban.image_url', basic_fields.KanbanCharImageUrl)
.add('binary', basic_fields.FieldBinaryFile)
.add('pdf_viewer', basic_fields.FieldPdfViewer)
.add('monetary', basic_fields.FieldMonetary)
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 76783a90d31..8debec81b3a 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -24,6 +24,9 @@ var _t = core._t;
// Base64 images for testing purpose
const MY_IMAGE = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const PRODUCT_IMAGE = 'R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7';
+const FR_FLAG_URL = '/base/static/img/country_flags/fr.png';
+const EN_FLAG_URL = '/base/static/img/country_flags/gb.png';
+
QUnit.module('fields', {}, function () {
@@ -2889,6 +2892,131 @@ QUnit.module('basic_fields', {
form.destroy();
});
+ /**
+ * Same tests than for Image fields, but for Char fields with image_url widget.
+ */
+ QUnit.module('FieldChar-ImageUrlWidget', {
+ beforeEach: function () {
+ // specific sixth partner data for image_url widget tests
+ this.data.partner.records.push({id: 6, bar: false, foo: FR_FLAG_URL, int_field: 5, qux: 0.0, timmy: []});
+ },
+ });
+
+ QUnit.test('image fields are correctly rendered', async function (assert) {
+ assert.expect(6);
+
+ const form = await createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
',
+ res_id: 6,
+ async mockRPC(route, args) {
+ if (route === FR_FLAG_URL) {
+ assert.ok(true, "the correct route should have been called.");
+ }
+ return this._super.apply(this, arguments);
+ },
+ });
+
+ assert.hasClass(form.$('div[name="foo"]'), 'o_field_image',
+ "the widget should have the correct class");
+ assert.containsOnce(form, 'div[name="foo"] > img',
+ "the widget should contain an image");
+ assert.hasClass(form.$('div[name="foo"] > img'), 'img-fluid',
+ "the image should have the correct class");
+ assert.hasAttrValue(form.$('div[name="foo"] > img'), 'width', "90",
+ "the image should correctly set its attributes");
+ assert.strictEqual(form.$('div[name="foo"] > img').css('max-width'), "90px",
+ "the image should correctly set its attributes");
+ form.destroy();
+ });
+
+ QUnit.test('image_url widget in subviews are loaded correctly', async function (assert) {
+ assert.expect(6);
+
+ this.data.partner_type.fields.image = {name: 'image', type: 'char'};
+ this.data.partner_type.records[0].image = EN_FLAG_URL;
+ this.data.partner.records[5].timmy = [12];
+
+ const form = await createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '',
+ res_id: 6,
+ async mockRPC(route) {
+ if (route === FR_FLAG_URL) {
+ assert.step("The view's image should have been fetched");
+ return 'wow';
+ }
+ if (route === EN_FLAG_URL) {
+ assert.step("The dialog's image should have been fetched");
+ return;
+ }
+ return this._super.apply(this, arguments);
+ },
+ });
+ assert.verifySteps(["The view's image should have been fetched"]);
+
+ assert.containsOnce(form, 'tr.o_data_row',
+ 'There should be one record in the many2many');
+
+ // Actual flow: click on an element of the m2m to get its form view
+ await testUtils.dom.click(form.$('tbody td:contains(gold)'));
+ assert.strictEqual($('.modal').length, 1,
+ 'The modal should have opened');
+ assert.verifySteps(["The dialog's image should have been fetched"]);
+
+ form.destroy();
+ });
+
+ QUnit.test('image fields in x2many list are loaded correctly', async function (assert) {
+ assert.expect(2);
+
+ this.data.partner_type.fields.image = {name: 'image', type: 'char'};
+ this.data.partner_type.records[0].image = EN_FLAG_URL;
+ this.data.partner.records[5].timmy = [12];
+
+ const form = await createView({
+ View: FormView,
+ model: 'partner',
+ data: this.data,
+ arch: '
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
',
+ res_id: 6,
+ async mockRPC(route) {
+ if (route === EN_FLAG_URL) {
+ assert.ok(true, "The list's image should have been fetched");
+ return;
+ }
+ return this._super.apply(this, arguments);
+ },
+ });
+
+ assert.containsOnce(form, 'tr.o_data_row',
+ 'There should be one record in the many2many');
+
+ form.destroy();
+ });
+
QUnit.module('JournalDashboardGraph', {
beforeEach: function () {
_.extend(this.data.partner.fields, {
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index b9e21640add..c7ed6fa16b8 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -250,8 +250,8 @@
business_conference.jpgir.ui.view
- binary
-
+ url
+ /website/static/src/img/library/business_conference.jpg
diff --git a/addons/website/models/website_visitor.py b/addons/website/models/website_visitor.py
index ca54d20d883..b4eccd5264e 100644
--- a/addons/website/models/website_visitor.py
+++ b/addons/website/models/website_visitor.py
@@ -38,7 +38,7 @@ class WebsiteVisitor(models.Model):
# localisation and info
country_id = fields.Many2one('res.country', 'Country', readonly=True)
- country_flag = fields.Binary(related="country_id.image", string="Country Flag")
+ country_flag = fields.Char(related="country_id.image_url", string="Country Flag")
lang_id = fields.Many2one('res.lang', string='Language', help="Language from the website when visitor has been created")
timezone = fields.Selection(_tz_get, string='Timezone')
email = fields.Char(string='Email', compute='_compute_email_phone')
diff --git a/addons/website/tests/test_performance.py b/addons/website/tests/test_performance.py
index 466167b436f..48763dc75b9 100644
--- a/addons/website/tests/test_performance.py
+++ b/addons/website/tests/test_performance.py
@@ -33,8 +33,6 @@ class UtilPerf(HttpCase):
class TestStandardPerformance(UtilPerf):
def test_10_perf_sql_img_controller(self):
self.authenticate('demo', 'demo')
- url = '/web/image/res.country/4/image'
- self.assertEqual(self._get_url_hot_query(url), 4)
url = '/web/image/res.users/2/image_256'
self.assertEqual(self._get_url_hot_query(url), 8)
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index 9ec67f4503f..6a07151fd66 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -82,6 +82,7 @@
+
@@ -109,10 +110,10 @@
-