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.
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 « J'aime »
Jusqu’à présent, nous essayions de rendre le téléchargement d’images difficile en empêchant l’apparition du menu contextuel à l’aide du script fourni ci-dessus par @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>
Nous avons personnalisé le thème de Discourse et ajouté le script à l’en-tête de chaque page.
Mais depuis la dernière mise à niveau vers 3.2.0.beta5-dev (67244a2318), nous avons eu des erreurs de Discourse lorsque vous essayiez d’ouvrir un sujet, et nous avons dû supprimer le script.
Il semble qu’il y ait eu des changements dans Discourse qui l’empêchent de fonctionner.
1 « J'aime »
Voici une version mise à jour que j’ai pu corriger !
<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 « J'aime »
Ceci est normal en raison des mises à jour d’Ember, cet extrait de code est assez ancien à ce stade et devra être réécrit.
2 « J'aime »
Merci, je vais essayer le nouveau script.
Il semble que cela fonctionne, au moins le menu contextuel n’apparaît plus lorsque vous utilisez la lightbox.
Vous pouvez toujours télécharger l’image à partir des miniatures intégrées dans la publication.
Salut, @davidkingham
Si j’ai bien compris le script que vous avez écrit, le second empêche l’ouverture du menu contextuel lorsque vous faites un clic droit sur une image ouverte dans la lightbox.
Le premier devrait faire de même lorsque vous faites un clic droit sur n’importe quelle image, par exemple la miniature dans la publication.
Mais cela ne fonctionne pas, je peux toujours ouvrir le menu secondaire et ouvrir l’image complète dans une autre fenêtre.
J’ai essayé de mettre ceci dans le CSS :
img {
pointer-events: none;
}
Cela empêche l’ouverture du menu contextuel, mais cela empêche également de pouvoir cliquer sur l’image pour ouvrir la lightbox.
Qu’est-ce qui ne va pas ?
Ce serait formidable de masquer les liens de téléchargement sous la lightbox.
J’avais précédemment cette entrée dans le CSS :
.image-source-link {
display: none;
}
Mais maintenant, cela ne semble plus fonctionner non plus, car les liens télécharger et image originale sont toujours affichés sous l’image de la lightbox.
MISE À JOUR :
J’ai modifié le second script pour inclure également .lightbox-wrapper, et maintenant cela semble fonctionner et le menu contextuel ne s’affiche pas lorsque vous faites un clic droit sur une image dans une publication, et cela ouvre correctement la lightbox lorsque vous cliquez sur l’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>
Dois-je supprimer le premier script qui essaie de faire la même chose sur un objet img générique ?
Si je remplace le CSS de .img-source-link par .mfp-title, cela fonctionne, et maintenant les liens de téléchargement ne sont pas visibles, mais le titre est également masqué. Je ne comprends pas pourquoi masquer uniquement les liens ne fonctionne pas et pourquoi cela fonctionne lorsque vous masquez toute la barre de titre.
.mfp-title {
display: none;
}
Je ne suis pas sûr pour le premier élément car je ne constate pas ce comportement. Mais pour le lien de l’image, vous pouvez utiliser ceci :
.image-source-link {
display: none !important;
}
Cela laisse quelques · · supplémentaires, mais c’est la seule façon que j’ai trouvée pour masquer uniquement le lien de téléchargement (et le lien pour voir en taille réelle).
1 « J'aime »
Merci beaucoup.
Je ne sais pas ce que signifie !important, mais cela fonctionne, les points de suspension finaux ne semblent pas très importants 
Voici comment le CSS et les scripts sont maintenant et nous obtenons le comportement souhaité : aucune des images du site ne peut être téléchargée en cliquant dessus avec le bouton droit de la souris et les liens de téléchargement dans la lightbox sont masqués.
Merci pour vos conseils.
CSS
.image-source-link
{
display: none !important;
}
Scripts de l’en-tête :
<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>
Le premier semble désactiver le menu contextuel sur d'autres images du site comme les icônes ou les miniatures d'avatar.
Le second fonctionne pour les images dans un post et la lightbox.
1 « J'aime »