Usage

This new field type can be used in the same way as the odoo 'Image' field type.

from odoo import models
from odoo.addons.fs_image.fields import FSImage

class MyModel(models.Model):
    _name = 'my.model'

    image = FSImage('Image', max_width=1920, max_height=1920)

<record id="my_model_form" model="ir.ui.view">
    <field name="name">my.model.form</field>
    <field name="model">my.model</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field name="image" class="oe_avatar"/>
                </group>
            </sheet>
        </form>
    </field>
</record>

In the example above, the image will be resized to 1920x1920px if it is larger than that. The widget used in the form view will also allow the user set an 'alt' text for the image.

A mode advanced and useful example is the following:

from odoo import models
from odoo.addons.fs_image.fields import FSImage

class MyModel(models.Model):
    _name = 'my.model'

    image_1920 = FSImage('Image', max_width=1920, max_height=1920)
    image_128 = FSImage('Image', max_width=128, max_height=128, related='image_1920', store=True)

<record id="my_model_form" model="ir.ui.view">
    <field name="name">my.model.form</field>
    <field name="model">my.model</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field
                        name="image_1920"
                        class="oe_avatar"
                         options="{'preview_image': 'image_128', 'zoom': true}"
                     />
                </group>
            </sheet>
        </form>
    </field>
</record>

In the example above we have two fields, one for the original image and one for a thumbnail. As the thumbnail is defined as a related stored field it's automatically generated from the original image, resized at the given size and stored in the database. The thumbnail is then used as a preview image for the original image in the form view. The main advantage of this approach is that the original image is not loaded in the form view and the thumbnail is used instead, which is much smaller in size and faster to load. The 'zoom' option allows the user to see the original image in a popup when clicking on the thumbnail.

For convenience, the 'fs_image' module also provides a 'FSImageMixin' mixin class that can be used to add the 'image' and 'image_medium' fields to a model. It only define the medium thumbnail as a 128x128px image since it's the most common use case. When using an image field in a model, it's recommended to use this mixin class in order ensure that the 'image_medium' field is always defined. A good practice is to use the image_medium field as a preview image for the image field in the form view to avoid to overload the form view with a large image and consume too much bandwidth.

from odoo import models

class MyModel(models.Model):
    _name = 'my.model'
    _inherit = ['fs_image.mixin']

<record id="my_model_form" model="ir.ui.view">
    <field name="name">my.model.form</field>
    <field name="model">my.model</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field
                        name="image"
                        class="oe_avatar"
                        options="{'preview_image': 'image_medium', 'zoom': true}"
                    />
                </group>
            </sheet>
        </form>
    </field>
</record>

Changelog

Bug Tracker

Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us to smash it by providing a detailed and welcomed feedback.

Do not contact contributors directly about support or help with technical issues.

Credits

Maintainers

This module is maintained by the OCA.

OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

Current maintainer:

This module is part of the OCA/storage project on GitHub.

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.