 |
요약 | 게시글에 이미지 캐러셀(하나 또는 여러 개)을 추가합니다 |
 |
저장소 | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
Discourse 테마 초보? | Discourse 테마 사용 입문가이드 |
이 테마 컴포넌트 설치
이 컴포넌트는 게시글에 Splide/Swiper 기반의 이미지 캐러셀을 추가합니다. Swiper 캐러셀은 썸네일과 다양한 애니메이션 등 더 많은 기능을 제공합니다.
Swiper:
썸네일 활성화된 Swiper:
Splide:
캐러셀을 추가하기 위해 플레이스홀더 이미지가 포함된 버튼이 작성기(Composer) 툴바에 추가되었습니다:
캐러셀의 마크업은 다음과 같습니다:
[wrap="Carousel" autoplay=true/false interval=<duration in ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
캐러셀 생성 과정을 더 쉽게 만들기 위해, 작성기 툴바의 버튼을 클릭하면 모달이 열립니다(고마워요, Discourse GIFs TC!). 여기서 캐러셀 설정을 선택할 수 있습니다:
이후 [wrap] 안에 더 많은 이미지를 추가할 수 있습니다.
(캐러셀별) 설정은 다음과 같습니다:
enable_thumbnails: 캐러셀 아래에 이미지의 썸네일을 표시합니다.
enable_loop: 캐러셀이 끝에 도달했을 때 시작점으로 루프되도록 합니다.
enable_thumbnail_loop: 캐러셀의 썸네일이 끝에 도달했을 때 루프되도록 합니다.
이미지가 너무 적을 경우 이 설정을 활성화하면 캐러셀이 버벅거리거나 끊기는 현상이 발생할 수 있습니다. 이 설정을 활성화하기 전에 더 많은 이미지를 사용하는 것이 좋습니다.
enable_autoplay: 캐러셀이 자동으로 재생되도록 합니다.
autoplay_interval: 다음 슬라이드로 재생하기 전에 기다릴 밀리초 수입니다. enable_autoplay와 함께 사용됩니다. 이 값을 비워 두면 기본값인 5000이 적용됩니다.
설정
(전역) 설정은 다음과 같습니다:
carousel_software: 캐러셀에 사용할 소프트웨어(Swiper/Splide)를 선택합니다. Swiper가 권장되며 기본값입니다.
image_carousel_placeholder: 캐러셀 생성 시 기본 이미지입니다. 기본적으로 포함된 일반 플레이스홀더 이미지가 사용됩니다:
show_pagination_buttons: 이미지 간 더 쉬운 내비게이션을 위해 캐러셀 아래에 페이지네이션 도트를 표시합니다
image_transition_animation: [Swiper 전용] 다음으로 전환될 때의 이미지 애니메이션입니다. 기본값은 'slide’이며, 옵션은 다음과 같습니다:
- cube
- fade
- cards
- flip
- slide (기본값)
pagination_button_color: 페이지네이션 도트의 색상입니다. 이 값을 비워 두면 Swiper/Splide 기본값이 사용됩니다.
active_pagination_button_color: 현재 슬라이드에 있을 때 페이지네이션 도트의 색상입니다. 이 값을 비워 두면 Swiper/Splide 기본값이 사용됩니다.
참고 사항
이 TC(테마 컴포넌트)의 현재 Splide 지원은 썸네일과 전환 애니메이션을 허용하지 않습니다. Splide 썸네일(더 복잡한 작업)에 대한 PR을 기꺼이 받아들이겠습니다.
누군가 세로 방향 썸네일을 구현하고 싶다면, 저장소에 이를 위한 코드(주석 처리됨)가 있지만 잘 작동하지 않습니다. 이 기능을 추가하거나(또는 현재 구현을 기반으로 구축)하는 PR을 기꺼이 받아들이겠습니다.
한 가지 더, 저는 현재 캐러셀 생성 모달 내에서 캐러셀 이미지를 추가하는 방법을 탐구하고 있지만, 여기에 설명된 문제에 직면해 있습니다. 누군가 그곳에서 답변해 주시면 감사하겠습니다!
감사의 말
여기에서 영감을 준 @Arkshine님께 감사드립니다. 그가 여기에 저장소를 생성했다는 것을 알고 있지만, 이 TC에서는 해당 저장소를 참조하지 않기로 했습니다.
누군가에게 유용하길 바랍니다!
이 새로운 것들을 모두 이해하는 데 시간이 걸리고, 리치 에디터(prosemirror) 뷰를 작업하고 있기 때문에 아직 게시하지 않았습니다. 곧 소식 전할 예정입니다.. 