Jump to content

Disable image download for mobile versions

Recommended Posts

Hi

There is a script that prevents the image download. That is, the right click is not possible. I found this in the Help Center and added it, it works fine. This only works for desktop versions. Unfortunately, however, you can still save the images with the iPhone. Do you guys have an idea or script on how to stop this as well?

I am a bit surprised that this is not a standard feature on Squarespace. Other CMS's have this by default in a plugin.

I know there is no complete protection and many options like compressed file, watermark, copyright and more. But I would like additionally that the download is not possible.

Thanks a lot for help and inputs.

 

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

@Ren7 You can add the following JS to the page. This should prevent right clicking on desktop and mobile. If don't want to target all images on the page, update the img string value in the document.querySelectorAll() method to a CSS selector with a higher specificity

(function(){
  // Loop through all images on the page adding necessary styles and 
  // event listener to prevent images from opening the context menu.
  document.querySelectorAll('img').forEach(img => {
    img.style.webkitUserSelect = 'none';
    img.style.webkitTouchCallout = 'none';
    img.addEventListener('contextmenu', evt => {
      evt.preventDefault();
      return false;
    });
  });
})()

Make sure you add the JS code between <script> tags e.g.

<script>
  // Add JS code here
</script>

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

Hi 

First of all a big thank you. I have put the code in the header. Unfortunately it doesn't work and I get on the website the message below displayed. Sorry to bother you again, maybe you have an idea? kind regards

 

(function(){ // Loop through all images on the page adding necessary styles and // event listener to prevent images from opening the context menu. document.querySelectorAll('img').forEach(img => { img.style.webkitUserSelect = 'none'; img.style.webkitTouchCallout = 'none'; img.addEventListener('contextmenu', evt => { evt.preventDefault(); return false; }); }); })()

 
Skip to Content
 
 
 

 

 

Link to comment
  • 2 months later...

@Ren7 @jpeter I still can't get this to work, I have never used JavaScript so I am completely clueless when looking at the code. I have copy and pasted the message about and made sure the put the script tags either side but it isn't working. Any ideas why, do I need to change anything on it or should it just be a case of copy and pasting. I will paste what I have done below. Thanks

<script>
  (function(){
  // Loop through all images on the page adding necessary styles and 
  // event listener to prevent images from opening the context menu.
  document.querySelectorAll('img').forEach(img => {
    img.style.webkitUserSelect = 'none';
    img.style.webkitTouchCallout = 'none';
    img.addEventListener('contextmenu', evt => {
      evt.preventDefault();
      return false;
    });
  });
})()
</script>
Link to comment
  • 1 month later...

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.