Jump to content

Disable saving images to mobile devices

Recommended Posts

After doing a quick search, I found a code to disable right-click options on the desktop. However, when viewing my site via mobile device, the feature is still active. I'm still able to hold the image and save the image to my phone. Is there an accessible code out there that disables this feature on mobile devices as well?

All help is appreciated. 

Thank you

Link to comment
  • 1 year later...
  • Replies 4
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

I found a code to disable right-click options on the desktop which has worked just fine, however via mobile the save image feature is still active (iPhone). Is there some coding that will disable this feature on mobile devices as well? I found one in the forum from a few years back but when used it stopped me from being able to edit my site at all - I couldn't click into any of the text boxes!

Help appreciated! 

Link to comment
On 8/7/2021 at 1:18 AM, twigsplace said:

I found a code to disable right-click options on the desktop which has worked just fine, however via mobile the save image feature is still active (iPhone). Is there some coding that will disable this feature on mobile devices as well? I found one in the forum from a few years back but when used it stopped me from being able to edit my site at all - I couldn't click into any of the text boxes!

Help appreciated! 

Hi. Can you share link to your site? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 1 year later...

Hello all, I went down this rabbit hole today. I fully understand that if someone really wants your images, they are on a website and there is a way to get them.
 

However my goal was to prevent the avg person from being able to save photos from my site to their phones.
 

Preventing right click completely creates too many usability issues for me to be comfortable with so I’ve come up with the solution to create transparent overlays over all the images on the site that essentially don’t allow you to click the image. So far no issues with usability, and doesn’t interfere with anything else on my site. 
 

I inserted this into the Header 

 

<style>

    .image-overlay {

        position: relative;

        z-index: 9999; /* Ensure the overlay appears on top of the images */

        background: rgba(255, 255, 255, 0.0); /* Adjust opacity as needed */

        width: 100%; /* Cover the entire width of the image */

        height: 100%; /* Cover the entire height of the image */

        pointer-events: none; 

    }

    img {

        pointer-events: none; 

    }

</style>

 

<script>

window.addEventListener('DOMContentLoaded', () => {

    const images = document.querySelectorAll('img');

    images.forEach((image) => {

        const overlay = document.createElement('div');

        overlay.classList.add('image-overlay');

        image.style.position = 'relative';

        image.appendChild(overlay); 

    });

});

</script>

Hope this solution helps someone out who is looking to do the same thing. 

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.