Disabling the context menu

The context menu is a common feature in many web browsers. Often called the "right-click menu", it allows visitors to easily interact with a web page in various ways. The context menu may be used to navigate forward and back, to open a hyperlink in a new window or tab, to inspect a page's source code, to copy and paste selected text, to search highlighted terms on Google, to Save or Print a page, and more.

But while the context menu puts a wealth of valuable interactions at the visitor's fingertips, many photographers dislike it for a single reason: the context menu allows visitors to save images from a web page to their desktop. And so it has become fairly common practice within the online photography community to disable or hinder the context menu in various ways, often using Javscript.

In this tutorial, I will demonstrate one method of disabled the context menu using PHPlugins. I will also argue against doing so.

In previous versions of my web engines, I have reluctantly included the option to disable the context menu as a checkbox feature, mostly because users have asked for it. Now that PHPlugins have matured, however, I think them a better way to implement such scripts. One reason is that it allows me to support the feature without actually supporting it.

A more practical reason, though, is that it is easy to change, disable or remove PHPlugins should there be need to do so. For example, it is incredibly frustrating having to troubleshoot users' sites when the context menu is blocked. The user having the ability to easily "switch off" the script makes troubleshooting easier. Users wanting to inspect or edit their own source code will also find it easier to work on their published pages while having access to the context menu.

Wait. Think about what you're doing.

To say that we are "disabling" the context menu is misleading. What we actually are doing is blocking the menu, or blocking its trigger. 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. 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.

"Yes, come in and welcome to my home on the web. Make yourself comfortable, have a look around. I see you've got two perfectly good legs, but if you're going to walkabout the house, you'll have to hop on one foot. I simply cannot allow you to walk as you are designed to walk. But do enjoy your stay."

And so I implore you not to block the context menu. But it's your site, so do what you like.

Not a perfect solution.

Beyond principle, disabling the context menu remains a flaky solution to this perceived "problem". There are half a million other ways to download images from a website, and so blocking just this one is almost pointless. You prevent nothing; at best, you only discourage.

Depending on the browser, the script may not work at all. And in my own tests, I have found the script successfully blocks the context menu on most pages, but not on WordPress blogs. And that's despite verifying the script's inclusion in the source code.

The script.

After considering my points above, if you are still set upon doing this -- and assuming you've read up on the basics of PHPlugins -- the code is:

// DISABLE CONTEXT MENU
function ttg_body_bottom( $style, $path ) { 
	echo '
<script>
	$(document).ready(function() {
	    $(document).bind("contextmenu", function(e) {
	        return false;
	    });
	});
</script>
	';
} // END

Generally, scripts of this nature are to be placed in the foot of the page, hence we use the hook ttg_body_bottom.

For WordPress, you might try plugins such as this one.


