갤러리

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 갤러리 분야 편집기가 한 번의 이동으로 전체 이미지 세트를 위젯에 건네줍니다: 미디어 라이브러리를 열고 열 사진을 선택, 완료. 마스터 애드온 내부 위젯 빌더는, 포트폴리오 그리드, 사진 벽, 그리고 캐러셀에 대한 필드입니다, 이미지 카운트는 위젯 작성자가 아닌 사이트 소유자에 속하는 곳 어디든지.

갤러리 필드가 지원합니다 조건 모든 컨트롤과 마찬가지로 해당 이미지도 렌더링됩니다 나뭇가지 구문 템플릿 엔진, 동력을 공급하는 동일한 엔진 {% for %} 루프 및 {% if %} 템플릿 전체에서 검사합니다. 두 가이드 모두 설정 및 제한 사항을 다룹니다.

값이 이미지의 배열이기 때문에 HTML 에 대한 연결은 토큰이 아니라 루프입니다. A {% for %} 블록은 사진당 이미지 마크업을 한 번씩 인쇄하며 갤러리가 보관하는 순서대로 열 장의 사진이 열 개의 항목을 렌더링합니다. 패널에서 두 장을 더 추가하면 두 개의 항목이 더 나타나며 템플릿 변경은 없습니다.

갤러리 필드가 하는 일 #

• 다중 선택 모드에서 WordPress 미디어 라이브러리를 엽니다 elementor 패널에서.
• 정렬된 이미지 배열을 저장합니다, 각각 그것을 가지고 있습니다 id 그리고 url.
• 다음을 통해 템플릿을 공급합니다 {% for %} 루프, 이미지당 하나의 반복입니다.
• 레이아웃을 CSS에 맡깁니다: 루프는 항목을 인쇄하고 그리드는 항목을 래핑합니다.
• 기본 이미지 세트와 동적 값을 지원합니다위젯이 미리 채워진 상태로 배송될 수 있습니다.

위젯을 처음 구축했다면 다음부터 시작하세요 위젯 빌더 개요 첫번째.

시작하기 전에 #

• 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
• Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
• Widget Builder 편집기에서 열리는 사용자 정의 위젯입니다. 우리의 예는 갤러리 이미지당 하나의 셀로 구성된 3 열 그리드를 렌더링하는 사진 포트폴리오 위젯입니다.

갤러리 필드를 추가하는 방법 #

찾기 갤러리 widget Builder 편집기 왼쪽 패널의 필드를 다른 미디어 필드와 그룹화합니다.

아래의 섹션으로 드래그하세요 콘텐츠 탭. 일단 착지하면 필드의 옵션이 왼쪽에 열립니다.

갤러리 필드 옵션 설명 #

• 라벨: elementor의 컨트롤 위에 표시된 텍스트, 예를 들어 “포트폴리오 이미지”.
• 이름: 필드,문자, 숫자,밑줄에 대한 고유 식별자만 해당됩니다. 예를 들어 루프는 이 이름을 참조합니다 portfolio_gallery.
• 기본값: 시작 이미지 세트이므로 그리드에는 위젯이 삭제되는 순간을 표시할 내용이 있습니다.
• 동적: 이미지 세트가 직접 선택한 선택이 아닌 동적 소스에서 나오도록 합니다.
• 설명, 라벨 표시, 분리기: 표준 표시 설정과 다른 컨트롤에 특정 값이 있는 경우에만 필드를 표시하는 조건이 추가됩니다.

루프를 사용하여 갤러리를 HTML에 연결하세요 #

갤러리에는 단일 값 토큰이 없습니다. 그 값은 미디어 항목의 배열이므로 템플릿은 a 에서 이미지당 마크업을 래핑합니다 {% for %} 블록, 리피터가 사용하는 것과 동일한 모양:

<div class="portfolio-grid">
  {% for img in portfolio_gallery %}
  <figure class="portfolio-cell">
    <img src="{{ img.url }}">
  </figure>
  {% endfor %}
</div>

• portfolio_gallery 는 밭의 이름.
• img 는 당신이 발명한 루프 변수이다; 무엇이든 부르세요.
• 각 항목은 점 표기법으로 해당 속성을 노출합니다: {{ img.url }} 파일 URL의 경우 {{ img.id }} 첨부 ID의 경우.
• 블록은 갤러리 순서에 따라 이미지당 한 번씩 인쇄됩니다.

