search

scaleflex / js-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-responsive/issues
Other
68 stars 15 forks source link

width/height is missing in final src/srcset #25

Closed ghost closed 2 years ago

ghost commented 2 years ago

The newest version of js-cloudimage doesn't set the (manually set) width/height for the image src. (but this was possible with previous versions).

Example: <img ci-src="https://www.test.com/test.jpg" width="448" height="336" /> (or <img ci-src="https://www.test.com/test.jpg" ci-sizes="{'(min-width): 0px)': { w: 448, h: 336 }}" />)

will result in: https://xxxxxx.cloudimg.io/v7/https://www.test.com/test.jpg?&alt=media&q=80&token=xxxx so always the original size is being loaded.

but my expected result would be: https://xxxxxx.cloudimg.io/v7/https://www.test.com/test.jpg?w=448&h=336&alt=media&q=80&token=xxxx to load the 448x336 version.

amrw-js commented 2 years ago

hey @daniel-lehner, I see you have a typo in ci-sizes="{'(min-width): 0px)': { w: 448, h: 336 }}" by adding extra right parenthesis please make sure you are using the lastest version and for mentioned example it should be ci-sizes="{ '(min-width: 0px)': { w: '448', h: '336' } }" codesandbox example : https://codesandbox.io/s/js-cloudimage-responsive-example-forked-2sw0x4?file=/index.html

ghost commented 2 years ago

Hey @amrw-js , ah sorry, that was really a typo, but only in the issue description, in my code it's correct.

But: There were a few patches since the problematic version (4.8.6) a month ago. Now with 4.8.12 (or updated cloudimage-responsive-utils 2.4.9) it seems to be fixed! Thanks for helping me out :)