diff --git a/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js b/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js index dd08190e667..b9a401fc374 100644 --- a/app/assets/javascripts/discourse/app/initializers/ensure-max-image-dimensions.js +++ b/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;`; - $( - '" - ).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); }, }; diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js index 0eacb93d0b4..88f045f1ff1 100644 --- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js +++ b/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) => { diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js index 9f60bf92600..46390d05049 100644 --- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js +++ b/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, + } + ); +} diff --git a/app/assets/javascripts/discourse/app/widgets/post-cooked.js b/app/assets/javascripts/discourse/app/widgets/post-cooked.js index de61a66b9e7..bbc669ac224 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-cooked.js +++ b/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; diff --git a/config/site_settings.yml b/config/site_settings.yml index b9703b5f106..5464916ada8 100644 --- a/config/site_settings.yml +++ b/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"