Skip to main content

Webflow Integration

Brent Goldman

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?

1

Comments

11 comments

Date Votes
  • Justine

    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
  • Ido

    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
  • Justine

    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
  • Lukas Van Orshoven
    Edited

    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
  • Aleksandar Kostadinov

    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
  • Justine

    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
  • Shirly Manor

    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
  • Lukas Van Orshoven

    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
  • Justine

    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
  • Lukas Van Orshoven

    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
  • Shirly Manor

    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.

Didn't find what you were looking for?

New post