Load external images (from ftp, direct link, dropbox ect...) with unveil.js

Hey guys,

I just found a simple way to add external images (from your fileserver, ftp, cdn, giphy or even dropbox) without embedding custom code. All you have to do is adding a small custom attribute to your img element with the source url of your external image.

See it in action:

Load external images (Examples & How-To)

Step by Step Guide

  • Place an image element into your page (leave the placeholder as is - or add a neat loading spinner) and add your alt-tag.

  • Switch to Custom Attributes in the image settings tab

  • Add your image-url as data-src

  • Add the following code-snippet as Custom Code to your project, under Project Settings > Custom Code > Footer Code. This adds the unveil.js plugin :
<script>
Webflow.push(function() {
  $.getScript('https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js', function() {
    $('img').unveil();
  });
});
</script>

Click ‘Publish’ and see the magic happen :slight_smile:

You can use any external link you want (you should check if direct linking is allowed) but the simplest Use-Case is the ability to load images directly from your own FTP or hosting solution. When you change the image on your server, it automatically gets updated in your webflow project!

As an extra gimmick you’ll get the lazy-load plugin behaviour for your images. This should improve the website loading times.

5 Likes

thats kinda cool… Thanks for sharing

Thanks for posting. Have you used this with CMS images?

Hi slikdesign,

this was a nice workaround until responsive images (and therefore data-src) got inroduced, so it’s somehow outdated now :frowning:

I am also interested in this with CMS images. Any updates?

2 Likes

Did you use this with CMS image gallery? I am curious

Hi, OP, Marci,
Do you have any update suggestions to this tip please?
Thanks

1 Like