카드 갤러리는 테이블 및 뷰의 데이터를 카드에 표시하는 데이터 컨트롤입니다. 디자인 스튜디오 또는 Liquid 코드를 사용하여 Power Pages 사이트에서 카드 갤러리를 추가, 스타일 지정 및 구성할 수 있습니다.
카드 갤러리 추가
디자인 스튜디오에서 카드 갤러리를 추가하는 방법은 다음과 같습니다.
디자인 스튜디오를 열어 사이트의 콘텐츠 및 구성 요소를 편집합니다.
팁
코드를 사용하여 카드 갤러리를 추가할 수도 있습니다.
페이지 작업 영역으로 이동합니다.
편집할 페이지를 선택합니다.
카드 갤러리를 추가할 섹션을 선택합니다.
편집 가능한 캔버스 영역 위로 마우스를 이동한 다음 구성 요소 패널에서 카드 갤러리 아이콘을 선택합니다.
레이아웃 선택
카드 갤러리 디자인 버튼을 선택하여 사용 가능한 4가지 레이아웃 중 하나를 선택하세요.
사용 가능한 경우 기존 카드 갤러리에서 선택할 수도 있습니다.
카드 갤러리의 데이터 원본 구성
카드 갤러리의 데이터 원본을 구성하려면:
카드 갤러리 디자인 버튼을 선택하고 데이터를 선택합니다.
데이터 원본 조회 필드에서 기존 테이블을 선택합니다.
보기 드롭다운에서 해당 보기를 선택합니다.
각 카드 갤러리 요소(이미지, 제목, 설명, 버튼, 텍스트 하이퍼링크)에 대해 데이터 선택 옵션을 선택하여 보기 열에 바인딩합니다.
참고
버튼 및 하이퍼링크 요소의 경우 name 및 url의 두 가지 설정을 구성해야 합니다. 두 구성 모두 보기 열에 바인딩되어야 합니다.
포함하지 않으려는 요소 옆에 있는 토글 스위치를 비활성화합니다.
토글 스위치 왼쪽에 있는 아이콘을 선택하고 해당 요소를 원하는 위치로 드래그하여 각 요소의 위치를 재정렬할 수 있습니다.
지원되는 열 유형
각 요소는 특정 데이터 형식을 지원합니다.
지원되는 열 유형
각 요소는 특정 데이터 형식을 지원합니다.
| 요소 | 데이터 형식 |
|---|---|
| Title | 텍스트(한 줄 텍스트) 휴대폰 정수 10진 조회 날짜만 날짜 및 시간 |
| Description | 서식 있는 텍스트 텍스트 영역(여러 줄 텍스트) 휴대폰 정수 10진 날짜만 날짜 및 시간 |
| Image | 파일 - 이미지 |
| Button | 버튼 레이블:
버튼 URL:
|
| 텍스트 하이퍼링크 | 텍스트 하이퍼링크 레이블:
텍스트 하이퍼링크 URL:
|
| 사용자 지정 텍스트 | 텍스트(한 줄 텍스트) |
카드 갤러리 스타일 지정 및 구성
갤러리, 카드 및 요소 수준에서 스타일 속성을 구성하여 카드 갤러리 스타일을 지정할 수 있습니다.
검색 필터링
검색 활성화 토글을 켜거나 끄면 검색 필터링을 추가하거나 제거할 수 있습니다.
카드 갤러리 미리 보기
카드 갤러리를 구성한 후 샘플 데이터가 포함된 캔버스에서 미리 보기를 볼 수 있습니다.
참고
사이트 방문자가 카드 갤러리를 보고 상호 작용할 수 있도록 하려면 테이블 권한을 설정해야 합니다.
코드를 사용하여 카드 갤러리 추가
Liquid를 사용하여 카드 갤러리를 편집할 수도 있습니다.
새 카드 갤러리 추가
데이터 바인딩이나 구성 없이 새 카드 갤러리를 추가하려면 다음 유동 태그를 사용하세요.
{% codecomponent name:Pages.CardGallery %}
기존 카드 갤러리 추가
기존 카드 갤러리를 추가하려면 Liquid 태그를 사용하고 {your card gallery id}를 기존 카드 갤러리의 ID로 바꿉니다.
{% codecomponent name:Pages.CardGallery id: '{your card gallery id}' %}