Drupal 9용 ColorBox 모듈에 대한 포괄적인 자습서(및 확장 방법)

게시 됨: 2020-09-29

이미지는 웹사이트의 사용자 경험을 개선하는 데 중요한 역할을 합니다. 한 연구에 따르면 우리가 뇌에 전달하는 정보의 90%는 시각적인 정보입니다. 많은 웹사이트가 이 이론만을 해결하고 이미지 및 비디오 파일과 같은 수많은 리치 미디어를 사용자에게 제공합니다. 그들 대부분은 이러한 미디어 파일의 프레젠테이션 측면을 간과하고 실망스러운 사용자 경험으로 끝납니다. 그들이 필요로 하는 것은 이미지를 우아하고 직관적으로 표시할 수 있는 매우 가벼운 jQuery 플러그인인 ColorBox와 같은 도구입니다. 스타일과 기능은 CSS와 Javascript를 통해 고도로 사용자화할 수 있습니다. Drupal ColorBox 모듈은 Drupal 6, 7, 8 및 이제 Drupal 9와도 호환됩니다! 이 기사에서는 Drupal 9용 ColorBox 모듈을 구성, 구현 및 확장하는 방법을 배웁니다.

드루팔용 컬러박스

Drupal용 ColorBox

ColorBox 모듈은 Drupal에 ColorBox jQuery 플러그인과 통합됩니다. 플러그인은 jQuery를 위한 경량 맞춤형 라이트박스입니다. 유사한 목적으로 사용되는 다른 경쟁사 "박스" 모듈(Thickbox, Lightbox2, Shadowbox, Greybox 등) 중에서 ColorBox 모듈이 가장 많이 사용되며 설치 수가 가장 많습니다. Drupal ColorBox의 사용은 단순히 업로드된 이미지를 아름답게 표시하는 것으로 끝나지 않습니다. 또한 비디오, pdf, 노드, 분류, 웹 양식, iframe 콘텐츠 등과 같은 스타일을 지원합니다. 스타일은 CSS를 통해 제어할 수 있으므로 모양을 고도로 사용자 정의할 수 있습니다. 기능은 HTML을 건드릴 필요 없이 JS 파일을 통해 쉽게 사용자화할 수 있습니다. 사진 그룹화도 지원하고 예정된 이미지를 미리 로드합니다.

ColorBox 모듈 설치 단계

1. Composer로 ColorBox 모듈을 설치합니다.

 composer require 'drupal/colorbox:^1.6'
composer require 'drupal/colorbox:^1.6'

2. ColorBox 플러그인 1.x를 다운로드합니다.
 1. Drush 명령 사용
(참고: drush 명령을 사용하여 ColorBox 플러그인을 설치하는 경우 모듈을 활성화한 다음 아래 명령을 실행해야 합니다.)

 drush colorbox-plugin
drush colorbox-plugin

2. 수동으로 ColorBox 플러그인 다운로드
Colorbox 플러그인을 다운로드하고 /libraries에서 압축을 풉니다. 플러그인 파일의 경로가 다음과 같은지 확인하십시오.

 “/libraries/colorbox/jquery.colorbox-min.js”
“/libraries/colorbox/jquery.colorbox-min.js”

3. Drupal ColorBox 모듈을 활성화합니다.

 drush en -y colorbox
drush en -y colorbox

축하합니다! 이제 ColorBox 모듈의 기능을 사용할 준비가 되었습니다.

ColorBox 모듈 구성

Configuration -> Media -> Colorbox settings 로 이동하여 Drupal ColorBox 모듈을 구성 합니다.

컬러박스 구성
컬러박스 구성

ColorBox를 사용하여 이미지 갤러리를 만드는 방법

1. 이미지 갤러리를 만들려면 먼저 콘텐츠 유형 중 하나에 대한 이미지 필드를 추가해야 합니다. 레이블 이름을 선택한 다음 저장 및 계속 버튼을 클릭합니다.

이미지 필드 추가
이미지 필드 추가

2. 다음 단계는 필드 설정을 구성하는 것입니다. 업로드된 이미지가 없을 때 기본 이미지를 추가할 수 있습니다. 접근성을 위한 대체 텍스트 및 제목입니다. 허용되는 값 설정 수는 필드의 최대 업로드 제한을 나타냅니다. 원하는 옵션을 선택한 다음 필드 설정 저장 버튼을 클릭합니다.

필드 설정 구성
필드 설정 구성

3. 그런 다음 허용된 파일 확장명, 파일 디렉토리, 최대 및 최소 이미지 해상도, 최대 업로드 크기, 이미지의 대체 및 제목과 같은 이 이미지 필드에 대한 다른 구성을 설정한 다음 설정 저장을 클릭합니다.

추가 구성
추가 구성

4. 이제 이미지 필드 구성이 완료되었습니다. ColorBox용으로 생성된 이미지 필드의 서식 옵션을 설정해 보겠습니다. 콘텐츠 유형의 디스플레이 관리로 이동한 다음 드롭다운에서 형식 옵션을 ColorBox로 설정합니다. 형식 옵션 옆에 있는 톱니바퀴를 클릭하면 표시되는 이미지를 사용자 지정할 수 있습니다. 모든 옵션이 업데이트되면 업데이트 버튼을 클릭한 다음 옵션 저장을 클릭합니다.

