otherAttributes variable in carousel.html escaping special characters

[amandeepsinghvirdi]

Expected behavior

As stated in responsive-img.html: otherAttributes: Any other HTML attributes you want on the img tag, for example "height='100' width='100'"

Actual behavior

But if we pass any attribute in the carousel.html to otherAttributes variable, it does not show the attributes correctly in the html.

{{> components/common/responsive-img
      image=stencil_image
      class="heroCarousel-image"
      fallback_size='1280w'
      lazyload='lazyload'
      otherAttributes= 'decoding="async"'
  }}

Steps to reproduce behavior

1. Go to carousel.html and add some attributes within otherAttributes variable as shown in the actual behavior section
2. Do view source and you will notice the attributes not rendering correctly in the code

Fix

In responsive-img.html change {{otherAttributes}} to {{{otherAttributes}}}

[rickbeacham]

Is this still considered an open issue? And what is the official work around or fix?

@amandeepsinghvirdi Thanks for reporting this.

[Tiggerito]

I believe it is still an issue. My solution was to rewrite responsive-img. Not sure if it fixed the otherAttributes encoding issue. My solution focused on adding built-in attributes. It was from before I was aware of the decoding attribute.

https://github.com/bigcommerce/cornerstone/pull/2147#issuecomment-1009384015

I'd go with the fix mentioned by @amandeepsinghvirdi :

In responsive-img.html change {{otherAttributes}} to {{{otherAttributes}}}

[rickbeacham]

@Tiggerito Thanks for connecting. Yes his fix worked on my dev instance.
Cheers.