Using Cloudinary Transformations inside an HTML banner
Hello,
I am trying to create a dynamic HTML banner that will receive a Cloudinary image URL as a variable (e.g {{image1}}). I would like to be able to use Cloudinary Transformations on that image inside the banner (smart fill and applying an image overlay). Is there any elegant way of doing this using the Cloudinary library? I have tried some URL string manipulation but it's error prone as it's either not executing when the page loads or URLs can sometimes change structure. I'm looking for a solution where I can pick up the public id from {{image1}}, apply my transformations and then use the resulting URL inside the banner.
Thank you!
-
Hi Mikkel,
Thank you for reaching out and sorry you are running into errors with this.
And yes our SDKs do provide the ability to generate dynamic transformation URLs without you having to manually construct them. I am unsure of what your setup is like but if you click here then you can see the various types of SDKs we support from frontend to backend.
All our SDKs offer two main helper methods: the URL helper and the image tag helper. Click here to read more about it with examples given for each SDK. Make sure the asset you are transforming has already been uploaded otherwise you will get a 404 not found when accessing it.
Alternatively, you can use eager transformations to eagerly generate transformations whilst uploading the asset. The transformations are generated along with your original asset, instead of generating them on the fly so the derived versions are already available for fast access even for the first visitor. We especially recommend this for large assets such as videos and our SDKs will include the transformed URLs in the response as well which you can easily include in your website. Click here to find out more about this with SDK examples.
Please let me know if you have any further questions.
Thanks,
Thomas
Post is closed for comments.
Comments
1 comment