아니요, 우리에게는 유효한 옵션이 아니라고 말씀드렸습니다.
하지만 이미지 도용을 완전히 회피하는 가장 효과적인 방법이며, 유일한 방법일 수도 있습니다.
기술적으로는 테마 컴포넌트에서 구현할 수 있습니다. 몇백 달러 정도의 비용으로 개발하는 것이 불가능하지 않을 수 있으니, #marketplace에 토픽을 개설해 보세요.
지금까지 @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>
우리는 Discourse 테마를 커스텀하여 각 페이지의 헤더에 이 스크립트를 추가했습니다.
하지만 최근 3.2.0.beta5-dev (67244a2318) 버전으로 업그레이드한 이후, 토픽을 열려고 할 때 Discourse에서 오류가 발생하여 스크립트를 삭제해야 했습니다.
Discourse에 몇 가지 변경 사항이 생겨 스크립트가 작동하지 않는 것 같습니다.
수정할 수 있는 업데이트된 버전을 찾았습니다!
<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>
Ember 업데이트로 인해 예상되는 결과입니다. 해당 코드 스니펫은 이미 꽤 오래되었고 다시 작성해야 합니다.
감사합니다. 새 스크립트를 시도해 보겠습니다.
작동하는 것 같습니다. 적어도 이제 라이트박스를 사용할 때 컨텍스트 메뉴가 표시되지 않습니다.
게시물에 내장된 섬네일에서는 여전히 이미지를 다운로드할 수 있습니다.
안녕하세요, @davidkingham
작성하신 스크립트를 잘 이해했다면, 두 번째 스크립트는 라이트박스에서 열려 있는 이미지에 마우스 오른쪽 버튼을 클릭할 때 컨텍스트 메뉴가 열리지 않도록 방지하는 역할을 하는 것 같습니다.
첫 번째 스크립트는 예를 들어 게시물 속 썸네일과 같은 모든 이미지에 마우스 오른쪽 버튼을 클릭할 때 동일한 역할을 해야 합니다.
하지만 작동하지 않아서 여전히 보조 메뉴를 열고 새 창에서 전체 이미지를 열 수 있습니다.
CSS에 다음을 추가해 보았습니다:
img {
pointer-events: none;
}
컨텍스트 메뉴가 열리지 않도록 방지하지만, 이미지를 클릭하여 라이트박스를 여는 것도 방지하게 됩니다.
어디가 잘못되었나요?
라이트박스 아래에 있는 다운로드 링크를 숨길 수 있으면 좋겠습니다.
이전에 CSS에 다음 항목이 있었습니다:
.image-source-link
{
display: none;
}
하지만 이제는 이것도 작동하지 않는 것 같습니다. 왜냐하면 다운로드 및 원본 이미지 링크가 여전히 라이트박스 이미지 아래에 표시되거든요.
업데이트:
두 번째 스크립트를 수정하여 .lightbox-wrapper도 포함시켰고, 이제 게시물 속 이미지에 마우스 오른쪽 버튼을 클릭할 때 컨텍스트 메뉴가 표시되지 않으며, 이미지를 클릭하면 올바르게 라이트박스가 열립니다.
<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>
범용 img 객체에 대해 동일한 작업을 시도하는 첫 번째 스크립트를 삭제해야 하나요?
.img-source-link의 CSS를 .mfp-title로 대체하면 작동하며, 이제 다운로드 링크가 보이지 않지만 제목도 숨겨집니다. 링크만 숨기면 작동하지 않고 전체 제목 바를 숨기면 작동하는 이유가 무엇인지 이해하지 못하겠습니다.
.mfp-title
{
display: none;
}
첫 번째 항목은 해당 동작을 확인하지 못해서 확실하지 않습니다. 하지만 이미지 링크의 경우 이렇게 사용할 수 있습니다:
.image-source-link {
display: none !important;
}
이렇게 하면 일부 · · 이 남지만, 다운로드 링크(그리고 전체 크기 보기 링크)만 숨길 수 있는 유일한 방법입니다.
정말 감사합니다.
!important가 무엇인지 모르지만 동작은 하고, 끝에 있는 ..은 크게 중요하지 않은 것 같습니다 
이제 CSS와 스크립트는 다음과 같으며, 원하는 동작을 수행합니다: 사이트의 어떤 이미지도 우클릭으로 다운로드할 수 없으며, 라이트박스 내의 다운로드 링크가 숨겨집니다.
안내해 주셔서 감사합니다.
CSS
.image-source-link
{
display: none !important;
}
헤더 스크립트:
<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>
첫 번째 스크립트는 아이콘이나 아바타 썸네일과 같은 사이트의 다른 이미지에서 컨텍스트 메뉴를 비활성화하는 것 같습니다.
두 번째 스크립트는 게시물의 이미지와 라이트박스에서 작동합니다.