DEV: Experiment with relative image sizes and native image lazy loading (#12759)

app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js

@@ -16,15 +16,18 @@ export default {
 
     const site = container.lookup("site:main");
     if (site.mobileView) {
-      width = $(window).width() - 20;
+      width = window.innerWidth - 20;
     }
 
-    const style = "max-width:" + width + "px;" + "max-height:" + height + "px;";
+    let styles = `max-width:${width}px; max-height:${height}px;`;
 
-    $(
-      '<style id="image-sizing-hack">#reply-control .d-editor-preview img:not(.thumbnail):not(.ytp-thumbnail-image), .cooked img:not(.thumbnail):not(.ytp-thumbnail-image) {' +
-        style +
-        "}</style>"
-    ).appendTo("head");
+    if (siteSettings.disable_image_size_calculations) {
+      styles = "max-width: 100%; height: auto;";
+    }
+
+    const styleTag = document.createElement("style");
+    styleTag.id = "image-sizing-hack";
+    styleTag.innerHTML = `#reply-control .d-editor-preview img:not(.thumbnail):not(.ytp-thumbnail-image), .cooked img:not(.thumbnail):not(.ytp-thumbnail-image) {${styles}}`;
+    document.head.appendChild(styleTag);
   },
 };

app/assets/javascripts/discourse/app/initializers/post-decorations.js

@@ -2,7 +2,10 @@ import highlightSyntax from "discourse/lib/highlight-syntax";
 import lightbox from "discourse/lib/lightbox";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { setTextDirections } from "discourse/lib/text-direction";
-import { setupLazyLoading } from "discourse/lib/lazy-load-images";
+import {
+  nativeLazyLoading,
+  setupLazyLoading,
+} from "discourse/lib/lazy-load-images";
 import { withPluginApi } from "discourse/lib/plugin-api";
 
 export default {
@@ -33,7 +36,11 @@ export default {
         });
       }
 
-      setupLazyLoading(api);
+      if (siteSettings.disable_image_size_calculations) {
+        nativeLazyLoading(api);
+      } else {
+        setupLazyLoading(api);
+      }
 
       api.decorateCooked(
         ($elem) => {

app/assets/javascripts/discourse/app/lib/lazy-load-images.js

@@ -121,3 +121,20 @@ export function setupLazyLoading(api) {
     }
   );
 }
+
+export function nativeLazyLoading(api) {
+  api.decorateCookedElement(
+    (post) =>
+      forEachImage(post, (img) => {
+        img.loading = "lazy";
+        if (img.dataset.smallUpload) {
+          img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`;
+        }
+      }),
+    {
+      onlyStream: true,
+      id: "discourse-lazy-load-after-adopt",
+      afterAdopt: true,
+    }
+  );
+}

app/assets/javascripts/discourse/app/widgets/post-cooked.js

@@ -95,6 +95,11 @@ export default class PostCooked {
       return;
     }
     let siteSettings = this.decoratorHelper.widget.siteSettings;
+
+    if (siteSettings.disable_image_size_calculations) {
+      return;
+    }
+
     const maxImageWidth = siteSettings.max_image_width;
     const maxImageHeight = siteSettings.max_image_height;
 

config/site_settings.yml

@@ -2244,6 +2244,11 @@ uncategorized:
   create_revision_on_bulk_topic_moves:
     default: true
 
+  disable_image_size_calculations:
+    default: false
+    hidden: true
+    client: true
+
 user_preferences:
   default_email_digest_frequency:
     enum: "DigestEmailSiteSetting"