image.width / height and thumb.width / height after resize_path?

[o-l-e]

Hi,

just wondering if this is possible or not: I am trying to add the width/height attributes to my images and thumbs after the images have been resized by SLIR. (Note i am using a lazy load plugin called Unveil.)

Is this even possible?

This is what i have:

<img src="loader.gif" 
data-src="{{resize_path(page.thumb.url, 264, 264, 0, 95)}}" 
data-src-retina="{{resize_path(page.thumb.url, 528, 528, 0, 95)}}" 
width="{{page.thumb.width}}" 
height="{{page.thumb.height}}"
/ >

The problem is that it only renders the original image size attributes (width="1024" height="1024".

Hope you understand, and thanks in advance.

[mjau-mjau]

@o-l-e I have a question for you though: If you are going to add width and height parameters, I am assuming this is not a responsive layout? In some browsers, it would work, but in others it would force a set size so that the layout is not responsive.

If it indeed is not for a responsive layout, then may I ask why you need to add width and height only after the full image has loaded? Why can't you set the width and height initially, so the images will not jump around with the lazy loader?

Maybe this this is because of the loader.gif you are using? If I was you, I would ditch the concept of using a GIF loader in the SRC, and instead use an absolute positioned layer with either a CSS loader or a GIF ... With Unveil JS, there is an onLoad function for each image, so you can remove the loader element once the image is loaded. Technically, you CAN also use the same onLoad function to add width/height attributes to the image after the taret image is loaded, but as mentioned, I think that logic is flawed.

[o-l-e]

Basically i was trying to avoid the flicker that happens when loading the images (because of the lack of dimensions). I was trying to get the dimensions before the image has lazy loaded. But, i see that this is difficult. I am considering leaving the whole lazy load thing, as i see it's buggy on mobile/touch devices (which is kind of the whole point of lazy loading images). But, that is another issue.

Thanks for the involvement Karl, i appreciate it :)

Ps: It is for a responsive layout.

[mjau-mjau]

well, you can get the image dimensions with Stacey before the image has loaded ... but in a responsive layout, you shouldn't really be using width/height. I have some stuff coming up for showcase, although I didn't test it on mobile yet ... I have a previous project where we added lazy responsive images, and this worked fine on mobile/touch.

[o-l-e]

Look forward to seeing your showcase @suncat100. This lazy loading is taking too much of my time right now, so i need to get back to it later when i have time. i see your point about the image dimensions and responsive design, what i was thinking was that if the placeholder was rendered using a super low resolution thumb (like your idea), and defined the height/width for the lazy loaded image.

Anyway thanks again.

[mjau-mjau]

Yes this is indeed the method I am using. You don't need to add width and height parameters though, just use width:100%; max-width:100%; and the super-low res thumb will render at same size as the target image, basically because they are identical aspect.

I was looking at your websites, and came across your company and noticed you were from the same hometown as me. Add me on FB /mjaumjau ... good to know some other people working with Stacey. In fact, it would be good to improve the community a bit ...