Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

5

How to show Thumbnail image in list view?

By
komala kiran kumar. Parepalli
on 6/5/13, 2:42 AM 8,795 views

Hi

I am here in a need to display the binary field which will be most propably an image should be displayed in a 50px*50px sized Thumbnail image.

Can any one help me to resolve this.

Situation: In sale order line when i select a product it should auto-populate the product image as well. I achieved this functionality to auto-populate the image. And this image is displaying as widget until in form view of sale order line. But once when i click on "save and close" on sale order line form, in the list view of sale order it is showing as some Download(size) like thing. Even i specified as widget="image" in tree view of order line.

Now i want to show this image as widget in list view also. Any solution?

Thanks in Advance.

This question has been included in the official documentation.
7

Hi,

There is no actual functionality to achieve image widget functionality in the list view.

List view is designed in such a way that will show all binary files as Download(size) format irrespective of the file type and widget specified. To achieve this I have modified the code in web module directly as I don't know how to create a customized module to add js code.

The code to be added is:

The file need to be modified is: /addons/web/static/src/js/view_list.js:

Line 2066:

  'button': 'instance.web.list.Button',
 +'field.image': 'instance.web.list.FieldBinaryImage',
  'field.many2onebutton': 'instance.web.list.Many2OneButton',

Line 2230:

            href: download_url,
            size: instance.web.binary_to_binsize(value),
        });
    }
});
+
+instance.web.list.FieldBinaryImage = instance.web.list.Column.extend({</br>
+       /**
+     * Return a image to the binary field of specified as widget image</br>
+    *
+     * @private
+     */
+    _format: function (row_data, options) {
+            var placeholder= "/web/static/src/img/placeholder.png";
+        var value = row_data[this.id].value;
+        var download_url;
+        if (value && value.substr(0, 10).indexOf(' ') == -1) {
+            download_url = "data:image/png;base64," + value;
+       }
+        else {
+               download_url = placeholder;
+        }
+
+       return _.template('<image src="<%-src%>" width="30px" height="30px"/>', {
+            src: download_url,
+       });
+    }
+});
+
instance.web.list.ProgressBar = instance.web.list.Column.extend({
/**
* Return a formatted progress bar display
*
* @private
*/
_format: function (row_data, options) {

Note:

When you are trying this code to acheive functionality, don't forget to specify widget="image" in view definition and in this post it is not allowing me to add image tag in code it is converting into image icon.

return _.template('Image tag with src="<%-src%>" and width as 30px and height as 30 px', {
This question has been included in the official documentation.
2
Marcel van der Boom
On 9/23/13, 3:09 PM

I created a small module which does exactly this. The module has just one file which is relevant.

static/src/js/view_list.js:

openerp.listview_images = function(instance) {
    /* Add a new mapping to the registry for image fields */
    instance.web.list.columns.add('field.image','instance.web.list.FieldBinaryImage');

    /* Define a method similar to the one for forms to render image fields */
    instance.web.list.FieldBinaryImage = instance.web.list.Column.extend({
    /**
     * Return a image to the binary field of specified as widget image
     *
     * @private
     */
    _format: function (row_data, options) {
            var placeholder = "/web/static/src/img/placeholder.png";
            var value = row_data[this.id].value;
            var img_url = placeholder;

            if (value && value.substr(0, 10).indexOf(' ') == -1) {
        /* Data inline */
        /* FIXME: can we get the mimetype from the data? */
        img_url = "data:image/png;base64," + value;
        } else {
        /* Data by URI (presumably slow) */
        img_url = instance.session.url('/web/binary/image', {model: options.model, field: this.id, id: options.id});
            }
        /* FIXME: move the 30px stuff to something templateable */
        return _.template('<image src="<%-src%>" width="30px" height="30px"/>', {
        src: img_url,
        });
    }
    });
}

The module is available on github, but I can't post link. [github.com / hsd / listview-images]

HI! I added your module from github to our system, but is showing only a Download link (with the size of the image), not the Thumbnail. Can you help me, what should I do? Thanks, TArpi

Tekse Arpad
on 1/14/14, 8:19 PM

So do I :( same result of TArpi

TheBrush
on 2/6/14, 8:14 AM

same to me

Jhon Felipe Urrego Mejia
on 4/4/14, 9:15 PM
This question has been included in the official documentation.
1

Sandeep

--Sandeep--
6083
| 6 5 8
Delhi, India
--Sandeep--
Python OpenERP Developer http://in.linkedin.com/pub/sandeep-rana/3b/a16/786/
Sandeep
On 6/12/13, 3:11 AM

Hi

your image field will be a binary field now if you want to show it in list view you can use widget functionality for it like

       <field name="my_image' widget="image"/>

Thanks
Sandeep

When i specified widget="image" in list view it doesn't worked until i modified file with given code

komala kiran kumar. Parepalli
on 6/12/13, 3:18 AM
This question has been included in the official documentation.
1

Stefan Reisich

--Stefan Reisich--
831
| 7 7 8
Pfungstadt, Germany
--Stefan Reisich--
Stefan Reisich
On 9/20/13, 8:46 AM

here you can see how to implement this in a module instead of making changes to the source, which will be deleted after every update: https://accounts.openerp.com/forum/Help-1/question/483

This question has been included in the official documentation.
0
Nhomar Hernandez
On 9/4/15, 4:29 AM

You can use this module:

https://www.odoo.com/apps/modules/8.0/web_tree_image/ 

It is ready to use.

Regards.

This question has been included in the official documentation.
0
Huynh Huu Tho
On 1/13/14, 4:47 AM

Hi all,

This is code :

"product_view.xml"

<record id="product_category_tree_view" model="ir.ui.view">

       <field name="name">product.category.tree</field>

        <field name="model">product.category</field>

        <field name="field_parent">child_id</field>

        <field name="arch" type="xml">

            <tree toolbar="True" string="Product Categories">

                <field name="image" widget="image"/>

                <field name="name"/>

            </tree>

     </field>

</record>

field image in class product_category()

'image': fields.binary("Image",help="This field holds the image used as image for the product, limited to 1024x1024px."),

"file product.js"

openerp.product = function(instance) {

instance.web.list.Binary.include({

    _format: function (row_data, options) {

        var placeholder = "/web/static/src/img/placeholder.png";

        var value = row_data[this.id].value;

        var img_url = placeholder;

        if (value && value.substr(0, 10).indexOf(' ') == -1) {

            img_url = "data:image/png;base64," + value;

        } else {

            img_url = instance.session.url('/web/binary/image', {model: options.model, field: this.id, id: options.id});

        }

        return _.template('<image src="<%-src%>" width="80px"/>', {

            src: img_url

        });
    }
});

}

when I click on the "Products by Category", then it does:

this is show

___________________Image__________I__________Name

jdhdkjashdkashdkashdkas l Category 1

jhskjdahsdkashkdashkkadjkas l Category 2

i want column image show image thumb ?

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

5 follower(s)

Stats

Asked: 6/5/13, 2:42 AM
Seen: 8795 times
Last updated: 7/22/16, 2:57 PM