Prevent image loading under certain screen width

Archive
1

Hi,
I was wondering if there’s a way to prevent an image to be loaded if the screen width is lower then a certain value, let’s say 480px. I know you can hide it by doing “display:none” inside a CSS media query, but that won’t prevent the image to be downloaded by the browser.

I was looking at twig’s responsive functions ( https://learn.getgrav.org/content/media#responsive-images ) but I can’t manage to get it to work.

Thanks in advance!
Federico

PS: I apologize in advance for any grammar mistake!

2

it’s not really possible to get the screen size on the server side. You need JS that runs in the client’s browser to determine that.

3

Ok! I’ll look for a JS/ajax solution. Thanks a lot! :slight_smile:

4

In case somebody will ask the same question:
I solved the problem by editing the twig template so the image URL is placed in the data-src attribute, and copied by JS in the src attribute only if the screen width is bigger than 480px. Here’s the code:

if ($(window).width() > 480) {
  $(".thumb img").each(function() {
     $(this).attr('src', $(this).attr('data-src'))
   });
}
---