0

Whenever I add a download picture link to my website, the link does not work.

I have used all kinds of download HTML code.

If I click on my download link, the picture opens in a new window.

How do I set the button in a blog post so that my pictures are downloaded with one click?

After using all the code, my download link remains as just a hyperlink.

HTML

<a href="/images/myw3schoolsimage.jpg" download>link text</a>
user229044
  • 232,980
  • 40
  • 330
  • 338
GS Guri
  • 1
  • 1
  • 8
  • 1
    can you please provide link to the page where this is happening? and provide the link text - so we can see where it is on the page and look at the code? i cannot see any links on the page in your question that say anything like "download picture". – user1063287 Aug 03 '19 at 07:18
  • i have just tested the links with the `download` attribute applied and i think the reason they are not working as expected is because the image is not hosted on your website (see information [here](https://stackoverflow.com/a/28468261) and [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)), searching now to see if there is a workaround. – user1063287 Aug 03 '19 at 08:51
  • i spent some time searching for a workaround, but couldn't see anything. others might know a way. ofcourse users can `right click on image > save as...`, but that's probably not what you are after. – user1063287 Aug 03 '19 at 09:02
  • Try with this solution https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click/55061628#55061628 – Vladimir Salguero Aug 07 '21 at 23:48

3 Answers3

2

If I understood correctly, you need to open the images in same window and not in new window while clicked. To achieve that, you need to add target="_self" in the <a> tags as one of the attributes <a href="/images/myw3schoolsimage.jpg" target="_self">link text</a>

Edited after seeing comment of GsGuri:

The question has three parts:

  1. If I click on my download link, the picture opens in a new window.

Well, this has been answered above.

  1. How do I set the button in a blog post so that my pictures are downloaded with one click?

This is what you need. An alternative would be to zip all your pictures and give that as a result.

  1. After using all the code, my download link remains as just a hyperlink.

If you use <a href= "url" target="_self">Download</a> it would remain as a hyperlink. To add button, you need to use a button with formaction defined for it.

Kavitha Karunakaran
  • 1,340
  • 1
  • 17
  • 32
1

The code 

<a href="/link/to/image.jpg" download>

works, but HTML download attribute only downloads same-origin URLs.

On your private page, you're trying to download an off-site image, which isn't possible.

Instead, create a copy of the image on your domain, and use the your code on it.

FZs
  • 16,581
  • 13
  • 41
  • 50
0

I checked your private page and I found that the problem is the link of the image that you use.

Copying image location and use it is NOT the right way to make a downloadable image.

The right way:

Put the link of your blog https://www.shayaripicture.com and add the location of your image in your server
for example https://www.shayaripicture.com/myfile/myimage then add /download?force=true

your link will be: https://www.shayaripicture.com/myfile/myimage/download?force=true

Live example:

Wrong way:

<a href="https://images.unsplash.com/photo-1558981822-0c0c5b070026?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" download >Download</a>

Right way:

<a href="https://unsplash.com/photos/WJAPg0sWsUQ/download?force=true" download >Download</a>
Omar_Hafez
  • 272
  • 2
  • 13
  • 1
    The browser should (and will) download an `` link if it has `download` attribute... – FZs Aug 03 '19 at 12:12
  • No it will download the image NOT the link. Please run and try it with `download` attribute. – Omar_Hafez Aug 03 '19 at 14:24
  • Yes, I've meant, it will download the image, so no need for `/download?force=true` if the `download` attribute set – FZs Aug 03 '19 at 14:44
  • That's true, adding both will not cause any problem with the browsers and will download the resources correctly. I use them both because the old browser will NOT read `download` attribute correctly and to avoid that and to give support to the old browsers I use both. – Omar_Hafez Aug 03 '19 at 15:33
  • To use `/download?force=true` on an image, you need some server configuration that does it, that won't work on its own. For example, check this URL: [https://3.bp.blogspot.com/.../bangkok-4309812_1920.jpg/download?force=true](https://3.bp.blogspot.com/-TzgsUtbtPjU/XUU2b41hd-I/AAAAAAAAC5c/ywp4-bsruEwoqc9PqP2Qp0i12jF9UKF4gCLcBGAs/s1600/bangkok-4309812_1920.jpg/download?force=true). It generates a `404 Not Found` error, since an image doesn't have `/download` subfolder... – FZs Aug 04 '19 at 11:22
  • I don't any about servers or server configurations. but this blog itself doesn't work normally! Please check it: https://3.bp.blogspot.com – Omar_Hafez Aug 04 '19 at 11:57
  • But the image works: [https://3.bp.blogspot.com/.../bangkok-4309812_1920.jpg](https://3.bp.blogspot.com/-TzgsUtbtPjU/XUU2b41hd-I/AAAAAAAAC5c/ywp4-bsruEwoqc9PqP2Qp0i12jF9UKF4gCLcBGAs/s1600/bangkok-4309812_1920.jpg)... And, let's see any image (e.g. a w3css image [with `/download?force=true`](https://www.w3schools.com/w3css/img_lights.jpg/download?force=true) and [without it](https://www.w3schools.com/w3css/img_lights.jpg)) – FZs Aug 04 '19 at 13:53
  • Alright, Thanks a lot. Please send me any reference to that server configuration. thanks – Omar_Hafez Aug 04 '19 at 14:40
  • I don't know about such configuration... There should be a way to do that, but it will depend on what server & language are you using (PHP, Node.js > JavaScript, etc.) – FZs Aug 04 '19 at 16:36