Pentru a vă familiariza cu scopul pachetului MIGX și cum să-l instalați, puteți să vă prezentați într-un articol care explorează metoda de control convenabil a caruselului Bootstrap.
adăugări de utilizare: un cadru Twitter Bootstrap 3, biblioteca jQuery, jQuery pluginului fancybox, MIGX și pdoTools MODX-ons (pentru paginare).
Crearea unei configurații MIGX pentru portofoliu
Dezvoltarea configurației MIGX pentru portofoliu se realizează prin realizarea următoarelor acțiuni:
- Deschideți pagina "Gestionați MIGX" în Managerul MODX Revolution.
- Accesați fila "MIGX" și faceți clic pe butonul "Adăugați element".
- În caseta de dialog "MIGX", în fila "Setări", introduceți valoarea portofoliului în câmpul de nume (nume de configurare).
- În fila "Formtabs", creați un tabel cu titlul "Portofoliu" și următoarele câmpuri:
- FieldName - nume, subtitrare - numele jobului.
- FieldName - imagine, caption - imagine, tip TV de intrare - imagine.
- FieldName - descriere, caption - Descrierea lucrării.
- FieldName - preț, Titlu - Preț, Tip de intrare TV - număr.
- În fila "Coloane" definim rubricile tabelului cu care utilizatorul din resursa MODX va introduce datele în câmpurile corespunzătoare:
- Antet - numele lucrării, câmp - nume, lățimea coloanei - 30.
- Antet - imagine, câmp - imagine, Renderer - this.renderImage.
- Antet - descriere, descriere câmp, lățime coloană - 200.
- Antet - preț, câmp - preț.
Crearea unui câmp suplimentar bazat pe configurația MIGX
Creați un câmp suplimentar denumit portofoliu. Conținutul acestui câmp TV este definit ca migx. Ca structură a acestui câmp, indicăm configurația creată anterior. Ca șablon, selectați elementul "Format pentru portofoliu".
MODX - cutie TV cu tipul de intrare MIGX și portofoliu de configurare
Adăugarea de date în câmpul TV al portofoliului
Să deschidem resursa cu elementul "Șablon pentru portofoliu" selectat ca șablon. După aceasta, accesați fila "Câmpuri suplimentare" și completați portofoliul TV-variabil cu unele date.
MODX MIGX - Afișarea imaginii de portofoliu asupra conținutului paginii utilizând fancybox
Producerea datelor din câmpul TV MIGX
Datele de ieșire din câmpul TV (MIGX) sunt implementate utilizând fragmentul getImageList. În acest caz, nu vom afișa toate datele simultan, dar în porțiuni de câte 5 bucăți fiecare. Pentru a face acest lucru, vom folosi fragmentul pdoPage din pachetul pdoTools.
Ca rezultat, obținem următorul cod:
Ultimul pas este crearea unui șablon (bucată) tplPortfolioItem. pe baza căruia se va forma fiecare element al portofoliului.
Conținutul tplPortfolioItem:
Ie Vom afișa elementele portofoliului în ordinea bordului (în funcție de paritatea elementului). Dacă elementul este ciudat, atunci imaginea din stânga și textul din dreapta (numele jobului, descrierea și prețul). Dacă elementul este uniform, apoi invers - imaginea din dreapta și textul din stânga. Rețeaua poate fi formată utilizând clasele de cadru Bootstrap.
Stilurile CSS care trebuie adăugate la pagină, astfel încât aspectul să fie corect pe dispozitivele mici (xs și sm):
Vom efectua o acțiune suplimentară, și anume conectați-vă la pagina fancybox (un instrument pentru afișarea imaginilor în stilul lightbox, adică se află pe restul conținutului paginii web).
După aceea, trebuie să îl dezarhivați și să îl copiați în directorul sursă.
Conectarea fancybox la pagina se face prin două fișiere:
Activarea cutiei fancybox pentru imaginile de portofoliu se face folosind următorul script:
Portofoliul cu paginare pe pagină va arăta astfel.
MODX MIGX - Partea superioară a paginii „portofoliu“ MODX MIGX - Partea de jos a paginii „portofoliu“ (paginare) MODX MIGX - Afișarea imaginilor asupra conținutului paginii de portofoliu folosind fancybox