User Tools

Site Tools


phplugins_disable_the_context_menu

Disable the Context Menu

Amongst the misinformed, disabling the context menu, a.k.a. preventing the right-click menu, is a popular method of attempting to prevent image theft from web pages. If you're the type of person would put a band-aid on a chainsaw wound, then this article is for you.

As a proponent of web-standards and design accessibility, disabling the web-browser's context menu – or intentionally interfering with the browser's designed functionality in any way – is something that I do not condone, nor support. I provide this function as is, only so that when people ask about it, I can point them at this page and wipe my hands of the conversation.

The notion that you can protect your images from being downloaded by using such a script is an utter fallacy; it's like hiding from monsters by closing your eyes. If you want to protect your images from illegitimate use, then your best options are either of:

  • Don't put it online.
  • Watermark the image, and embed metadata.

I like the latter option.

To say that we are “disabling” the context menu is misleading. What we actually are doing is intercepting the right-click and asking the browser to do something else: “Hey Browser, don't open the context menu on right-click; instead, pour me a beer!” It's up to the browser (or its makers) whether or not to honor our request (the browser will probably choose not to pour your beer).

The holy grail of web-design is that a web page should be intuitive and pleasant to use, and that it should function identically across all platforms without hindering the platform or the user. When we block the context menu, we are intentionally hindering the web-browser and disabling the visitor, working against this principle. We invite the visitor into our space, then put them into restraints. The web-browser is a tool, and we deny our users the right to use that tool as designed, and in those ways to which the visitor may be accustomed or dependent upon. We create a poor user experience, an experience that is counterproductive to the purpose of having a well-designed website, and an experience in which the visitor themselves is disabled and diminished.

If the argument is lost on you, then your PHPlugins function is below. Outside of what is written on this page, this function is 100% officially unsupported, and I will discuss the matter no further.

// DISABLE CONTEXT MENU
function ttg_body_bottom( $style, $path ) { 
	echo '
<script>
$(document).ready(function(){ 
	document.oncontextmenu = function() {return false;};
	
	$(document).mousedown(function(e){ 
		if( e.button == 2 ) { 
			alert("Hi. You\'ve right-clicked our image gallery, and so we assume you are a thief. We\'ve got our eyes on you, thief, and every time you right-click our galleries, we will drown a kitten on your behalf. Do have a pleasant day, and please stop drowning kittens."); 
			return false; 
		} 
		return true; 
	}); 
});
</script>
	';
} // END

Sic the Dinosaur

Or, if you want to be fucking hilarious, download the Velociraptor kit. Unzip and upload the kit to your /phplugins/ folder, for example:  /phplugins/Raptorize-Kit/ . Open and edit the  jquery.raptorize.1.0.js  file to update resource locations. In the file, find and change the following lines:

Find:

var raptorImageMarkup = '<img id="elRaptor" style="display: none" src="raptor.png" />'

Replace:

var raptorImageMarkup = '<img id="elRaptor" style="display: none" src="/phplugins/Raptorize-Kit/raptor.png" />'

Find:

var raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="raptor-sound.mp3" /><source src="raptor-sound.ogg" /></audio>';

Replace:

var raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="/phplugins/Raptorize-Kit/raptor-sound.mp3" /><source src="raptor-sound.ogg" /></audio>';

Find:

				"display" : "block"

Replace:

				"display" : "block",
				"z-index" : "2000"

Now, use this PHPlugins function instead of the above:

// DISABLE CONTEXT MENU
function ttg_body_bottom( $style, $path ) { 
	echo '
<button class="raptor" style="display:none;">Raptor</button>
<script src="/phplugins/Raptorize-Kit/jquery.raptorize.1.0.js"></script>
<script>
$(document).ready(function(){ 
	$(".raptor").raptorize();
	document.oncontextmenu = function() {return false;};	
	$(document).mousedown(function(e){ 
		if( e.button == 2 ) { 
			$(".raptor").trigger("click");
			return false; 
		} 
		return true; 
	}); 
});
</script>
	';
} // END

Enjoy your newfound enemies.

phplugins_disable_the_context_menu.txt · Last modified: 2016/10/19 06:15 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.