Webflow Integration
Hello - I would like to embed the Upload Widget into Webflow to allow visitors to my site the option to upload images. Does anyone know how to integrate Cloudinary Upload Widget into Webflow?
-
Hi Shirly, Lukas,
Thanks for you answers. I finally went another direction, much easier to maintain for my client in the long term. But I'll definitely check this out for another project !
1 -
Hi Brent,
We don't have an official integration with Webflow.
I saw from the request you have submitted at support@cloudinary.com, that you have managed to perform the integration.
Glad to hear :)
If you have any further questions about that we would be happy to help.
Also if you want to share any pointers regarding that implementation for other users who may encounter this it would also be great :)
Thanks
Ido
0 -
HI guys,
I'm sorry to dig up this post, but I'm looking to integrate Cloudinary to Webflow as well and I can't seem to find how to perform it...
Would you mind to explain how you did it ? :)
0 -
Hi Justine,
My approach:
1. Add this to the "Head Code" under "Custom code" in your Project Settings
<script type="text/javascript">
function getCloudinaryUrl(imageUrl, params = ['f_auto', 'fl_lossy', 'q_auto:good']) {
const regex = new RegExp(`https://res.cloudinary.com/YOUR_CLOUDINARY_ID/image/upload/(.*)`);
if (regex.test(imageUrl)) {
const publicId = imageUrl.match(regex)[1];
return `https://res.cloudinary.com/YOUR_CLOUDINARY_ID/image/upload/${params.join(',')}/${publicId}`;
}return `https://res.cloudinary.com/YOUR_CLOUDINARY_ID/image/fetch/${params.join(',')}/${imageUrl}`;
}function loadCloudinaryImages() {
const images = document.querySelectorAll('[data-cloudinary-src]');
Array.from(images).forEach((image) => {
const source = image.getAttribute('data-cloudinary-src');
const params = [].concat((image.getAttribute('data-extra-params') || '').split(','), ['f_auto', 'fl_lossy', 'q_auto:good']);image.setAttribute('loading', 'lazy');
image.setAttribute('src', getCloudinaryUrl(source, params));
});
}document.addEventListener("DOMContentLoaded", () => {
loadCloudinaryImages();
});
</script>2. In the designer, if you want to insert an image, insert an HTML Embed element with the following code:
<img data-cloudinary-src="THE_IMAGE_URL" data-extra-params="w_1000,h_500,c_limit,q_auto:good,f_auto,fl_lossy" />
This works for both external URLs (fetch) as for Cloudinary images
I added some default parameters as well to make sure I never load original images, to save bandwidth.
0 -
Hi Lukas,
Thank you for sharing these details of how you were able to integrate Cloudinary.
Justine - Let us know if you are able to use Lukas' approach above for your project too.
0 -
Hi Lukas,
Thank you so much, I'll try this ! But this is in the case where I only want to display one image. In my project, I need to display miniatures of all the images of a folder (around 300-400 images). Is it possible ?
0 -
Hi Justin,
When calling `getCloudinaryUrl` to all the URL's that you have in Webflow. it will use the cloudinary URL and optimize the images if they are from cloudinary and if not they will fetch them to your account and return the optimized one.
You can read more about fetching an image here: https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url
Also, I would highly recommend testing it in a staging environment before moving to production.
Hope that helps,
0 -
Yes, 300-400 images is possible.
I use this in combination with the Webflow CMS, where I store the Cloudinary image URL as a simple text field, and I insert that into HTML Embed element I mentioned earlier (in place of THE_IMAGE_URL)
0 -
Hi Lukas, Shirly,
Thanks for you time and you help ! It's working !
Last question : since I'm displaying these images in small size, do you know how if it is possible to mix it with the lightbox feature in Webflow (or, if not possible, some jquery gallery plugin) to be able to zoom on these images ?
I don't really know how to proceed since lightbox only allow images and not plain text ?
0 -
Hi Justine, I'm not familiar with the lightbox feature, but from the docs, it looks like you can only use that with images or videos, not with custom HTML.
So if you want to get it working with Cloudinary, you should probably use a custom JS lightbox plugin.
If you take a step back, why are you using Cloudinary? Just because the images are hosted there or do you use any of their fancy transformations? If not, you could try to avoid using Cloudinary altogether and just use Webflow's native images. You can import your list of 400 images in the CMS with an Excel. Then you can use Webflow's lightbox without any custom code.
0 -
Hi Justin,
While we do not officially support lightbox feature for Webflow. there are some options from the community. For example: https://www.npmjs.com/package/cloudinary-lightbox
Hope that helps,
0
Post is closed for comments.
Comments
11 comments