14 Responses to “Disabling the context menu”

  1. Sandis Kajins says:

    I totally agree. Context menu should not be blocked. I have Evernote Web Clipper on context menu and its very frustrating when i want to clip website URL and the context menu is blocked.

    · January 2, 2012 @ 8:20 am

  2. Yes, it’s a strategically placed riffle shot that only kills the obvious in regards to limiting the less informed on downloading images. It’s effectiveness, depends on your point of view. It does however cut down a fair portion and therefore does provide some value. Unfortunately the php method forces more work on the user or customer who spends time creating their website. Personally, I would rather spend more time behind the shutter and less maintaining my website. This is why I’ve been using TTG for quite some time now. From the user perspective, the “check box” solution was simple and straight forward with no “learning curve” required or additional steps during site updating. Please put back the “box”……

    Matt

    · January 3, 2012 @ 8:18 am

  3. noel victor says:

    The same argument holds true for this product TTG websgalleries. We buy a product so we have an ability to control how our website looks. But how our website looks and feels to the browser is entirely upto us. Some of us may want users to download pictures others may not want because it is their livelihood. It definitely curtails the casual user from downloading pictures.

    When we get a product such as TTG webgalleries we do not want to be bothered by PHP scripts….. the elegance of the TTG is the simplicity and the ability to control how our website looks and feels by just checking the boxes…we are here to demonstrate our galleries/art not spend time creating the website….

    Please leave the choice to us and please keep the simplicity and flexibility of the web galleries!

    · January 4, 2012 @ 3:01 pm

  4. Jon Brehaut says:

    I want to add my voice to bringing back the “disable context menu” option in a simple way (also the easy way to add drop down menus).

    What first attracted me to TTG was the ease with which I could develop a professional web site from within Lightroom without having to get too far into coding and other web design issues. Even though I can handle some coding and have built simple sites myself, I wanted to spend more time on my photography than on my web site. TTG met this goal in spades. I’ve loved my TTG powered web site and get lots of positive comments on it. I bet I’m not the only one who feels this way. Wasn’t this primary marketing strategy of TTG products?

    It seems to me though that with every new release, TTG has become harder to use. First in CE, we lost the easy way to add simple drop down menus. Now in CE2 we lose the easy way to disable the context menu.

    I’m all for the ability to establish site-wide resource use (headers, menus, etc) that the php hooks bring. And I fully intend to spend some of my spare time to learn how to do this. But to be forced to learn php just to keep what I had with earlier incarnations of TTG products is frustrating and annoying. Despite my ability to code simple sites, I will need to do a lot of work to master php hooks. I hadn’t thought I would have to wait to implement my entire site in CE or CE2 while learning the hooks method.

    In fact, I can’t. So what I am planning to do (and hope it works) is develop my galleries in CE so I can use the Cart (which is great) and keep the context menu disabled, and where I can live without drop down menus. But for all my other pages, I will have to stick with Pages 3.7.3 for the foreseeable future. Which means I can keep my present drop down menus and disabling of the context menus, while I learn hooks so I can move up to CE/CE2. But I will be unable to activate the cart listener on my other pages. This will be a low-level but continuous source of annoyance for me, probably for several months as I learn hooks.

    · January 7, 2012 @ 2:19 pm

    • Matt says:

      One of us is very confused. TTG plugins have never before offered options of any kind for drop-down menus. Drop-down menus are entirely new in CE2. And via PHPlugins is the only way I will ever offer them. Here’s a snippet of an old article that explains my reasoning on drop-down menus:

      Over the years I have received numerous requests to build drop menus into the engines as a feature. Despite requests, I have neglected to do so. While drop-down menus are not difficult to create, there are several reasons I have chosen not to add them to the standard feature set. Two of my most compelling lines of thought on the matter are that drop-down menus would be something of a contextual misfit in my creations, and that drop-down menus would preset a user-interface nightmare within Lightroom’s web module.

      “Nightmare?” I hear you say. “Drop-down menus are the very stuff of blissful reverie and sweet repose!”

      Yes. NIGHTMARE. Presently, there are six standard menu items supported in TTG web engines; each menu item requires two input fields, one for the hyperlink text and one for the hyperlink target. In keeping with the number six, let’s suppose I were to allow six children for each parent. So we have the original six parents, each with six children which brings us to a total 42 menu items; each menu item requires two inputs, giving us 84 input fields. And that’s before we even begin to discuss styling controls for the appearance of the menu. The majority of new users seeing that would quit Lightroom, delete my plugins from their Web Galleries folder and request a refund. I wouldn’t blame them, and I would lose all of my user-friendly cred.

      And so I will never, ever build drop-down menus as a standard feature into TTG web engines. Just. Ain’t. Happening.

      If you somehow had drop-down menus on a pre-CE version site, I think you must have added them yourself, possibly using an old tutorial John Bishop had authored.

      The standard TTG menu and the gallery index are designed to provide simple-to-implement navigation that accommodates as many image galleries as you want to publish to your site. And now, with CE2 and PHPlugins, drop-down menus can be had relatively easily for those who don’t mind the extra step. All the code is already in the phplugins.php file as an example, and all you need to do is uncomment it.

      Also, you say “… being forced to learn PHP …”, and that’s just not the case. To use PHPlugins on a basic level, all the PHP you need is copy-and-paste from my examples. In truth, I’m crap at PHP and most of what I do is copy-and-paste from the examples. If you have a basic comfort-level with HTML, then you should have no problems using PHPlugins.

      As for the issue of the context menu, I feel a certain responsibility to promote good web-design practices. Disabling the context menu is, without exception, not good practice. Moreover, it doesn’t even work half the time; depending on the browser or context, the script fails utterly. It could also cause other potential conflicts, and as we move into the world of WordPress and all of its many plugins, any opportunity we can take to eliminate potential problems down-the-line is an opportunity worth taking.

      For those who still wish to disable the context menu, it’s easy. You enable the PHPlugins checkbox and fill in the path; then you copy and paste the script above into the phplugins.php and you’re done. You don’t need to know any code to do that, and you never have to think about it again, as it will be applied automatically to all of your CE2 pages and galleries as you add them to your site.

      · January 7, 2012 @ 3:15 pm

      • Jon Brehaut says:

        Matthew, I have to apologize. While I wouldn’t want to try programming php from scratch, the way you have set up the phplugins.php files is very easy to adapt to my purposes. What I anticipated would take me several months to accomplish, I have done in a matter of a couple of weeks.

        There are still some things to figure out with the php coding, but I have a workable CE2 web site now, including a blog that matches my main site—I just need some more guidance on getting my PayPal API credentials and I’ll be ready to turn it all on.

        CE2 is almost the greatest thing since sliced bread! I’m loving it.

        Jon

        · January 24, 2012 @ 7:37 pm

        • Matt says:

          Glad to hear the setup went easier than you’d feared, Jon.

          PayPal doesn’t make the API stuff very easy, which is sad. Ben would be able to give you a better answer to that than I would, I expect. Should probably try to get a page on the wiki about it.

          · January 25, 2012 @ 12:59 pm

        • Matt says:

          This old forum post my help with the PayPal stuff:
          http://forum.theturninggate.net/viewtopic.php?f=34&t=1134&p=7870#p7870

          · January 25, 2012 @ 1:00 pm

          • Jon Brehaut says:

            Thanks. I had missed that post.

            Just to confirm: I select the option that says
            “Request API credentials to create your own API username and password.”

            I do not select the option to give a third party credentials.

            Is this correct?

            · January 25, 2012 @ 1:11 pm

  5. Daryl Lynch says:

    Matt,
    There is a raging debate in my home over this issue.

    My IT specialist son agrees with you, on the basis that a “thief” will get around it easily anyway. However, I want the context menu disabled as not every person that will copy the photo knows the other ways.

    I have a friend who shoots concert performances and has found several of his photos being used by promoters around the world for promo work, without his consent or knowledge. I have been privy to the email correspondence that has ensued to have royalties paid for the use of the photos, or the photos removed from the site entirely (his preference at that time). Consequently, I will be disabling the context menu to make it as hard as possible without using flash for anyone to steal my photos.

    Now to work out what you mean with your instructions on how to do this, because I’m not an IT expert, and I’ve had little help this time in reconfiguring my website.

    Having made that comment, your WordPress instructions are far more instructive, and I have my configuration template transferred to WordPress and running on my JustHost domain, and have been entering daily entries. Now just to catch up with Pages and Galleries.

    I like the new CCE2 engines, and am hoping that you have ironed all the little bugs out now.

    Just my “two cents” worth.

    Cheers,
    Daryl

    · January 8, 2012 @ 6:02 pm

    • Matt says:

      Well, I’m glad someone agrees with me. As I said above, the PHPlugins stuff is a pretty simple copy-and-paste job. And you install it once, then never have to do so again. Gradually getting the kinks out of the CE2 engines. I’m going to be posting another round of updates probably tomorrow which includes some debugging and some general strengthening. But the focus of the updates — for TTG CE2 Pages and TTG CE2 Theme for WordPress, anyway — is largely on new features. And feature updates are definitely more exciting than bug fixes.

      · January 8, 2012 @ 6:21 pm

  6. James Herman says:

    I agree not particularly reliable but is helpful. By controlling the most common way for a visitor to lift images off of my site, I control the vast majority of the leakage.

    I too am a programming neophite and would prefer to have the one click approach. I can always turn it off until I have the site debugged then re-upload the working version with the context menu turned off. An additional advantage to the one click approach is that I can edit my website and upload it to BlueHost from Lightroom without the additional step of exporting to a file then editing our, your and to a much smaller degree my, most exellent hard work.

    Two questions:
    1. I use TTG HighSlide and Pages. Which file(s) specifically do I perform this cut/paste to? And where to paste? Must I do it for every gallery uploaded?

    2. Would it not be more convenient to replace the checkbox and perform precisely that insertion via a check box ath the time of gallery upload (I like the direct uplaod opton from LR particularly)?

    OK three questions.

    · January 15, 2012 @ 3:30 pm

    • Matt says:

      By controlling the most common way for a visitor to lift images off of my site, I control the vast majority of the leakage.

      That’s conjecture.

      … I can edit my website and upload it to BlueHost from Lightroom …

      We strong advise not uploading directly from Lightroom, and we promote this advice at every opportunity throughout our documentation and this blog. The Web module’s upload functionality is flakey and unreliable. And when you upload without first putting an eyeball on your target destination, you introduce an unacceptable probability for pilot error; this can often lead to broken websites.

      I use TTG HighSlide and Pages. Which file(s) specifically do I perform this cut/paste to? And where to paste?

      Enable PHPlugins as described in our documentation. Copy-and-paste the function into the phplugins.php file belonging to TTG CE2 Pages.

      Must I do it for every gallery uploaded?

      Nope, just once. After that, the function will automatically be including in every PHPlugins-enabled gallery you upload to your site. You never have to think about it again.

      Would it not be more convenient to replace the checkbox and perform precisely that insertion via a check box at the time of gallery upload (I like the direct upload option from LR particularly)?

      See multiple points above, re: don’t upload from Lightroom and re: do it just once.

      · January 15, 2012 @ 4:06 pm

  7. Jon Brehaut says:

    Matthew, you can ignore my last reply re: confirming the PayPal stuff. I went ahead and did it and it works just fine.

    Thanks for the suggestions.

    · January 25, 2012 @ 1:50 pm

Comments are now closed.


CE4-Sidebar

The CE4 Web Publishing Suite

Welcome to The Turning Gate. Our plugins for Lightroom's Web module allow you to create mobile-friendly, fully responsive image galleries, websites, blog themes, shopping carts and more!

Learn more, or hit the shop!


Got Questions?

Get answers in the support forum.

Find Your Order

Can't find your download? Look it up.

Need Web Hosting?

Get affordable, reliable, TTG-certified hosting with Bluehost.

Need a Logo?

We've partnered with an award-winning graphic designer and brand consultant to offer Branding Services to our users.


TTG Recommends

Bluehost

Lightroom Queen

The Turning Gate receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, The Turning Gate carefully chooses affiliates based upon the quality of services and products these entities provide to TTG users.