Alla inlägg Personer Utmärkelser

Etiketter (Visa alla)

Om detta forum

Hjälp

How to show Thumbnail image in list view?

image sale.order.line

10 Svar

32058 Vyer

Komala Kiran Kumar. Parepalli

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.

Komala Kiran Kumar. Parepalli

Författare Bästa svar

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', {

ClueLogics Technologies Pvt. Ltd.

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

Komala Kiran Kumar. Parepalli

Författare

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

Marcel van der Boom

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]

Tekse Arpad

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

TheBrush

So do I :( same result of TArpi

Jhon Felipe Urrego Mejia

same to me

Anton Chepurov

Just Ctrl+R the page, for your JS changes to break in.

Nhomar Hernandez

You can use this module:

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

It is ready to use.

Regards.

Stefan Reisich

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

Huynh Huu Tho

Hi all,

This is code :

"product_view.xml"

       <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 ?

Njuter du av diskussionen? Läs inte bara, delta också!

Skapa ett konto idag för att ta del av exklusiva funktioner och engagera dig i vår fantastiska community!

Registrera dig

Relaterade inlägg	Svar	Vyer
Best product image size and resolution? Löst image	1 juli 25	6403
How to add a sequence a field? Löst sale.order.line	2 dec. 24	24546
add product upon saving sales order sale.order.line	0 sep. 24	2835
Odoo 17 remove product_uom from sale_order_lines sale.order.line	3 aug. 24	4752
invoice/sales sale.order.line	0 feb. 24	3883

Denna fråga har flaggats

Njuter du av diskussionen? Läs inte bara, delta också!