Image Generation With Different Sizes
Huge images are impractical for any website. It increases the page size and slows down accordingly. This leads to terrible SEO rankings and guest unhappiness. This recipe explores how to create images of different sizes. Using the right images can reduce the page size of your website and further improve page stacking time.
Odoo uses the image.mixin class to generate images of different sizes. To do this, your model should inherit image.mixin. The image.mixin model is an AbstractModel, so its tables are not in the database. I really want to include it in my model to use it.
This image.mixin allows you to save images with a maximum resolution of 1,920x1,920. If you save an image with a resolution higher than 1920x1920, Odoo will scale it down to 1920x1920. At the same time, Odoo also preserves image resolution and prevents distortion. For example, if you send an image with a resolution of 2400 x 1600, the image_1920 field will have a resolution of 1920 x 1280.
pre class="wp-block-code">
class ProductImage(models.Model):
_name = 'product.image'
_description = "Product Image"
_inherit = ['image.mixin']
As a result, image.mixin is inherited, so five new binary fields are added to the model to store images of different sizes. Here is a list of fields and their resolutions:
● image_1920: 1,920x1,920
● image_1024: 1,024x1,024
● image_512: 512x1,512
● image_256: 256x256
● image_128: 128x128
In the above field only image_1920 is editable. If you change the image_1920 field, the other image fields will be read and updated. Therefore, the backend tree perspective of the model should use the image_1920 field to allow the client to upload an image. Either way, you're stacking a huge image_1920 image in your tree view. Nonetheless, there is a way to evolve the execution using the image_1920 image in a tree view showing more conservative images. For example, you can use the image_1920 field to display the image_128 field. You can check the following code to do this:
<field name="image_1920" widget="image" class="oe_avatar" options="{'preview_image': 'image_128'}"/ >
With image.mixin, you can get the image with specific resolutions, yet imagine a scenario where you need to utilize an image with another resolution. To do as such, you can create a parallel field image to your model.
image_1600 = fields.Image("Image 1600", max_width=1600, max_height=1600)
This will create a new field image_1600, and when you remove the image, it will resize to 1600 x 1600 resolution. Note that this is not strictly necessary for image.mixin. Since we're just shrinking the image to 1,600 x 1,600, we need to add that box to the tree view. Changing this does not change the following image fields in image.mixin. Add the related="image_1920" attribute to the field definition if you want to relate it to the current image.mixin field.