[FIX] web_editor, website: consider images with a link as grid images

The "grid images" are grid items that only contain an image (i.e. the
image is alone in its column). This distinction with other images in
grid mode allows to set the `object-fit` CSS property to `cover` so they
take the whole space of the grid item (see commits [1] and [2]). In
commit [3], the "Position" option has been added, allowing to switch
between the `cover` and `contain` values for this property, to have the
possibility to still choose to display the entire image, so it can keep
its ratio.

However, only the images that are direct children of the column have
been considered when checking if it was a grid image and in the related
CSS rules. This means that an image with a link cannot be one, since
the image is the child of an anchor element `<a>` in that case. It can
therefore not be set as "cover" or have the "Position" option.

This commit adds the support for images with a link set on them, so they
can be considered as grid images too.

Steps to reproduce:
- Drop the "Masonry" snippet.
- Click on the image and set a link on it.
=> The image is now "contain" and the "Position" option disappeared from
the right panel so we cannot change it.

[1]: https://github.com/odoo/odoo/commit/e9c7e020daf88022d6e02de0a5620074e8417b5a
[2]: https://github.com/odoo/odoo/commit/d8c374e3e6b31bf88aa42952aadf3379936f7600
[3]: https://github.com/odoo/odoo/commit/faf19ef7f87fc043fb9a814516e01b8eeafd9b61

opw-3580128

closes odoo/odoo#148022

X-original-commit: 085d70cea571ea80c141ac6005e8bd8333bd269f
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

addons/web_editor/static/src/js/common/grid_layout_utils.js

@@ -304,7 +304,8 @@ export function _convertToNormalColumn(columnEl) {
 /**
  * Checks whether the column only contains an image or not. An image is
  * considered alone if the column only contains empty textnodes and line breaks
- * in addition to the image.
+ * in addition to the image. Note that "image" also refers to an image link
+ * (i.e. `a > img`).
  *
  * @private
  * @param {Element} columnEl
@@ -312,7 +313,7 @@ export function _convertToNormalColumn(columnEl) {
  */
 export function _checkIfImageColumn(columnEl) {
     let isImageColumn = false;
-    const imageEls = columnEl.querySelectorAll(':scope > img');
+    const imageEls = columnEl.querySelectorAll(":scope > img, :scope > a > img");
     const columnChildrenEls = [...columnEl.children].filter(el => el.nodeName !== 'BR');
     if (imageEls.length === 1 && columnChildrenEls.length === 1) {
         // If there is only one image and if this image is the only "real"

addons/web_editor/static/src/scss/web_editor.frontend.scss

@@ -75,19 +75,19 @@
     }
 
     .o_grid_item_image {
-        > img, > .media_iframe_video {
+        img, .media_iframe_video {
             width: 100% !important;
             height: 100% !important;
             object-fit: cover !important;
         }
 
-        &.o_grid_item_image_contain > img,
-        > img[data-shape] {
+        &.o_grid_item_image_contain img,
+        img[data-shape] {
             object-fit: contain !important;
         }
 
         // Allowing "cover" for some hover effects.
-        &:not(.o_grid_item_image_contain) > img[data-shape$="geo_square"] {
+        &:not(.o_grid_item_image_contain) img[data-shape$="geo_square"] {
             &:not(
                 [data-hover-effect="dolly_zoom"],
                 [data-hover-effect="outline"],
@@ -96,6 +96,12 @@
                 object-fit: cover !important;
             }
         }
+
+        // Needed when "a" is "display: block".
+        > a {
+            width: 100% !important;
+            height: 100% !important;
+        }
     }
 }
 

addons/website/static/src/js/editor/snippets.options.js

@@ -4029,7 +4029,11 @@ options.registry.GridImage = options.Class.extend({
      * @returns {?HTMLElement}
      */
     _getImageGridItem() {
-        const parentEl = this.$target[0].parentNode;
+        let parentEl = this.$target[0].parentNode;
+        if (parentEl.matches("a")) {
+            // Case of an image link.
+            parentEl = parentEl.parentNode;
+        }
         if (parentEl && parentEl.classList.contains('o_grid_item_image')) {
             return parentEl;
         }