Jump to content

Download images from link directly

Go to solution Solved by paul2009,

Recommended Posts

Hello, I'm trying to create a gallery page, where I would have all my images, and below each image there would be a title and a "download" link. When someone clicks on "download" they would be downloading the image on their computer automatically.

I've found this code on W3 Schools: https://www.w3schools.com/howto/howto_html_download_link.asp

<a href="/images/myw3schoolsimage.jpg" download>
  <img src="/images/myw3schoolsimage.jpg" alt="W3Schools">
</a>

which does exactly what I need! 

I adapted it on my Squarespace website to this:

<a href="https://static1.squarespace.com/static/5bdb20e42714e55b84eab1ce/t/6489e1afea75bd273c2c6170/1686757811651/CL01-ANT-Antinium-CUTOUT-Coolicon-Lighting-1933-factory-style-lamp-pendant-light-shade-1933-antinium-handmade-in-the-uk.png" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="auto">
</a>

but instead of the image downloading on the computer, it opens in a new tab.

It seems that Squarespace's code is overwriting my HTML code injection. I contacted support, who suggested that I asked the Forum instead.

How can I  have images being downloaded instead of opening in a new tab please?

Link to comment
  • Replies 4
  • Views 3.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
3 hours ago, ChloeCL said:

I'm trying to create a gallery page, where I would have all my images, and below each image there would be a title and a "download" link.

When someone clicks on "download" they would be downloading the image on their computer automatically...but instead of the image downloading on the computer, it opens in a new tab.

If the image file is stored on Squarespace, you won't be able to achieve this.

This is because Squarespace store images on a separate content delivery network (CDN) which has a different domain name (a different "origin") than your site. There's a security mechanism called a same-origin policy which protects website visitors by preventing files being downloaded if they originate from a different URL than the website being viewed.

Did this help? Please give feedback by clicking an icon below  ⬇️

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
44 minutes ago, paul2009 said:

If the image file is stored on Squarespace, you won't be able to achieve this.

This is because Squarespace store images on a separate content delivery network (CDN) which has a different domain name (a different "origin") than your site. There's a security mechanism called a same-origin policy which protects website visitors by preventing files being downloaded if they originate from a different URL than the website being viewed.

Did this help? Please give feedback by clicking an icon below  ⬇️

 

Thank you for your answer, that does make sense.

Is it possible to store the images on the same CDN as my website?

Link to comment
17 minutes ago, ChloeCL said:

Is it possible to store the images on the same CDN as my website?

Your website will be served from your primary domain whereas images won't. It isn't possible to change this.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.