Image placement

[srgdts]

I’m trying to place an image on product.template form.

There is the horizontal padding on image, disappearing on window size change. Is there a way to get rid of it?

<?xml version="1.0"?>
<data>
    <xpath expr="/form/notebook/page[@id='general']/field[@name='categories']"
           position="replace">
        <group id="details" colspan="2" col="1" yexpand="1">
            <separator name="categories"/>
            <field name="categories" yexpand="0"
                   view_ids="product.category_view_list"/>
            <separator name="image"/>
            <field name="image" widget="image" height="400" width="600"/>
        </group>
    </xpath>
</data>

[ced (Cédric Krier)]

No sure to understand what you mean but as you set height and width attributes, this gives a fixed size for the image and by default it is centered inside the available space. To remove the center, normally you should set the xalign, yalign and xexpand, yexpand attributes.

[srgdts]

Sorry. Next try:)

Now:

The group (id=details) expands over the half of the form.

Expected:

Both elements the variants field and the new group (id=details) have same width.

[ced (Cédric Krier)]

There is no control on that. It depends only on the size request of each widget.

[srgdts]

The dimensions of the image widget are defined in height and width attributes of the containing field node as mentioned in Large image preview of binary field in the form. When I choose the dimensions of the image fitting the available space, then on both sides margins/paddings are added as in Now screenshot above. This added margins/paddings disappearing when window gets smaller on resize. Yet I have no clue wherefrom these margins/paddings come and how to avoid them if possible.

[srgdts]

theme.css:

image {
  border: 1px solid magenta;
  background-color: yellow;
}

[ced (Cédric Krier)]

I guess if you set xexpand="0" on the group then it will not expand and so the available space will be taken by the other side.

[srgdts]

Thank you.

Adding xexpand="0" to the group produces:

template_form.xml

<?xml version="1.0"?>
<data>
    <xpath expr="/form/notebook/page[@id='general']/field[@name='categories']"
           position="replace">
        <group id="details" colspan="2" col="1" yexpand="1" xexpand="0">
            <separator name="categories"/>
            <field name="categories" yexpand="0"
                   view_ids="product.category_view_list"/>
            <separator name="image"/>
            <field name="image" widget="image" width="600" height="400"/>
        </group>
    </xpath>
</data>

The margins have moved, outside the group. Could it be a column (colspan/col values) issue?

[ced (Cédric Krier)]

Then you must also disable the expand on all the tag in the same column.
You can also set the xalign="0" for example.

[srgdts]

OK, I’ll give it a try. Nevertheless, I would prefer not to redefine the elements of the whole column.

Maybe it’s a lack of my understanding of tryton/gtk GUI composition. From my point of view it’s the image widget causing the layout distortion, when disabled the layout behaves as expected:

Image field is commented out:

theme.css

image {
  border: 1px solid magenta;
  background-color: yellow;
}

box {
  border: 1px solid magenta;
}

[ced (Cédric Krier)]

Setup a width attribute to the widget gives it more weight compared to others without requested width.

[srgdts]

The default dimension values for the image widget are defined in image.py as height = 100, width = 300.

Using GtkInspector I’m pretty sure it’s the Gtk’s image widget making some trouble. After tracing and debugging the steps of image creation and displaying, it looks like somehow the creation of the image from the pixbuf in Image.update_img is messed up. The steps before specially the resize of pixbuf runs as expected.

Note: There is no such layout distortion in Sao.