-
- Downloads
[FIX] web_editor, website: add cover/contain option for grid images
As a fix, this introduces a new option for images in grid mode. When an
image is alone in a column which later becomes a grid item, or when an
image is directly added as a grid item via the dedicated option, the
image used `object-fit: cover` so that when the image is resized as a
grid item, it fits the dimensions of the selected grid area.
This confused some users as the image did not appear the same depending
on the screen size. Indeed, if an image is set to take 5 columns as
width and 3 rows as height, it does not ensure the ratio in pixels to
stay the same depending on the screen size: the grid is always made of
12 columns (so the width of each column depends on the screen width),
while the rows are always 50px tall. We could enforce the ratio of grid
items to stay the same or limit the ratio loss by reducing the 50px
height on smaller breakpoints but that would actually increase another
problem: for colored text grid items, their text would more easily
overflow their fixed area.
In the end, using the grid mode is about compromises, even if it allows
to achieve nice things and to have more freedom. This commit although
adds a new option to mitigate the issue for images: users now have the
possibility to switch the default "cover" mode of grid images to
"contain": in that mode, the whole image will always be visible (and
thus keeps the same ratio) and is just "contained" in the grid area
which is selected as dimension.
opw-3069234
closes odoo/odoo#106807
Signed-off-by:
Quentin Smetz (qsm) <qsm@odoo.com>
Showing
- addons/web_editor/static/src/js/editor/snippets.editor.js 12 additions, 2 deletionsaddons/web_editor/static/src/js/editor/snippets.editor.js
- addons/web_editor/static/src/js/editor/snippets.options.js 1 addition, 1 deletionaddons/web_editor/static/src/js/editor/snippets.options.js
- addons/web_editor/static/src/scss/web_editor.frontend.scss 11 additions, 4 deletionsaddons/web_editor/static/src/scss/web_editor.frontend.scss
- addons/website/i18n/website.pot 13 additions, 0 deletionsaddons/website/i18n/website.pot
- addons/website/static/src/js/editor/snippets.editor.js 20 additions, 0 deletionsaddons/website/static/src/js/editor/snippets.editor.js
- addons/website/static/src/js/editor/snippets.options.js 55 additions, 0 deletionsaddons/website/static/src/js/editor/snippets.options.js
- addons/website/views/snippets/snippets.xml 3 additions, 0 deletionsaddons/website/views/snippets/snippets.xml
Loading
Please register or sign in to comment