프로젝트, 다이어그램, 도면
제품 페이지의 Modx 이미지 캐러셀. 크고 무서운

제품 페이지의 Modx 이미지 캐러셀. 크고 무서운

안녕하세요 커뮤니티!

이 게시물에서는 다중 형식 탭이 무엇인지, 그리고 다양한 데이터 세트로 구성을 생성하는 방법을 알아봅니다. 그리고 물론 우리는 다음과 같은 슬라이더를 만들 것입니다. 다른 유형슬라이드하고 마지막에는 매우 재미있는 이야기오랫동안 나는 누구에게도 감히 말하지 않았습니다 (물론 당신이 관심이 있지만 이야기가 흥미 롭다면-저를 믿으십시오). 슬라이드의 예는 다음과 같습니다.

배경 이미지
백그라운드의 비디오
배경에 단색

주목! 이번에는 어린이와 임산부가 화면을 보지 못하게 할 필요가 없습니다. 이는 연령과 성별에 따른 일종의 차별이기 때문입니다! 이렇게 또 공지가 뜹니다! 반복하지 않기 위해 첫 번째 강의를 자주 참고할 예정이므로 왜? 상상해 봅시다: 예를 들어 메인 페이지에 여러 유형의 슬라이드가 있는 슬라이더가 있는 프로젝트를 발견했습니다. 하나는 배경에 비디오가 있고 다른 하나는 그림이 있고 세 번째는 단색 슬라이드가 있습니다. 색상. 하나의 필드 세트(하나의 구성)를 만들고 이 모든 필드를 여기에 채우고(어휘가 아쉽지만) 관리자에게 어떻게 살고 함께 지내야 하는지 알려주지 않을 것입니다. 이것은 진지한 접근 방식이 아닙니다! ? (누군가 이해해주기를 바랍니다.) 이제 본격적으로 사업을 시작하겠습니다. "이유"를 이해했으니 이제 "방법"을 알아봅시다. 첫 번째 강의를 이미 읽었다면 MIGX 구성 요소 페이지로 이동하여 3가지 구성을 만들어야 합니다. Jako의 ColorPicker 사전 설치(필수는 아님): 제가 지정하지 않은 것은 건너뛰세요! 구성 솔리드

설정 탭
- 이름 - 솔리드
- 새 카테고리 추가 - 슬라이더
형식 탭 탭
- 필드 필드는 3개의 필드를 생성합니다.
- 배경색:
  - 필드 이름 - bgcolor
  - 캡션 - 배경색 선택
  - 입력 TV 유형 - ColorPicker(또는 원하는 유형)
    사용)
- 표제:
  - 필드 이름 - 헤더
  - 캡션 - 슬라이드 제목
- 설명:
  - 필드 이름 - 설명
  - 캡션 - 슬라이드 설명
  - 입력 TV 유형 - 텍스트 영역
- 여러 형식 탭 필드 - 유형( 이 값에 있는 키의 이름이 됩니다.
  출력 배열. 기본값: MIGX_formname)
- - 배경에 단색으로(텍스트)
  선택 목록에 지정된 구성)
- - solid(동일 유형 필드의 값
  배열에서)

비디오 구성

설정 탭
- 이름 - 비디오
- 카테고리 - 슬라이더
형식 탭 탭
- 필드 - 1개의 탭을 만들고 필드 필드에서 다시 3개의 필드를 만듭니다. 이 필드 중 하나만 다른 유형입니다. 여기서는 여러분의 상상력이 제한된 만큼 필드 수와 다양한 구성의 해당 유형이 다양할 수 있다는 점을 명확히 해야 합니다. 그리고 여러분의 상상력이 괜찮다는 것을 알고 있습니다.
- 비디오(예: 파일):
  - 필드 이름 - 비디오
  - 캡션 - 동영상 업로드
  - 입력 TV 유형 - 파일
- 표제:
  - 필드 이름 - 헤더
  - 캡션 - 슬라이드 제목
