Disabling right click

Hi guys, just a quick question on any ideas how we can disable right click on Ghost (Casper theme)? I’m trying to protect the content, is this a good idea? Many thanks for any thoughts!

What do you mean by “trying to protect the content”?

@egg I mean highlighting & right click copy.

Most operating systems allow a user to use ctrl+c or cmd+c or other keyboard shortcuts to copy text, besides - when you put content on the internet, there is nothing to stop someone from taking a screenshot, or using something other than a web browser to download that content.

If you want your content to be private, I would suggest looking at our private site functionality or the members feature which will restrict access to the content at the HTTP/S level! :relaxed:

3 Likes

@egg Hmm okay i agree (was a bit haunted by the last copy), thanks @egg for your recommends! :blush:

There is no way to protect public content, that is not how it works. Anytime you publish something, it is public, and anyone can copy the text. If someone has a little bit expertise with programming, they could easily scrape all your articles within an hour. That’s just how it works, when you publish something to the internet.

1 Like

Try this out: this only disables right click / dragging, but does not prevent users from grabbing from source / keyboard shortcuts.

.noselect {
  -webkit-touch-callout: none; /* Safari Touch */
  -webkit-user-select: none;   /* Webkit */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Edge*/
   user-select: none;       /* Future-proof*/
}

.nodrag {
   -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
   user-drag: none;
}
1 Like

and where would i place this code?..I would like to deter people from saving my images I know that it still can be done

can I put this at the end of my css file?

If you’re using Casper theme, youcan put it in either the global.css or screen.css.

Then in default.hbs add <body class="{{body_class}} nodrag noselect”>

Finally rebuild your theme with yarn zip and upload it for changes to take effect.

Oherwise, you can add the code to the Code Injection section in Ghost between the <style></style> tags. Still need to add nodrag noselect to default.hbs in this case.

The process may be very similar for other themes.

I’d add the css in the Site Header. did it work for you?

no, it didn’t. I want to say the <body class= change lead to some image spacing changes to my site.

I will say adding this to the code injection section seems to work after you refresh the page

<script>
window.oncontextmenu = function () {
			return false;
		}
		$(document).keydown(function (event) {
			if (event.keyCode == 123) {
				return false;
			}
			else if ((event.ctrlKey && event.shiftKey && event.keyCode == 73) || (event.ctrlKey && event.shiftKey && event.keyCode == 74)) {
				return false;
			}
		});
	</script>
1 Like

that worked, thanks!

Forgot to tell you: the code piece initially was for text-based content. It also deters long-pressing & saving images on phones. Not laptops yet. The script you share completes it.

can you share a screenshot of where you placed the code, please

I tested it on my android and it blocks …but on safari on ios you can still save…if your use chrome on ios you can not.

PM’d you.

here we go boys

<style>
img {
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
</style>

put this in the code injector header section

1 Like