Highlighted

Force image link to download instead of opening in new tab

Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

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.

Untitled-1.jpg

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Put your download icons and the HTML page in a folder along with this code inside an .htaccess file.

This should force a download dialog to appear in all browsers.

<FilesMatch "\.(jpg|png)$" >

    ForceType application/octet-stream

    Header add Content-Disposition "attachment"

</FilesMatch>

TOPICS
Import and export

Views

15.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Force image link to download instead of opening in new tab

Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

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.

Untitled-1.jpg

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Put your download icons and the HTML page in a folder along with this code inside an .htaccess file.

This should force a download dialog to appear in all browsers.

<FilesMatch "\.(jpg|png)$" >

    ForceType application/octet-stream

    Header add Content-Disposition "attachment"

</FilesMatch>

TOPICS
Import and export

Views

15.5K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 20, 2018 0
Adobe Community Professional ,
Apr 20, 2018

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
LEGEND ,
Apr 20, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 1
Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
Adobe Community Professional ,
Apr 20, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
Adobe Community Professional ,
Apr 20, 2018

Copy link to clipboard

Copied

Put your download icons and the HTML page in a folder along with this code inside an .htaccess file.

This should force a download dialog to appear in all browsers.

<FilesMatch "\.(jpg|png)$" >

    ForceType application/octet-stream

    Header add Content-Disposition "attachment"

</FilesMatch>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 1
Adobe Community Professional ,
Apr 21, 2018

Copy link to clipboard

Copied

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

Downloader test

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 21, 2018 0
Community Beginner ,
Apr 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0
New Here ,
Aug 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2020 0