- 설명:
  - 필드 이름 - 설명
  - 캡션 - 슬라이드 설명
  - 입력 TV 유형 - 텍스트 영역
- 여러 형식 탭 필드 - 유형
- 여러 형식탭 옵션텍스트 - 배경에 비디오 포함
- 여러 형식탭 옵션값 - 비디오

슬라이더 구성은 기본적으로 이미지를 촬영하며 기본 구성이 됩니다.

설정 탭
- 이름 - 슬라이더
- 카테고리 - 슬라이더
- "요소 추가" 교체 - 슬라이드 추가
- 양식 캡션
- 창 제목 - 슬라이드 추가/편집
형식 탭 탭
- 필드 - 1개의 탭을 생성하고 다시 필드 필드에 3개의 필드를 생성합니다.
- 영상:
  - 필드 이름 - 이미지
  - 캡션 - 이미지 업로드
  - 입력 TV 유형 - 이미지
  - 필요한 파일의 소스를 지정하세요. 이 작업은 첫 번째 강의에서 설명했습니다.
- 표제:
  - 필드 이름 - 헤더
  - 캡션 - 슬라이드 제목
- 설명:
  - 필드 이름 - 설명
  - 캡션 - 슬라이드 설명
  - 입력 TV 유형 - 텍스트 영역
- 다중 형식 탭 - 여기서 마법이 시작됩니다. 지금 만들고 있는 구성을 포함하여 이전 단계에서 만든 구성을 선택해야 합니다. 비디오, 솔리드 및 슬라이더를 선택하십시오. 슬라이더 구성은 실제로 아직 생성되지 않았기 때문에 목록에 없으므로 나머지 단계를 거쳐 구성을 저장하고 편집을 위해 이 구성을 다시 열어야 합니다. 목록 슬라이더에 표시됩니다.
  한 가지 더 명확하게 말하면 구성은 선택한 순서대로 정확하게 정렬됩니다. 기본적으로 새 슬라이드를 추가하면 목록의 첫 번째 슬라이드가 선택됩니다.
- 여러 형식 탭 레이블 - 슬라이드 유형을 선택합니다(여기에 텍스트가 표시됨).
  사용자는 슬라이드 유형 선택 목록 옆에 표시됩니다)
- 여러 형식 탭 필드 - 유형
- 여러 형식탭 옵션텍스트 - 배경에 이미지 포함
- 여러 형식탭 옵션값 - 이미지
열 탭
- 열 필드. 두 가지 요소 추가
- 표제
  - 열 탭
    - 헤더 - 제목
    - 필드 - 헤더
  - 셀 편집기 탭
    - 편집자 - this.textEditor
- 설명
  - 열 탭
    - 헤더 - 설명
    - 필드 - 설명
  - 셀 편집기 탭
    - 편집자 - this.textEditor

이미 알고 있듯이 처음 두 구성에서는 제어판에 출력용 열을 만들지 않았습니다. TV 매개변수 자체를 편집할 때. 이러한 열은 마지막 열에서 생성되어야 합니다. TV에 지정될 구성과 Formtabs 탭의 Multiple Formtabs 필드에 동일한 구성을 포함하여 필요한 모든 구성이 나열됩니다.
입력 유형 migx 로 TV를 빠르게 생성해 보겠습니다. 구성 필드에 구성 이름을 씁니다. 즉, 슬라이더를 사용하여 필요한 템플릿을 할당하고 편집할 리소스를 열거나 생성합니다. 모든 작업을 올바르게 수행했다면 다음 그림을 볼 수 있습니다. 이미지를 클릭할 수 있으며 노트 시작 부분에 있는 링크에서 이미 gif를 본 적이 있다면 이것이 전부입니다.

우리는 데이터를 매우 빠르게 입력하고 슬라이드 표시로 넘어갑니다.

