Prevent downloading of posted images

Support
27

No, I have said it is not a valud option for us.
But it is the most effective way to elude image stealing completly, may be the unique.

28

This is technically doable in a theme component, should not be to expensive to build maybe a few hundred dollars, open up a topic in marketplace

1 Like
30

Till now we were trying to dificult image downloading preventing the contextual menu to appear using the script that was provided above by @awesomerobot

<script type="text/discourse-plugin" version="0.8">
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({ activate: function() { this._super(); Em.run.next(function() { $('body').on('contextmenu', '.cooked img, .mfp-img', function(e){ return false; }); }); } }); 
</script>

We made a customization of the discourse theme and added the script to the header of each page.

But since the last upgrade to 3.2.0.beta5-dev (67244a2318 ) we were having errors from discourse when you tried to open a topic, and we have to delete the script.

It seems that there were some changes in discourse that prevent it to work.

imagen
imagen1920×1160 110 KB

1 Like
31

Here’s an updated version I was able fix!

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img", function(e) {
      e.preventDefault();
    });
  });
</script>
4 Likes
32

This is expected due to Ember updates, that code snippet is fairly old at this point and will need to be rewritten.

2 Likes
33

Thank you, I will try the new script.

It seems it works, at least now the context menu does not appear when you use the light box.

You can still download the image from the embedded thumbnails in the post.

34

Hi, @davidkingham

If I understand well the script you have written, the second one prevents opening the context menu, when you right click on an image that was open in the lightbox.

The first one should do the same when you right click over any image, the thumbnail in the post, for example.

But it does not work, I can still open the secondary menu and open the full image in another window.

I have tried to put this en the CSS:

img {
    pointer-events: none;
}

It prevents opening the context menu, but it prevents being able to click in the image to open the lightbox too.

What is wrong?

It woud be great to hide the download links under the lightbox.

I had previously this entry in the CSS:

.image-source-link
{
    display: none;
}

But now it does not seem to work either, as the download and original image links are shown anyway under the lightbox image.

UPDATE:

I have modified the second script to include .lightbox-wrapper too, and now it seem to work and the context menu is not shown when you right click over an image in a post, and it correctly opens the lightbox when you click in the image.

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

Should I delete the first script that tries to make the same over a generic img object?

If I substitute the CSS of .img-source-link by .mfp-title it works, and now the download links are not visible, but the title is hidden too. I don’t understand why hiding only the links does not work and it works when you hide the entire title bar.

.mfp-title
{
    display: none;
}
35

I’m not sure on the first item as I’m not seeing that behavior. But for the image link you can use this:

.image-source-link {
    display: none !important;
}

It leaves behind some extra · ·, but that’s the only way I could hide just the download link (and view full size link)

1 Like
36

Thank you a lot.
I don’t know what is !important but it works, the trailing … do not seem too important :wink:

This is how the CSS and Scripts are now and we get the desire behavior: none of the images in the site can be downloaded using the right click over them and the download links in the lightbox are hidden.
Thanks for your guidance.

CSS

.image-source-link
{
    display: none !important;
}

Header scripts:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>
<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-figure, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

The first one seems to disable the context menu on other images in the site like icons or avatar thumnails.

The second one works for images in a post and the lightbox.
1 Like