ColorBox의 디스플레이 관리
ColorBox의 디스플레이 관리

5. 이제 콘텐츠 추가를 클릭하여 ColorBox 이미지 갤러리에 콘텐츠를 추가해 보겠습니다. 이미지 가중치에 따라 업로드되는 이미지의 순서를 변경할 수 있습니다. 그리고 저장 버튼을 클릭합니다. 콘텐츠의 표시는 다음과 같습니다.

ColorBox 이미지 갤러리
ColorBox 이미지 갤러리

6. 마지막으로 이미지 중 하나를 클릭하면 아래와 같이 ColorBox 모달 내에서 이미지가 표시됩니다.

컬러박스


비디오 임베디드 필드에서도 동일한 작업을 수행할 수 있습니다.

ColorBox 인라인 모듈과 통합하는 방법

Colorbox 인라인 모듈을 사용하면 사용자가 ColorBox 내의 페이지에 이미 있는 콘텐츠를 열 수 있습니다.

1. 컬러박스 인라인 모듈 설치

 composer require 'drupal/colorbox_inline:^1.2'
composer require 'drupal/colorbox_inline:^1.2'

2. drush 명령을 사용하여 모듈 활성화 / drupal UI를 통해 수동으로 활성화

 drush en -y colorbox_inline
drush en -y colorbox_inline

3. 링크를 사용하여 페이지에 있는 ColorBox 모달에서 이미지 열기

4. 콘텐츠 추가 -> 본문 필드가 있는 모든 콘텐츠 유형으로 이동합니다.

텍스트 포맷터를 기본 html에서 전체 html로 변경

드루팔의 컬러박스

6. 그런 다음 저장 버튼을 클릭합니다.

여기 위의 예에서 앵커 태그의 data-colorbox-inline 속성은 id 대신 클래스 이름을 포함할 수도 있습니다. 이미지 보기는 페이지에서 이미 존재하는 이미지를 여는 링크입니다(프로젝트 요구 사항에 따라 변경 사항 수정). 이 모듈을 사용하여 유사한 방식으로 비디오, 웹 양식 등의 모든 콘텐츠를 렌더링할 수 있습니다.

컬러박스 갤러리

이 페이지를 보면 이미지가 있는 링크를 볼 수 있습니다. 그리고 이미지 보기 링크를 클릭하면 아래 이미지와 같이 ColorBox 팝업이 나타납니다.

컬러박스 구성
ColorBox 이미지 팝업

ColorBox를 ColorBox 로드 모듈과 통합하는 방법

ColorBox 로드 모듈을 사용하면 Ajax를 사용하여 컨텐츠를 ColorBox에 로드할 수 있습니다. 이 모듈을 사용하여 사용자는 렌더링될 때 콘텐츠가 포함된 ColorBox를 여는 일련의 경로를 지정할 수 있습니다. 경로 관리 인터페이스용 NG Lightbox 모듈에 따라 다릅니다. 이 방법은 노드, 페이지, 웹 양식 등을 렌더링하는 데 사용할 수 있습니다.
컬러박스 로드 모듈 설치

 composer require 'drupal/colorbox_load:^1.2'
composer require 'drupal/colorbox_load:^1.2'

drush 명령을 사용하여 모듈 활성화 / drupal UI를 통해 수동으로 활성화

 drush en -y colorbox_load
drush en -y colorbox_load


ColorBox Load 모듈을 사용하여 로그인 팝업 구현하기 .

1. Configuration -> Ng Lightbox (Under Media)로 이동하여 ColorBox Load 모듈을 구성 합니다. ColorBox 모달 디스플레이, ColorBox 모달 너비, 라이트박스 모달 클래스 및 렌더러 옵션을 제공하려는 경로를 구성할 수 있습니다. (원하는 대로 옵션을 선택하십시오).

ColorBox 로드 모듈 구성
ColorBox 로드 모듈 구성

2. 이제 홈페이지에서 로그인 버튼을 클릭하여 로그인 페이지에 구현된 Drupal ColorBox 모달을 볼 수 있습니다.

colorbox-drupal-module

ColorBox를 Drupal View와 통합하는 방법

일부 웹사이트의 경우 이미지 목록에 대한 ColorBox 모달을 표시할 수 있는 기능이 필요할 수 있습니다. 이것은 Views 모듈의 도움으로 수행할 수 있습니다.
1. 구조 -> 보기 -> 보기 추가로 이동합니다.
2. 보기에 이미지 필드를 추가하고 이에 따라 포맷터를 ColorBox 및 기타 설정으로 구성한 다음 보기를 저장합니다.

보기 추가
보기 추가

3. 이제 방금 생성한 뷰를 살펴봅니다(제 경우에는 뷰를 페이지로 생성했습니다). 이미지 목록을 볼 수 있으며 그 중 하나를 클릭하면 개별 이미지가 ColorBox 팝업 창에 표시됩니다.

ColorBox 팝업 창