When building a portfolio site for photography or a similar field, you may want to prevent individuals from copying your images without your permission. One common method to prevent image theft is to disable right-clicking, dragging images, and saving images on computers and phones. While this method does not stop all hackers from taking your images, just making it harder will dissuade most from putting in the effort.
The first thing you want to do is to enter a code injection throughout your whole site. From the Home menu of your Squarespace editing dashboard, click Settings → Advanced → Code Injection. If you need more help getting to this screen, check out our Code Injection tutorial. In the text box entitled Header, paste the following code:
<script type="text/javascript">
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG")
return false;
}
document.oncontextmenu = nocontext;
</script>
Once you’ve pasted the code, click Save and return to the home menu. From there, we need to enter some custom CSS. To enter the CSS, click Design → Custom CSS. For more help on entering custom CSS, check out our CSS tutorial. In the text box, paste the following code:
img {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
-webkit-touch-callout: none;
}
That’s it! Your pictures are now much safer. If you have any questions or feedback, please feel free to comment below.
Leave a Reply