Guest Posted December 1, 2021 Share Posted December 1, 2021 Site URL: http://dustin.land Hello all! I just wanted to know if it is at all possible to disable right-click / dragging of images usingly only CSS. Sadly I cant code inject as it is in not in my plan. If anyone knows of a way via css only without code injection, that would be great! Link to comment
Beyondspace Posted December 2, 2021 Share Posted December 2, 2021 (edited) On 12/1/2021 at 2:13 PM, DustinWilliam said: Site URL: http://dustin.land Hello all! I just wanted to know if it is at all possible to disable right-click / dragging of images usingly only CSS. Sadly I cant code inject as it is in not in my plan. If anyone knows of a way via css only without code injection, that would be great! Hi @DustinWilliam, Your final purpose is not allowing right click on image to save as it, isn't it? This is the current state when we right click on image. If it is your point, i can give some code that only allow user to save the whole page, not the individual image This is my idea that user can not save the image Hope that it makes sense Edited December 2, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Guest Posted December 7, 2021 Share Posted December 7, 2021 I've actually found a solution: CSS only: img { pointer-events: none; -webkit-touch-callout: none; } when you right-click any image and save-as, an html file will be saved, no image file. Link to comment
g_franchini Posted January 18, 2022 Share Posted January 18, 2022 Hi, I used Dustin's code on my website, it worked really well to prevent people to save your images, but it has an issue on mobile with 7.0 Forte indexes: it disable arrow's clicking on carousel indexes (both right and left arrow). Do anyone have another solution to disable right click ONLY on images whitout creating any issue on mobile? Thank you. Link to comment
tuanphan Posted January 19, 2022 Share Posted January 19, 2022 23 hours ago, g_franchini said: Hi, I used Dustin's code on my website, it worked really well to prevent people to save your images, but it has an issue on mobile with 7.0 Forte indexes: it disable arrow's clicking on carousel indexes (both right and left arrow). Do anyone have another solution to disable right click ONLY on images whitout creating any issue on mobile? Thank you. Use this new CSS @media screen and (min-width:901px) { img { pointer-events: none; -webkit-touch-callout: none; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
g_franchini Posted January 19, 2022 Share Posted January 19, 2022 (edited) 1 hour ago, tuanphan said: Use this new CSS @media screen and (min-width:901px) { img { pointer-events: none; -webkit-touch-callout: none; } } Thanks Tuan, in the meantime I made a mix of codes found in different places and modified for my needing (because I'm scary that your last modification could anyway cause trouble with arrow clicking on biggest tablet, but I don't know if I'm saying something wrong because I don't have a tablet to verify it). I used this code to block from saving images on mobile: Quote img { -webkit-touch-callout:none; } I found the original version of that here: https://forum.squarespace.com/topic/9449-how-can-i-override-the-browsers-right-click-settings/#comment-266794 but it has the problem that it prevents to open links (or anything else) in other panels, copying text etc. While to block right click image saving on desktop devices, I used this in Advanced > Code injection > Header, that you originally posted on your website https://beaverhero.com/squarespace-disable-right-click/ and was implemented to avoid image drag as well here: https://forum.squarespace.com/topic/203953-inject-code-for-blocking-right-click-and-drag-and-save-for-images/#comment-493592 Quote <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { $("img").on("contextmenu",function(e){ return false; }); $("img").on("dragstart",function(e){ return false; }); }); </script> In this way I have the first code that avoid right click on mobile (only on images) and the second one that avoid from dragging and saving images on desktop. If there is something missing or wrong that you can see, please tell me. Edited January 19, 2022 by g_franchini HeatherV 1 Link to comment
Snowdog Posted November 1 Share Posted November 1 Is there any way to lock down a site so that right clicking on a desktop or touch & hold on a mobile does not result in any kind of context menu? Certainly one that includes the saving of images, the opening of images in another tab or the inspection of elements? My main specific issue is that I'm using an image slider from Rebecca Grace Designs to show before & after images. It's a fantastic bit of code & does exactly what I want but it's currently allowing me to save out the full quality master images from my site. I'd like to know if this menu can be disabled without affecting the functionality of the slider? Link to comment
HeatherV Posted November 11 Share Posted November 11 Hi All, I'm completely new to this CSS code thing and am trying to prevent photos being downloaded from my website. I've figured out how to prevent right-click downloading, but I'm still not clear on preventing it on phones. This "New CSS" given above, where does it go in the code? In the SEO Header or Footer? Or elsewhere in the code found within the Themes. Thanks! This is the code I'm referring to: @media screen and (min-width:901px) { img { pointer-events: none; -webkit-touch-callout: none; } } Link to comment
melody495 Posted November 11 Share Posted November 11 4 hours ago, HeatherV said: This "New CSS" given above, where does it go in the code? In the SEO Header or Footer? Or elsewhere in the code found within the Themes. Thanks! This is the code I'm referring to: @media screen and (min-width:901px) { img { pointer-events: none; -webkit-touch-callout: none; } } Hi, CSS goes in Custom CSS. You can find it here: Website -> scroll all the way down to Website Tools -> Custom CSS. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody 💁♀️ SquareSpace Developer You dream it, I'll make it happen. Contact me: 💻 melodylee.tech ✉️ my email 📍 UK based. The great thing about the internet, we can work together from anywhere. #neverstoplearning ☕ I like coffee 😊 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment