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 3
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

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

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.