Feature request : hide images for mobile data

So after hitting my data limit warning twice after opening a thread full of images I was wondering if you could have a sight setting that would hide imbedded images unless you clicked on them or something (I know the awful app does this)

1 Like

Hey there! Sorry for not responding to your post sooner!

The short explanation

Lazy loading is the feature you’re describing. It does pretty much what you say (don’t display images unless a user scrolls down to it, or a user clicks/taps it). For it to work on our forums, we’ll need to edit any occurrence of an image to make it work right.

I’m looking at possible solutions, but I’m not experienced at working with Discourse under the hood.

The technical explanation

Firstly, about the behaviour you’re describing: it does exist, in what’s called lazy loading. Basically, any image is written to include a link to the image using data attributes. While this doesn’t do anything by itself, the magic is in the JavaScript, which looks at these tags, and depending on what we implement, can load them whether scrolling into view, or on a click event.

While this would certainly solve the case of threads eating up your data by loading images only when you want them to, the biggest thing that we need to work on is implementation:

  • The site: Load the lazy loading JS library, or write one ourselves
  • New images: we’ll need to change the upload post syntax so that it uses data attributes
  • Images already uploaded/images on other hosts: associated posts will need to be converted to use this new syntax
  • Visitors: What if they don’t have JS? We’ll have to provide a fallback image

There’s a few libraries out there that implement lazy loading in JS, and I’ll see what I can do. Unfortunately, I’m not experienced with developing on Discourse, particularly how it generates posts and what I can do to edit those templates.

1 Like