Force image link to download instead of opening in new tab

[johnb52243184]

I've created a bunch of basic PNG icons for staff to download and use in their presentations at the institution I work for. Using custom HTML & CSS I set it up so that the staff can browse the icons and click to download the icon that they want. or at least that was the intention. It did work for a while, but recently when a staff member clicks on an icon it opens in a new tab instead of downloading.

this is the code that I'm curently using:

<div id="image_download" ><a href="myimage.jpg" download target="_blank">

<div class="darken"><p class="darken_text">image title</p></div>

<img src="image_thumb.jpg" alt="Campus" class="image_thumbs"/></a></div>

Any ideas how I would force this to download upon click instead of opening in a new tab?

Preferably using HTML and CSS. I can’t use anything too fancy such as PHP as I’m unable to access the root folder for the institution VLE.

Any help would be much appreciated.

[Jon Fritz]

The target="_blank" in your link is what's forcing open the new tab/window. The download attribute doesn't work in any IE browser, just Edge 13+, so no matter what, it will open the image itself in IE and early Edge browsers.

You could .zip the images and then link to the .zip archive(s). It's an extra step for the end user to extract them, but they'll always download into the user's downloads folder vs opening a new window (if you remove that target attribute).

[johnb52243184]

Thanks Jon,

It doesn't seem to work in Chrome either. I tried removing the target="_blank" but this doesn't work.

I did consider putting them in a zipped folder, but this additional steps that I don't want staff to go through each time they want to download an icon (plus believe it or not some people wouldn't know what to do with a zipped folder).

I also considered just telling the staff to right click and save as. I didn't really want to do this but it looks as though I may have to of I can’t find a work around.

[WolfShade]

Just out of curiosity, would there ever be a time/situation whereby more than one image would be needed?

Taking Jon's zip suggestion, you could set it up so that every image clicked would 'select' it and then a button provided to gather them all and put them into a zip file for download.

Just my two cents.

V/r,

^ _ ^

[johnb52243184]

Thanks WolfShade,

No it's more likely that they will only need to download one or two images as and when they need them. Plus, although there are only a few images at the moment, I plan on creating a lot more and adding them gradually over time.

[Jon Fritz]

Odd, the download attribute should work fine in Chrome 20 or later (that's a pretty old version of Chrome).

Does your page have an html5 doctype declaration, or something else?

Maybe that, or other errors, are confusing the browser?

Try running the validator at http://validator.w3.org/nu and clean up any issues it lists. See if maybe cleaning the code makes the attribute function correctly.

[Nancy OShea · Accepted solution]

Put your downloadable icons and the HTML page in a folder called DOWNLOADS along with this code inside an .htaccess file.   This should force a download dialog to appear in all browsers.

.htaccess code:

<FilesMatch "\.(jpg|png)$" >
    ForceType application/octet-stream
    Header add Content-Disposition "attachment"
</FilesMatch>

[Nancy OShea]

The .htaccess method works for me in FF, Chrome, IE 11 and MS Edge.

Downloader test

[johnb52243184]

Woohoo!!! It works! thank you very much for your help guys! I've been messing about with htis for ages and now I've finally got it to force downlaod the images

[Joshua5C77]

Fantastic! Worked when I changed the file type to what I needed as well! 😄