빈 갤러리는 일반적으로 원하는 동작인 제로 타임으로 반복됩니다. wrapper div 는 그래도 여전히 렌더링되며,패딩이나 테두리가 있는 빈 컨테이너는 페이지에 신비한 회색 상자로 나타납니다. 빈 갤러리가 아무것도 남기지 않아야 할 때 전체 블록을 보호하십시오:

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

벌거벗은 사람에게 손을 뻗는 것을 조심하세요 {{ portfolio_gallery }} 습관적으로. URL 을 바로 가기로 인쇄하는 미디어 필드에서; 여기서 값은 이미지 목록이며 루프 만 가져옵니다. 패널이 사진을 명확하게 보관하는 동안 그리드가 비어있는 상태로 렌더링되면 누락 된 것입니다 {% for %} 는 거의 항상 왜.

레이아웃은 CSS 탭에 유지됩니다. 와 같은 그리드 컨테이너 grid-template-columns: repeat(3, 1fr) 루프가 생성하는 셀 수를 아무리 많이 감싸므로 템플릿이나 편집자가 생각하지 않고도 12장의 사진이 4개의 행을 만듭니다.

Elementor 에서 갤러리 컨트롤을 사용합니다 #

사용자 정의 위젯을 Elementor 의 페이지에 추가하고,페이지가 이미 열려 있는 경우 편집기를 다시 로드합니다. 갤러리 필드는 레이블 아래에 추가 이미지 상자로 렌더링되며,현재 세트가 존재하면 미리보기 이미지가 표시됩니다.

클릭하면 미디어 라이브러리가 다중 선택 모드로 열립니다. 세트를 선택하고 확인하고 그리드가 미리보기에서 채워집니다. 갤러리를 다시 열면 편집기가 이미지를 추가,제거 및 재정렬할 수 있으며 페이지는 다음 렌더링에서 새 순서를 따릅니다.

일반적인 사용 사례 #

• 포트폴리오 및 사진 그리드, 이미지당 하나의 셀, 행을 처리하는 CSS 그리드.
• 라이트박스 컬렉션 각 루프 항목은 라이트박스 스크립트에 대한 전체 크기 URL을 연결합니다.
• 이미지 회전목마를, 루프는 슬라이드를 인쇄하고 위젯의 JS 탭은 슬라이더를 실행합니다.
• 클라이언트 로고 벽 위젯을 건드리지 않고 사이트 소유자가 유지 관리합니다.
• 전후 또는 프로젝트 갤러리 완성된 작업마다 성장합니다.

갤러리 분야와 함께 작업하기 위한 팁 #

• 루프가 연결입니다. 갤러리의 유용한 직접 인쇄는 없습니다; 오직 {% for %}…{% endfor %} 이미지에 도달합니다.
• 사용 {{ img.url }} 루프 내부. 각 항목은 미디어 배열이며, 점 표기법은 URL과 ID를 선택합니다.
• CSS 가 레이아웃을 소유하게 합니다. 고정된 열이 있는 그리드는 모든 이미지 수를 흡수합니다; 템플릿은 단일 그림 블록으로 유지됩니다.
• 비어 있으면 포장지를 보호한다는 것은 보이지 않는다는 뜻입니다. {% if portfolio_gallery %} 채워지지 않은 위젯이 빈 컨테이너를 렌더링하지 못하도록 합니다.
• 기본 세트를 발송합니다. 세 자리 표시자 사진도 첫 번째 드롭에서 위젯을 읽을 수 있도록 합니다.
• 템플릿이 아닌 패널에서 재정렬합니다. 루프는 갤러리 순서를 따르므로 축소판을 드래그하면 페이지가 스스로 재배열됩니다.

자주 묻는 질문 #

감싸는 #

위젯 빌더 갤러리 필드는 사이트 소유자가 채우는 컨테이너로 위젯을 바꿉니다: 라이브러리에서 다중 선택, a {% for %} 템플릿의 루프 및 CSS가 집합의 흐름 방식을 결정합니다. 단일 이미지 슬롯의 경우 해당 형제입니다 미디어 분야 동일한 점 표기법 규칙을 가진 영웅,아바타, 로고를 다룹니다. 나머지 탐색 마스터 애드온 위젯 및 확장, 그리고 보세요 가격 페이지 각 계획에 포함된 내용입니다.