How to make images downloadable?

Design help Custom code
1

Hi everyone,

Is there any way to create a “Download Image” button that directly downloads an image from the CMS or asset library? This seems like such a simple thing to do but nothing I’ve tried works.

I’ve tried using the file option in the CMS but this just opens the image link, not instant download.

I know this is do-able with google drive but it involves editing the url every time and also needing to have all my images in google drive. I need to hand this site to a client and it seems like too much of a workaround to hand off to them.

Has anyone managed to do this?
Thank you for any suggestions.

Here is my public share link: LINK
(how to access public share link)

2

That is true, you can find many articles about how to when you type “download image js” in your preferred browser. Here is one example of good article to understand how to do that. Be aware that images on WF are not on the same URL.

1 Like
3

Hi Stan, thank you for that, I’ve now go this js which is letting me download the first image in the collection list! But for the other collection items its not working.

Is there a way to make js work across multiple collection items?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <div>bobbyhadz.com</div>

    <br />

    <button id="btn">Download image</button>

    <script>
    async function downloadImage(
  imageSrc,
  nameOfDownload = 'my-image.jpeg',
) {
  const response = await fetch(imageSrc);

  const blobImage = await response.blob();

  const href = URL.createObjectURL(blobImage);

  const anchorElement = document.createElement('a');
  anchorElement.href = href;
  anchorElement.download = nameOfDownload;

  document.body.appendChild(anchorElement);
  anchorElement.click();

  document.body.removeChild(anchorElement);
  window.URL.revokeObjectURL(href);
}

const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  downloadImage(
    '{{wf {&quot;path&quot;:&quot;asset-file&quot;,&quot;type&quot;:&quot;FileRef&quot;\} }}',
    'my-image.jpeg',
  )
    .then(() => {
      console.log('The image has been downloaded');
    })
    .catch(err => {
      console.log('Error downloading image: ', err);
    });
});
    </script>
  </body>
</html>
4

I’m using the file from the cms as imageSrc

Screenshot 2024-04-22 at 09.41.09
Screenshot 2024-04-22 at 09.41.09932×2306 346 KB

5

hi @Joseph_Lewis yes it make sense as you do not loop over many images but one.

These requests are usually done over API. Also any user can in browser right click on image and choose option “download image” :man_shrugging:

here is simple example how it can be done. The code is in page setting.

have a fun on live page

6

You might need custom coding or a plugin to achieve direct image downloads from the CMS or asset library.

8

You’re an absolute livesaver. This worked perfectly, thank you.

1 Like
9

hi @YamiGautam you can read responses, that is why I have posted example in WF with custom code. :man_shrugging: