Encoding Commas in the URL changes behaviour

endjin

May 31, 2020 05:27

Hi,

I'm building a static site, which uses ParcelJS to package all the assets. There seems to be an issue with ParcelJS in that it doesn't like that Cloudinary URLs contain commas in the path and this breaks the build as it thinks the Cloudinary URL is pointing to a local resource.

To work around this I encoded the comma in the URL using %2C:

https://res.cloudinary.com/endjin/image/upload/f_auto%2Cq_70%2Cw_512/v1590614405/assets/images/blog/2020/05/header-depositing-cheques-via-a-mobile-banking-experience-1024px.png

BUT this returns the asset as a PNG, whereas, if I just use commas, then the asset is delivered as an optimized WEBP:

https://res.cloudinary.com/endjin/image/upload/f_auto,q_70,w_512/v1590614405/assets/images/blog/2020/05/header-depositing-cheques-via-a-mobile-banking-experience-1024px.png

I'm wondering, does your URL parsing handle decoding entities (%2C)? Otherwise, why am I seeing this difference in behaviour?

Regards,

Howard

0

• 

  Raz Ziv

  May 31, 2020 13:22

  Hi Endjin,

  Commas can indeed be encoded in Cloudinary URLs in most places without any issues. However, in conjunction to f_auto, existing commas should remain unencoded at the moment. 
  Nevertheless, there is a quick and easy workaround for this. Just replace the comma that is after f_auto with a solidus (slash - /) sign and it will work:

  https://res.cloudinary.com/endjin/image/upload/f_auto/q_70%2Cw_512/v1590614405/assets/images/blog/2020/05/header-depositing-cheques-via-a-mobile-banking-experience-1024px.png
  
  f_auto can be placed anywhere in the URL, in its own component, or along with other transformation parameters in the same component. Therefore, this can easily be fixed by avoiding the comma next to it altogether.

  Cheers,
  Raz

  0
• 

  endjin

  May 31, 2020 13:37

  Excellent! Thanks Raz!

  0
• 

  Raz Ziv

  May 31, 2020 17:47 Edited

  My pleasure, glad I could help ;)

  Best,
  Raz

  0

Post is closed for comments.