철수하는 방법? 데이터 입력은 좋은데 출력은 어떤가요? - 걱정하지 마세요, 동지 여러분, 모든 것이 잘 될 것입니다. 출력을 위해 다시 2개의 좋은 옵션이 있으며 에서 이 두 옵션을 모두 고려했습니다. 이는 기본 MIGX 스니펫 getImageList 및 전능한 fenom 입니다. 데이터가 어떻게 보이는지 살펴보겠습니다. getImageList 원시 데이터를 보기 위해 tpl 매개변수를 지정하지 않고 코드 조각을 호출해 보겠습니다.

[] 배열 ( => 14 => 이미지 => files/avatar.png => 이미지가 포함된 슬라이드입니다 => 간단한 설명입니다.) [_alt] => 0 [_first] => 1 [_last] = > => 1 = > 슬라이더) 배열 ( => 15 => 동영상 => 파일/집이 부끄러워요.MOV => 그리고 이건 동영상입니다 => 그렇죠! [_alt] => 1 [_first] => [_last] => => 2 => 슬라이더) 배열 ( => 16 => 솔리드 => ff0000 => 그리고 여기 빨간색이 이쁘네요 => 맘에 듭니다! [_alt] => 0 [_first] => [ _last] => 1 => 3 => 슬라이더)

fenom ($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => 이미지가 포함된 슬라이드입니다 => 간단한 설명입니다) ) => 배열( => 15 => 비디오 => 파일/우리 집이 부끄럽습니다.MOV => 그리고 이것은 이미 비디오입니다 => 예, 정말!) => 배열( => 16 => 솔리드 => ff0000 = > 그리고 여기 빨간색은 아름다운 색이에요 => > 좋아요!))
보시다시피 배열에는 구성을 생성할 때 지정한 값이 포함된 유형 키가 있습니다.

getImageList를 사용하여 슬라이더를 표시하려면 유형 키 값의 이름(예: 이미지, 비디오 및 솔리드)을 사용하여 3개의 청크를 생성해야 합니다. 다음으로 그 이유를 이해하게 될 것입니다.

청크의 예:

// 청크 이미지 [[+헤더]]

[[+설명]]

// 동영상 청크 [[+header]]

[[+설명]]

// 덩어리 솔리드 [[+헤더]]

[[+설명]]

호출은 다음과 같아야 합니다.

[]

여기서는 각 슬라이드의 배열에서 값을 가져오므로 다중 형식 탭 필드의 값과 이름이 일치하는 세 개의 청크를 만들었습니다.
글쎄요, fenom에서는 모든 것이 훨씬 단순해 보입니다.

(var $slider = $_modx->resource.slider| fromJSON) ($slider인 경우) ($slider를 $slide로 전환) ($slide["type"] 전환) (대소문자 "image") ($slide["header "])

($슬라이드["설명"])

(사례 "동영상") ($slide["header"])

($슬라이드["설명"])

(케이스 "단단한") ($slide["header"])

($슬라이드["설명"])

(/스위치) (/foreach) (/if)

결과 및 약속된 이야기 보시다시피 MIGX는 "훌륭하게"는 아니지만 적어도 "좋게" 이 작업에 대처합니다. MIGX는 구성 수, 각 구성의 탭 및 필드 수를 제한하지 않는다는 점을 다시 한 번 반복합니다. 그리고 여러분이 이미 이해하셨기를 바랍니다. 예제는 매우 간단하므로 여러분도 이 기능에 쉽게 익숙해질 수 있습니다. 그리고 한 가지 더 중요한 점: 청크를 출력할 때 채워질 필드를 확인하고 데이터가 채워질 수도 있고 채워지지 않을 수도 있고 어떤 이유로 도착하지 않을 수도 있다는 점을 항상 고려하는 것이 좋습니다. 따라서 phx 필터를 사용하세요. fenom의 MODX 구문 또는 조건.

관심을 가져주셔서 감사합니다. 모든 사람에게 행운이 있기를 바라지만 그렇지 않을 것입니다. "패자에게 행운이 있기를 바랍니다"라고 말했듯이 행복과 건강 등을 기원하지만 관심있는 분들을 위해 , 나머지는 역사이다.

