Protection images

I’m looking for a better protection against downloading images from sites than only blocking ‘right-mouse click’.
Wordpress has a plug-in called Shrinkwrap Images. It places a tiny invisible image on top of every image on site. When trying downloading or copying the image you get the invisible image instead of the real image, Sounds great.
Is there a MODX extra available who works the same? Or do you have an idea how to develop something like that? I think it would be a nice extra to have.

I’m not aware of any extra that does this. Maybe this could be achieved with a CSS class creating a pseudo element like ::before that you add to your images.

On a different note, if blocking right click doesn’t keep people from downloading your images, this wouldn’t either as the image path is still clearly visible when inspecting the sites code.


I second this, adding “locks” to images and videos on a site, would likely only encourage people to find ways around, I personally enjoy doing it as a challenge when I encounter those, and in most cases, you’ll be clueless that your images where downloaded, here is a brief article about it bottom line, you might implement something around it like a personalization to phpthumb to add a transparent layer as you described, but at the end of the day, it could end up being wasted money that could be fixed just by adding a water mark

1 Like

You don’t need a plugin for that, as @vibedesign said you can use CSS to solve the problem but I thing an ::after might be more useful in this case.
Only need the parent element to be position: relative, then the ::after element need to be something like this:
::after {
content: “”;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
that should be enough! :+1:

1 Like

thank you. I’ll try this