Angular advanced-image does not update width and height inputs on responsive design

[omikolaj]

New issue for cloudinary/frontend-frameworks

Before proceeding, please update to the latest version and test if the issue persists

For which package is this issue?

"@cloudinary/ng": "^1.7.0"

Describe the issue in a sentence or two.

Input property bindings, width and height for advanced image do not update the inner img tag. They are set once during ngOnInit

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Performance - Performance issues
[ ] Behaviour - Functions aren’t working as expected
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types
[x] Other (Specify)

Steps to reproduce

Error screenshots

Browsers (if issue relates to UI, else ignore)

[ ] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[x] All

Versions and Libraries (fill in the version numbers)

package SDK version
Node - 0.0.0
NPM - 0.0.0

Config Files (Please paste the following files if possible)

Package.json

Repository

If possible, please provide a link to a reproducible repository that showcases the problem

[PixelCook]

Hey there,

Do you happen to have a code pen demonstrating this issue?
Something like this?
https://codesandbox.io/s/cld-angular-plugins-rz0wy?from-embed

[RobSchilderr]

It's possible that the AdvancedImage component's responsiveness issues were caused by conflicting plugins being used simultaneously. At least in our case with the React SDK, the component was used with the placeholder and lazyload plugins, which compromised its responsiveness.

However, after switching to a simpler implementation that only utilized the responsive plugin, the issue was resolved, and the component began to function as intended. Here's an example of the original implementation:

<AdvancedImage
     style={style}
     alt={alt}
     cldImg={myImage}
     plugins={[        ...(withBlur          ? [              placeholder({                mode: 'blur',              }),            ]
         : []),
       lazyload(),
       responsive({
         steps: 150,
       }),
     ]}
   />  

And here's an example of the simplified implementation:

 <AdvancedImage
      style={style}
      loading="lazy"
      alt={alt}
      cldImg={myImage}
      plugins={[
        responsive({
          steps: 150,
        }),
      ]}
    />

Unfortunately, using the original implementation like in the docs, caused users to download an excessive amount of data, for one particular user totalling approximately 1.5GB instead of the expected amount, which should have been 50 times lower. It's possible that this could be a bug in the software development kit (SDK), specifically within the React framework.

It would be nice if someone from the team could look into this. Are you in the team? @PixelCook

[tamaracloudinary]

Hi @RobSchilderr, the syntax you provided here is React's syntax, and not Angular. In order to better understand the issue, we need some more information. Can I please ask you to provide more details about the problem you're encountering?

Please confirm which version of our SDK you're using, as well as:

• A sample of your code showing where the error occurs (something like https://codesandbox.io/s/cld-angular-plugins-rz0wy?from-embed will be good).
• The value you're passing as parameters (for example, the transformation options)
• The error stack trace from your code, or the exact error message you see returned by our API if you get any.

Looking forward to your response.

[RobSchilderr]

Hi @RobSchilderr, the syntax you provided here is React's syntax, and not Angular. In order to better understand the issue, we need some more information. Can I please ask you to provide more details about the problem you're encountering?

Please confirm which version of our SDK you're using, as well as:

• A sample of your code showing where the error occurs (something like https://codesandbox.io/s/cld-angular-plugins-rz0wy?from-embed will be good).
• The value you're passing as parameters (for example, the transformation options)
• The error stack trace from your code, or the exact error message you see returned by our API if you get any.

Looking forward to your response.

Hi @tamaracloudinary,

Yes, I was just informing @omikolaj about my similar issue in React. I also included examples to help illustrate the problem.

If you're not the appropriate person to address this issue, could you please refer me to the right person? This problem has already caused hundreds of people in the Netherlands to lose phone data, so it's quite critical. Thank you for your assistance and looking forward to your reply. 🌈

[tamaracloudinary]

Hi @RobSchilderr, @omikolaj
A new version with a fix to the order of the plugins was just released, and now the example in the docs should work as expected.
Please let me know if you still experiencing issues