한번은 내 친척들이 우리를 방문했는데, 그 중에는 내 조카(자매의 아들)도 있었습니다. 이웃 나라그리고 나의 두 조카(우리는 거의 모두 같은 나이입니다). 별장, 화창한 중앙 아시아, 작은 산과 강이 근처에 있습니다. 그날 밤, 우리 넷은 바로 이 강을 따라 산책하기로 결정했고 처음에는 모든 것이 조용했기 때문에 걱정할 이유가 없었습니다. 우리는 꽤 즐거운 시간을 보냈고, 이야기(때때로 무섭고 소름끼치는)를 하고, 농담도 하고 그런 것들을 했습니다. 그런데 어느 순간 조카 중 한 명이 창백해졌다는 걸 알아차렸는데, 이는 단순한 말장난이나 꾸밈이 아니었습니다. 이 사건 전후에 사람의 얼굴에서 그런 두려움과 당황함을 본 적이 없었기 때문입니다. 그는 눈을 떼지 않고 내가 등을 돌린 쪽을 바라보았다. 그는 내 뒤에있는 무언가 또는 누군가를보고있는 것 같았지만 내 바로 뒤에 있지 않고 가까이서 먼 곳을 바라보고있는 것 같았습니다. 소름끼쳐서 나는 그에게 물었습니다. - 무슨 일이 일어났나요? 그리고 그는…

이 단락은 이 노트의 이야기가 계속되는 것처럼 가정해야 하지만 사실 나는 기술적이고 지루하며 긴 텍스트에서 당신을 조금 격려할 수 있고 당신의 기분이 좋아지기를 바라면서 당신을 조금 속였습니다. 그리고 이야기 자체는 현실적이고 매우 흥미롭습니다. 이제 관심을 가져주셔서 감사합니다!

UPD:
내가 바흐라면 어떨까!?

갑자기 누군가가 루블로 감사를 표하고 싶다면 그렇게 하세요: Sberbank 카드 +79609354545

이번 강의에서는 MIGX의 기본 사항을 살펴보고 블로그에서 사용할 수 있는 새로운 슬라이더에 대해 작업하겠습니다.

요구사항:

MODX 레볼루션 웹사이트.
MIGX 사용자 정의 템플릿 변수 유형이 설치되었습니다(패키지 제어를 통해).
통합하려는 갤러리 슬라이더 또는 스크립트입니다. 저는 WooThemes의 FlexSlider를 사용했는데, 그 이유는 컨테이너의 너비에 맞춰 자동으로 조정되기 때문입니다(반응형 디자인에 매우 중요합니다!). 또한 구성이 쉽고, 스마트폰에서 스크롤을 지원하며, 수정 없이도 멋지게 보입니다.
이미지 자동 자르기를 위해 패키지 관리자를 통해 phpthumbof 스니펫을 설치했습니다.
어떤 이미지라도!

시작하다

작품은 여러 부분을 사용합니다. 먼저 MIGX TV를 설치해야 하며 프런트 엔드에서 이 데이터를 가져와 슬라이더가 작동하도록 해야 합니다. 이 튜토리얼에서는 FlexSlider를 사용한다고 가정하고 레이아웃이 필요한 것인지 확인하지만 다른 슬라이더에도 적용하기가 매우 쉽습니다.

1단계: 이미지 관리를 위해 MIGX TV 설치

TV 설치부터 시작하겠습니다. MIGX의 장점은 필요한 필드를 정의할 수 있다는 것입니다. 표로 표시되며 제목의 이름만 지정하면 됩니다. 이 경우 세 가지 필드가 필요합니다.

