Image resize and manage in netlify

Support
,
1

Hi all,

my site (built with Hugo) is going to show to the user several pictures all in one page (it’s a kinda travel blog).

So far I manage the lazy loading of the pictures in such a way:
HTML:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
             data-src="real-img-file" />

JAVASCRIPT:

window.onload = function() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++)
    {
        if(imgDefer[i].getAttribute('data-src'))
        {
            imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        }
    }
}

And it looks it is lazy loading the pictures even though not in the way I would like

Anyway, I know netlify offers the possibility of create multiple images with different sizes automatically but I tried to link my images to img.png?nf_resize=fit&w=100&h=100 but it doesn’t change the dimension neither the size.

Any suggestion about making this working with hugo?
Thank you :slight_smile:

2

Hey there,
The Netlify repo you linked is a demo for Netlify Large Media, so you would have to enable that feature on your Netlify site in order for the demo to work. The image transformations that you do with nf_resize query parameters, like ?nf_resize=fit&w=3001, will only work with Netlify Large Media enabled. Have you checked out the README at that repo? If you got any errors setting up, we’d be happy to help debug.

All of that said, though, you don’t have to enable Netlify Large Media to get a photo grid layout in Hugo. Here are some good docs on the kind of image processing I think you’re looking for:

Let us know if you have any other questions on this!

1 Like