### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [8월 30, 2023, 12:16오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/22 "2023-08-30T12:16:27Z")
업로드되지 않은 사진, 예를 들어 링크로 삽입된 사진과도 함께 작동할 수 있는 방법이 있을까요?
---
### Author:  [@Stephane\_Roy](https://meta.discourse.org/u/Stephane_Roy)
#### Post date: [3월 19, 2025, 5:32오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/23 "2025-03-19T17:32:43Z")
안녕하세요, 이 Theme 컴포넌트의 최근 버그를 보고드립니다.
```plaintext
Visible here:
```
[https://forums.ffjdr.org/t/26-27-04-25-festival-histoire-de-jouer-xviii-caen-14/2936](https://forums.ffjdr.org/t/26-27-04-25-festival-histoire-de-jouer-xviii-caen-14/2936)
Image comparison slder의 최신 버전
Discourse 버전: 3.5.0.beta1-dev
([402ec6bf5c](https://github.com/discourse/discourse/commits/402ec6bf5c857ddc07be9cb9673734cc7152b7be))
귀하의 노고에 감사드립니다.
Stéphane.
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [9월 23, 2025, 3:03오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/24 "2025-09-23T15:03:10Z")
새로운 API 표준을 충족하도록 이 구성 요소를 업데이트했습니다:
>
>
> Moved image comparison slider initialization logic from header.html to a new ES6… module at javascripts/discourse/api-initializers/init-image-comparison-slider.js. This improves maintainability and aligns with Discourse's recommended plugin architecture.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [9월 23, 2025, 3:28오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/25 "2025-09-23T15:28:03Z")
잘하셨네요!
더 부담을 드리고 싶은 건 아닌데… 혹시 새로운 리치 텍스트 편집기로 이 부분을 확인해 보셨나요?
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [9월 24, 2025, 2:24오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/26 "2025-09-24T14:24:52Z")
아직 안 해봤는데, 뭔가 문제가 있는 거야?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [9월 24, 2025, 2:30오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/27 "2025-09-24T14:30:58Z")
네, 불행히도 작동하지 않습니다. 리치 텍스트 편집기가 활성화된 상태에서 비교 이미지 버튼을 누르면 다음과 같은 문제가 발생합니다:
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [10월 5, 2025, 6:07오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/28 "2025-10-05T18:07:25Z")
이 기능이 어떻게 작동하는지 잘 모르겠는데, 리치 텍스트 에디터가 HTML을 제대로 처리하지 않는 것 같아요. 이미지 갤러리 같은 비슷한 컴포넌트에서도 동일한 문제가 발생할 것 같아요.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [10월 17, 2025, 4:15오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/29 "2025-10-17T16:15:54Z")
조셉 씨, 제가 그 컴포넌트 수정을 시도해봐도 될까요?
---
### Author:  [@putty](https://meta.discourse.org/u/putty)
#### Post date: [12월 12, 2025, 2:45오전 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/30 "2025-12-12T02:45:26Z")
시간 내서 이 문제를 살펴봐 주거나 @Arkshine의 제안을 받아줄 수 있을 것 같아? 😃
---
### Author:  [@Joseph\_Hansen](https://meta.discourse.org/u/Joseph_Hansen)
#### Post date: [12월 12, 2025, 4:47오전 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/31 "2025-12-12T04:47:06Z")
죄송합니다, 답변을 깜빡했네요. 더 잘 아시는 다른 분이 이 문제를 해결해 주시면 좋겠습니다. 제가 접근할 수 있는 Discourse 인스턴스에는 rich test 기능이 활성화되어 있지 않고, 제가 활성화할 권한도 없어서 실제로 테스트를 해볼 수 없어요 🤔 제안해 주셔서 감사합니다!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 12, 2025, 5:03오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/32 "2025-12-12T17:03:24Z")
네, 알려주셔서 감사합니다. 한번 시도해볼게요. 👍
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [6월 6, 2026, 5:08오후 UTC](https://meta.discourse.org/t/image-comparison-slider/264479/33 "2026-06-06T17:08:41Z")
자, 여러분 드디어 이 작업을 할 시간을 찾았습니다.
아직 이 TC에 관심을 가져 주시는 분들이 있을까요?
>
>
> The PR overhauls the TC with the following features:
>
> \- Draggable before/after… comparison, horizontal or vertical
> \- Zoom and pan (mouse wheel, pinch, and on-image controls)
> \- Fullscreen view with a smooth open/close animation
> \- Open the original, full-size images in the lightbox
> \- Optional before/after labels with configurable placement
> \- Optional caption
> \- Several handle styles (line, thin, circle, grabber) and a custom handle color
> \- Edit sliders directly in the rich text editor, or with markdown
> \- Keyboard accessible (arrow keys move the divider, \`+\`/\`-\`/\`0\` zoom)
> \- Restrict who can insert sliders by group
>
> The markdown format has changed using \`\[wrap\]\` tag. Backward compatibility is ensured.
> Due to recent changes in core, 2026.6.0-latest is required.
>
> https://github.com/user-attachments/assets/6dafd430-90ee-4183-bed2-5d39460f94f5
해당 PR은 다음 기능을 갖춘 TC를 전면 개편합니다:
- 확대 및 이동 (마우스 휠, 핀치, 이미지 위 컨트롤)
- 전체 화면 보기
- 라이트박스에서 원본 풀사이즈 이미지 열기
- 배치 위치를 설정할 수 있는 선택적 이전/이후 레이블
- 선택적 캡션
- 여러 핸들 스타일(선, 얇은 선, 원, 그립퍼) 및 사용자 지정 핸들 색상
- 리치 텍스트 편집기 또는 마크다운으로 슬라이더를 직접 편집
- 키보드 접근성 지원(화살표 키로 구분선 이동, `+`/`-`/`0` 키로 확대/축소)
- 그룹별로 슬라이더 삽입 권한 제한
마크다운 형식은 `[wrap]` 태그를 사용하여 변경되었습니다. 하위 호환성은 보장됩니다.
2026.6.0-latest 버전이 필요합니다.
모바일 및 RTL 환경에 적합합니다. 다만 UX 전문가가 아니고, 모바일이나 iOS에서 충분히 테스트하지는 못했습니다.
별도로 테스트하시려면 다음을 사용할 수 있습니다:
- URL: `https://github.com/arkshine/discourse-image-comparison-slider`
- 브랜치: `modernize-with-rte`
(_이전 버전의 슬라이더를 편집하지 않는 것이 마크다운 형식이 변경되지 않도록 권장됩니다_)
[이전 페이지](https://meta.discourse.org/t/image-comparison-slider/264479.md?page=1)