UX: Better alignment for experimental grids (#22066)

Improves the layout of most grids in posts, by using `object-fit: cover` for most images. This allows images to better fill up the space, without changing their aspect ratio.

app/assets/javascripts/discourse/app/lib/columns.js

@@ -69,9 +69,11 @@ export default class Columns {
     Array.from(this.container.children).forEach((child) => {
       if (child.nodeName === "P" && child.children.length > 0) {
         // sometimes children are wrapped in a paragraph
-        targets.push(...child.children);
+        Array.from(child.children).forEach((c) => {
+          targets.push(this._wrapDirectImage(c));
+        });
       } else {
-        targets.push(child);
+        targets.push(this._wrapDirectImage(child));
       }
     });
 
@@ -80,6 +82,17 @@ export default class Columns {
     });
   }
 
+  _wrapDirectImage(item) {
+    if (item.nodeName !== "IMG") {
+      return item;
+    }
+
+    const wrapper = document.createElement("span");
+    wrapper.classList.add("image-wrapper");
+    wrapper.append(item);
+    return wrapper;
+  }
+
   _distributeEvenly() {
     const count = this.count();
     const columns = this._prepareColumns(count);

app/assets/stylesheets/common/base/d-image-grid.scss

@@ -18,6 +18,26 @@
 
   .d-image-grid-column {
     box-sizing: border-box;
+    // use flex layout, flex-grow and object-fit: cover
+    // to better have the images fill their containers
+    // and line up vertically (it's not perfect!)
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    > div,
+    > span {
+      flex-grow: 1;
+      overflow: hidden;
+      // hardcoded max-height here prevents extra tall images
+      // from having an outsized effect on the grid
+      max-height: 1200px;
+
+      img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
+        height: 100%;
+        object-fit: cover;
+      }
+    }
 
     &:last-child {
       margin-right: 0;
@@ -28,7 +48,7 @@
       margin-bottom: $grid-column-gap;
     }
 
-    // Forces images in the grid to fill each column
+    // Forces images in the grid to fill each column width-wise
     img,
     > .lightbox-wrapper,
     > .lightbox-wrapper > .lightbox {
@@ -42,20 +62,24 @@
       .meta .filename {
         flex-grow: 3;
       }
+      // full-height lightbox element in container
+      > .lightbox {
+        height: 100%;
+      }
     }
 
     // when staging edits
     .image-wrapper {
       display: block;
-      padding-bottom: $grid-column-gap;
+      margin-bottom: $grid-column-gap;
-      margin-bottom: 0em;
+      padding-bottom: 0em;
     }
   }
 
-  .desktop-view .d-editor-preview & {
+  .d-editor-preview & {
     .image-wrapper {
-      padding-bottom: $grid-column-gap;
+      margin-bottom: $grid-column-gap;
-      margin-bottom: 0em;
+      padding-bottom: 0em;
       .button-wrapper {
         .scale-btn-container,
         &[editing] .wrap-image-grid-button {
@@ -64,4 +88,15 @@
       }
     }
   }
+
+  .mobile-view .d-editor-preview & {
+    .image-wrapper {
+      .button-wrapper {
+        opacity: 0;
+      }
+      &:hover .button-wrapper {
+        opacity: 1;
+      }
+    }
+  }
 }

config/locales/server.en.yml

@@ -2426,6 +2426,7 @@ en:
     experimental_new_new_view_groups: 'EXPERIMENTAL: Enable a new topics list that combines unread and new topics and make the "Everything" link in the sidebar link to it.'
     enable_custom_sidebar_sections: "EXPERIMENTAL: Enable custom sidebar sections"
     experimental_topics_filter: "EXPERIMENTAL: Enables the experimental topics filter route at /filter"
+    experimental_post_image_grid: "EXPERIMENTAL: Enables a [grid] tag in posts to display images in a grid layout."
 
     errors:
       invalid_css_color: "Invalid color. Enter a color name or hex value."

config/site_settings.yml

@@ -988,9 +988,6 @@ posting:
   autohighlight_all_code:
     client: true
     default: false
-  experimental_post_image_grid:
-    client: true
-    default: false
   highlighted_languages:
     default: "bash|c|cpp|csharp|css|diff|go|graphql|ini|java|javascript|json|kotlin|lua|makefile|markdown|objectivec|perl|php|php-template|plaintext|python|python-repl|r|ruby|rust|scss|shell|sql|swift|typescript|xml|yaml|wasm"
     choices: "HighlightJs.languages"
@@ -2115,6 +2112,9 @@ developer:
   experimental_topics_filter:
     client: true
     default: false
+  experimental_post_image_grid:
+    client: true
+    default: false
   new_edit_sidebar_categories_tags_interface_groups:
     type: group_list
     list_type: compact