I have an one2many image field that currently shows images in a tabular style. What I want to do is to show it in a card style like a kanban card or in a thumbnail style view.

 

This is my current code:

    class VariantsLines(models.Model):
    _inherit = 'product.variants.lines'

    product_image_360_ids = fields.One2many('product.image.360', 'product_tmpl_id', string='Images')
    display_360_image = fields.Boolean(string='Display 360 Image')


class ProductImage360(models.Model):
    _name = 'product.image.360'
    _order = 'sequence'

    name = fields.Char(string='Name', readonly=False)
    image = fields.Binary(string='Image', attachment=True, readonly=False)
    product_tmpl_id = fields.Many2one('product.template', string='Related Product', copy=True)
    sequence = fields.Integer(string="Sequence", readonly=False)

view.xml

    <field name="inherit_id" ref="jewellery.view_product_variants_lines_form"/>
            <field name="arch" type="xml">
                <xpath expr="//form" position="inside">
                    <div>
                        <group>
                            <field name="display_360_image"/>
                        </group>

                        <group string="Images for 360 view" attrs="{'invisible': [('display_360_image', '=', False)]}">
                            <field name="product_image_360_ids" nolabel="1"
                                   context="{'default_product_tmpl_id': active_id}">
                                <tree create="true" editable="bottom">
                                    <field name="sequence" widget="handle" readonly="0"/>
                                    <field name="name" readonly="0"/>
                                    <field name="image" widget="image" class="oe_left oe_avatar" readonly="0"/>
                                </tree>
                            </field>
                        </group>
                    </div>
                </xpath>
            </field>