파일 시스템(또는 미디어 소스의 2.2)에서 이미지를 선택하기 위한 입력 필드입니다.
캡션/태그/설명을 입력하기 위한 텍스트 입력 필드입니다. FlexSlider는 캡션 작업을 훌륭하게 수행하므로 캡션을 사용하겠습니다.
"Set"에 대한 텍스트 입력도 추가했습니다. 나중에 살펴보겠지만 리소스의 어느 위치에서나 추가될 무한한 수의 개별 슬라이더에 이를 사용할 것입니다.

원하는 경우 다른 필드를 사용할 수 있지만 수업에서는 위에서 제공한 필드를 정확하게 가정합니다.

TV 만들기로 넘어 갑시다. 다음은 이미지 설명이 포함된 슬라이더입니다(썸네일에 아무것도 표시되지 않는 경우).

요소 탭에서 새 템플릿 변수를 생성하고 적절한 이름을 지정합니다. 저는 ws.images라고 부르겠습니다. 자신만의 이름을 지정했다면 [[*ws.images]]를 자신의 이름으로 바꾸는 것을 잊지 마세요. 입력 옵션 탭의 드롭다운 메뉴에서 "migx" 유형을 선택하세요. 이 유형이 표시되지 않으면 패키지 관리자를 통해 MIGX 패키지를 설치했는지 확인하세요. 양식 탭 및 그리드 열을 포함하여 화면 하단에 여러 옵션이 추가된 것을 확인할 수 있습니다. 이는 MODX 버전 >2.0에 적용되며 이전 버전의 경우 업그레이드하는 것이 좋습니다.

참고: 양식 탭 및 그리드 열 필드는 유효한 JSON 문자열로 채워야 합니다. JSON은 기본적으로 거의 모든 프로그래밍 언어가 지원하는 방식으로 객체, 배열 또는 키 -> 값 조합을 표시하는 방법입니다. 다음은 공식 JSON 웹사이트의 기술 사양과 몇 가지 예입니다.

양식 탭 설치

이 양식을 사용하면 다양한 탭을 사용할 수 있습니다. 각 탭에는 설명과 여러 필드가 있습니다. 대부분의 경우 단일 탭을 사용하므로 이를 통해 많은 고급 작업을 수행할 수 있으므로 나중을 위해 지금만 기억하세요. 내가 사용하는 양식 탭에 대한 JSON 코드는 다음과 같습니다.

[("캡션":"이미지", "필드": [ ("필드":"설정","캡션":"설정"), ("필드":"설명","캡션":"설명") , ("필드":"이미지","캡션":"이미지","inputTVtype":"이미지") ] )]

각 줄을 살펴보겠습니다.

