Prevent downloading of posted images

Soporte
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 me gusta
30

Hasta ahora estábamos intentando dificultar la descarga de imágenes impidiendo que apareciera el menú contextual utilizando el script que proporcionó @awesomerobot anteriormente.

<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>

Hicimos una personalización del tema de Discourse y añadimos el script al encabezado de cada página.

Pero desde la última actualización a 3.2.0.beta5-dev (67244a2318) hemos tenido errores en Discourse al intentar abrir un tema, y tuvimos que eliminar el script.

Parece que hubo algunos cambios en Discourse que impiden que funcione.

imagen
imagen1920×1160 110 KB

1 me gusta
31

¡Aquí tienes una versión actualizada que pude arreglar!

<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 Me gusta
32

Esto es esperado debido a las actualizaciones de Ember, ese fragmento de código es bastante antiguo en este momento y necesitará ser reescrito.

2 Me gusta
33

Gracias, probaré el nuevo script.

Parece que funciona, al menos ahora el menú contextual no aparece cuando usas el light box.

Todavía puedes descargar la imagen de las miniaturas incrustadas en la publicación.

34

Hola, @davidkingham

Si entiendo bien el script que has escrito, el segundo evita que se abra el menú contextual al hacer clic derecho en una imagen que se abrió en el light-box.

El primero debería hacer lo mismo al hacer clic derecho sobre cualquier imagen, por ejemplo, la miniatura en la publicación.

Pero no funciona, todavía puedo abrir el menú secundario y abrir la imagen completa en otra ventana.

He intentado poner esto en el CSS:

img {
    pointer-events: none;
}

Evita que se abra el menú contextual, pero también evita que se pueda hacer clic en la imagen para abrir el light-box.

¿Qué está mal?

Sería genial ocultar los enlaces de descarga debajo del light-box.

Anteriormente tenía esta entrada en el CSS:

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

Pero ahora tampoco parece funcionar, ya que los enlaces descargar e imagen original se muestran de todos modos debajo de la imagen del light-box.

ACTUALIZACIÓN:
He modificado el segundo script para incluir también .lightbox-wrapper, y ahora parece funcionar y el menú contextual no se muestra al hacer clic derecho sobre una imagen en una publicación, y abre correctamente el light-box al hacer clic en la imagen.

<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>

¿Debería eliminar el primer script que intenta hacer lo mismo sobre un objeto img genérico?

Si sustituyo el CSS de .img-source-link por .mfp-title funciona, y ahora los enlaces de descarga no son visibles, pero el título también se oculta. No entiendo por qué ocultar solo los enlaces no funciona y sí funciona cuando se oculta toda la barra de título.

.mfp-title {
    display: none;
}
35

No estoy seguro del primer elemento, ya que no estoy viendo ese comportamiento. Pero para el enlace de la imagen, puedes usar esto:

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

Deja algunos · · adicionales, pero esa es la única forma en que pude ocultar solo el enlace de descarga (y el enlace para ver el tamaño completo).

1 me gusta
36

Muchas gracias.
No sé qué es !important pero funciona, los puntos suspensivos finales no parecen muy importantes :wink:

Así son ahora el CSS y los scripts y obtenemos el comportamiento deseado: ninguna de las imágenes del sitio se puede descargar haciendo clic derecho sobre ellas y los enlaces de descarga en la lightbox están ocultos.
Gracias por tu orientación.

CSS

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

Scripts del encabezado:

<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>

El primero parece deshabilitar el menú contextual en otras imágenes del sitio como iconos o miniaturas de avatares.
El segundo funciona para las imágenes en una publicación y la lightbox.
1 me gusta