Protecting Images

Helpdesk Website Builder
1

I want to protect the images on my site from right-click download. I found this cms code:

img {
   pointer-events: none;
}

This works really well, the problem is it disables all pointer actions, like hover effects with the mouse. Is there a way to prevent download but still have hover effects?

Thanks so much!

2

Hey there,

have you tried other ideas from this Stack Overflow? html - Protect image download - Stack Overflow

Re: How to protect images from being downloaded

3

Please clarify:

Where, specifically, should one add the CSS code shown above?

EXAMPLES:

  • in each an every image’s properties via the “Edit CSS” menu
  • somewhere in the index.html file
  • elsewhere / via other means

Thank you.

4

Hey there Scott,

did you see this thread?

It says:

Like to quote an important point though:

there is no 100% protection against image download

Aside from that, some Sitejetters have used the solution

img {
 pointer-events: none;
}

… that usually worked quite well. just put it in the CSS - right on top.

5

Thank you, Andre.

I reviewed the referenced thread; however, am still unclear as to the exact location required/into which specific CSS resource I must paste the sample CSS code.

Please clarify.

6

Does this help? :slight_smile:

7

Unfortunately, no.

  1. From the Sitejet editor, I right-clicked on one of my images.
  2. I selected: “Edit CSS”
  3. I pasted the referenced code at the very top of the displayed CSS (on the 1st line beneath the greyed-out comments, above.
  4. I saved and published the changes then quit the Sitejet editor.
  5. After several hours and numerous page reloads, I see zero changes. I am still able to right-click on the affected (and all other) image(s) on my website.
8

attached: example

example
example962Ă—1434 115 KB

9

Hi!
It’s not possible to protect images from being downloaded.
The above CSS code will disable all the pointer events (including to right click) for all images. However, the user will still be able to download them using the “Inspect elements” option or by installing a browser add-on.

If you still want to disable the pointer events for images it is better if you do this only for specific images that you really need. So, … instead of targeting all images you can create a class and apply that class to the image.

Here is the updated CSS code

.no-events{
    pointer-events: none;
}

Here is how:

  1. Add the CSS code to your website

    Screenshot 2024-09-11 at 09.45.45
    Screenshot 2024-09-11 at 09.45.45986Ă—642 52.3 KB

  2. Add the class to the image that you want to disable the events

    Screenshot 2024-09-11 at 09.43.51
    Screenshot 2024-09-11 at 09.43.51748Ă—610 43.5 KB

Hope this helps!

1 Like
10

Thank you for the added details, Lucian.

I can confirm that everything is working as expected now.

I completed the following steps (per your instructions, above):

  1. create a class (globally, via the Sitejet <…> Code / Global CSS editor):

    1a) add the following code to the very top of the global CSS configuration:

   .no-events{
         pointer-events: none;
     }

  1. from the Sitejet editor, apply this class to individual images:

    2a) double-click an individual image which requires disabling of right-clicks

    2b) in the left-hand Elements column, click on the Style tab (with a painter’s palette icon)

    2c) scroll down to & expand the menu item ID & Class

    2d) to the immediate right of “Element (div)” select Image (img)

    2e) in the blank field “CSS classes” enter: no-events

    2f) click the bold + (plus sign) symbol to the right of the text just typed

    2g) confirm that the entry no-events appears in the numbered list immediately below

    2h) save changes by clicking on the red floppy disk icon at the top of the screen

    2g) click the Publish button at the top right corner

    2h) wait for published website changes to propagate

    2i) reload/refresh the website in a browser window

    2j) right-click on an image to which the above CSS changes were applied

    2k) confirm that right-click functionality has been disabled; DONE

1 Like