첫 번째는 대괄호([)를 사용하여 탭 배열을 여는 것과 중괄호(())를 사용하여 탭 개체를 여는 것을 보여줍니다. 그런 다음 이미지 필드의 캡션을 정의합니다. 속성 및 해당 값에 큰따옴표(" ")를 사용하면 단일 인용으로 인해 예상치 못한 결과가 발생할 수 있습니다. 속성, 값에서 이러한 대괄호를 찾으면 슬래시(\)로 이스케이프 처리하세요. 설명(캡션)을 정의한 후, 계속해서 "필드" 배열 정의를 시작하고 대괄호([)로 엽니다.
첫 번째 필드를 set으로 정의하겠습니다. "field": "set"은 이 필드에 일반 텍스트 입력을 원한다는 의미입니다. "캡션": "세트" – "세트"라는 이름에 대한 설명을 제공합니다. 이는 일반 텍스트를 입력하기 위한 이름이 됩니다. 다음으로 양식에 필드 레이블로 표시되는 "Set" 서명을 지정합니다.
다음으로 설명 필드도 같은 방식으로 정의합니다.
4번째 줄은 이미지를 정의합니다. 여기서 특별한 점은 입력 유형으로 다른 TV("image"라는 이름)를 사용하고 있다는 것입니다. 이는 MIGX의 매우 강력한 기능으로, 다른 TV를 사용하여 모양을 만들 수 있습니다. 이 경우 TV "이미지"는 매우 간단합니다. 입력 유형은 이미지이고 2.2에서는 이를 올바른 미디어 소스에 할당할 수 있습니다. 일반 TV의 경우처럼 템플릿과 연결할 필요가 없습니다. 이를 수행하는 또 다른 방법(제가 다른 MIGX TV에서 사용하는 방법)은 라디오 상자나 선택 상자를 만드는 것입니다.
다섯 번째 줄은 필드 배열을 닫습니다. 또한 필드(이미지)를 정의하는 마지막 줄은 쉼표로 끝나지 않는다는 점에 유의하세요. 이는 중요합니다! 배열에 쉼표를 넣으면 JSON이 구문 분석되지 않고 양식이 작동하지 않습니다.
여섯 번째 줄은 탭 개체와 전체 탭 배열을 닫습니다.

그래서 우리는 이런 방식으로 "이미지" TV를 만들었습니다! 데이터를 입력하는 데 필요한 양식이 이미 있어야 하지만 이를 표시하려면 마크업이 필요합니다.

열 레이아웃 설정 열 레이아웃은 TV 리소스 패널의 테이블입니다. 열 레이아웃 입력 옵션을 통해 이 테이블의 헤더를 정의해야 합니다. 다음은 내가 사용하고 있는 것에 대한 (JSON) 정의입니다: [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description", "sortable": "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage " )]

각 줄을 살펴보겠습니다.

대괄호([)를 사용하여 헤더 배열을 열고 중괄호(()를 사용하여 다섯 번째 열 헤더를 엽니다.
헤더의 이름을 "Set"으로 지정하고, 정렬(정렬 가능)할 수 있음을 나타내며 "field": "set"이 있는 Set Form 탭의 정의에 해당하는 "set" 매개변수를 지정합니다.
끝 세트 / 시작 설명
헤더 이름을 "Description"으로 지정하고 정렬한 후 설명 dataIndex 필드와 비교합니다.
설명 끝 / 시작 이미지
헤더의 이름을 정렬할 수 없는 "Image"로 지정하고 이를 dataIndex 필드(image)에 매핑합니다. 또한 ExtJS에서 출력 데이터 유형을 변경할 수 있는 렌더러를 정의합니다. 이 경우 렌더러는 "this.renderImage"로 선택한 이미지의 URL을 자동으로 가져와 대신 썸네일을 생성합니다.
Image 객체와 헤더 배열의 끝입니다.

그런 다음 이 MIGX TV를 템플릿에 할당하고 결과를 확인할 수 있습니다. 마크업이 표시되지 않나요? 탭으로 돌아가서 모든 값이 작은따옴표가 아닌 큰따옴표로 묶여 있는지 확인하고 추가 쉼표가 있는지 확인하세요.

정보 JSONLint를 사용하여 JSON의 유효성을 검사합니다.

세부정보를 입력하세요.
사이트에 데이터 표시

템플릿 변수 ws.image를 임의의 데이터로 채워 보겠습니다.

이 데이터를 일반 TV로 표시하려고 하면 다음과 같은 내용이 표시됩니다.

[( "MIGX_id":"1","set":"set1","description":"자지 않을 때 몰래 소시지를 훔쳐 먹는 마크의 고양이","image":"demo/uroki/15 /1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"barabaka","image":"demo/uroki/15/2.jpg" ),( "MIGX_id ":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4 ", "set":"set1","description":"이 책으로 사람을 죽일 수 있습니다","image":"demo/uroki/15/4.jpg" )]

입력된 필드와 값이 포함된 JSON 배열입니다!

MIGX에는 getImageList 스니펫이 함께 제공되므로 이를 사용하여 데이터를 표시해 볼 수 있습니다. 이 조각에 대한 문서를 찾을 수 있습니다. 또는 TV 데이터를 기반으로 &tpl 청크에서 마크업을 생성하는 데 사용하는 자신만의 코드 조각(parseMIGXToGallery)을 만드세요.