Click to download

Hello, folks. I’m trying to include a “click to download” option for my SVG and PNG files. Does anyone know if there is a way to make it automatically download? Also, where do I need to store the SVG and PNG files? Additionally, I would prefer the file names to be as short as possible, ideally just the file name. Thanks for your help!

It depends on your design, but it sounds like you are showing the image, and then you either want to download that image directly from Webflow, or you have a higher resolution version of that image you want to download.

The main challenge is that to trigger the browser’s download action, the content must be served with a MIME type that the browser doesn’t know how to display. Google Drive might be a suitable option of your number of downloads is reasonable. If downloads are high-volume, you’ll want to store the images in S3 or Netlify instead.

For the filename, try adding a custom attribute of download = your filename to your link. If these are in the CMS, you can store the filename as a field and CMS-bind it to the attribute.

However this might not work cross-origin.

If you need something much more capable, you’ll need to go with S3 or Netlify for the image hosting, and possibly a reverse proxy to control the download experience fully on the website side.

1 Like