it-swarm.it

Views, Views-Slideshow e Paging in Drupal 7

La situazione è la seguente: ho un tipo di contenuto Diapositiva e desidero visualizzare le tre diapositive più recenti in una presentazione. Le diapositive devono scorrere e anche le diapositive devono essere controllabili da un cercapersone. Il cercapersone dovrebbe avere tre punti elenco/collegamenti/immagini per poter saltare a una diapositiva particolare nella presentazione. Il cercapersone dovrebbe anche avere le frecce sinistra e destra per incrementare e decrementare la diapositiva nella presentazione.

Questa tecnica è usata ovunque sul web, ma non riesco a capire come configurarlo correttamente usando la vista Viste e Viste. Qualsiasi suggerimento da parte di tutti voi esperti Drupalites là fuori è il benvenuto.

Saluti, Les.

8
Lester Peabody

(1) Moduli richiesti (Versione: Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2) Installa i moduli

In Drupal7 puoi installare i moduli dalla sezione admin, ma sento ancora che questa nuova funzionalità non ha alcun significato, perché dobbiamo cercare il link del modulo nel sito Druapl e quindi copiare e incollare nell'area di installazione del modulo admin, davvero pazza. Sarebbe stato così bello se avessero fatto qualcosa come wordpress una piccola festa di ricerca. Comunque lo scaricherò e lo installerò alla vecchia maniera (consiglio ancora questo vecchio modo).

Scarica tutti i moduli da Drupal e installa nella directory nomeutente/siti/tutti/moduli. Vai a http://www.yoursitename.com/node#overlay=admin/modules e abilita questi moduli come di seguito;

(1) Visualizzazioni (2) Visualizzazioni UI (3) Visualizzazioni Presentazione (4) Visualizzazioni Presentazione: Ciclo (5) Strumenti caos (6) Link (7) Librerie (8) Token (Opzionale) (3) Crea cache immagine

In Drupal7 imagecache fa parte del modulo principale ed è chiamato come stili di immagine. Quindi creiamo due cache di immagini da qui, una per l'immagine a scorrimento a dimensione intera e l'altra per l'immagine in miniatura. In questo tutorial utilizzo la dimensione 935x293 (pixel) per l'immagine del dispositivo di scorrimento a dimensione intera e la dimensione 210x100 (pixel) per l'immagine di anteprima. Nota: queste configurazioni possono essere differite in base alle proprie esigenze.

  • Impostazioni dell'immagine del cursore a tutto schermo

Vai a http://www.yoursitename.com/node#overlay=admin/config/media/image-styles e fai clic sul link aggiungi nuovo stile (1) Dai un nome allo stile di immagine e fai clic sul pulsante Crea nuovo stile (2) Nella schermata di configurazione successiva seleziona il nuovo stile desiderato e fai clic sul pulsante Aggiungi (in questo tutorial scelgo lo stile di ridimensionamento) (3) Nella schermata successiva imposta la larghezza e l'altezza e fai clic sull'effetto Aggiungi pulsante. (Le impostazioni possono variare in base allo stile scelto). Ho impostato la larghezza su 935 e l'altezza su 293 pixel.

Fai lo stesso processo anche per l'immagine in miniatura. (per la dimensione dell'immagine in miniatura, ho impostato la larghezza su 210 e l'altezza su 100 pixel.) (4) Crea nuovo tipo di contenuto

Creiamo un nuovo tipo di contenuto, dalla barra dei menu del pannello di controllo fare clic su Struttura e quindi sui tipi di contenuto, quindi fare clic sul collegamento Aggiungi nuovo tipo di contenuto.

(1) Fornisci un nome leggibile dall'uomo, l'ho chiamato Slider in primo piano (il nome del macchinario verrà generato automaticamente in base al nome leggibile dall'uomo) (2) Fornisci una descrizione breve e pertinente (3) Impostazioni del modulo di invio, lascio come impostazioni predefinite (4) Opzioni di pubblicazione, ho controllato solo le pubblicazioni (tutte le altre impostazioni non sono state selezionate) (5) Impostazioni di visualizzazione, ho deselezionato le informazioni di autore e data. (6) Impostazioni commento, ho impostato nascosto (disabilitato) (7) Impostazioni menu, lascio le impostazioni predefinite. (8) Fare clic sul pulsante Salva e aggiungi campi (5) Crea nuovi campi

Qui in questo esempio creo solo due file, che sono campo immagine e campo link. Useremo il campo immagine per caricare la nostra immagine del dispositivo di scorrimento e il campo del collegamento per creare un collegamento personalizzato in cui vogliamo che il nostro dispositivo di scorrimento sia collegato.

Impostazioni del campo immagine

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.

Ho impostato questo campo come richiesto, ho aggiunto un nome per il direttore del file chiamato slider-image in modo che queste immagini siano disposte in modo speranzoso da altre immagini. Puoi impostare la dimensione massima del caricamento e la risoluzione qui, ho abilitato il campo alt e titolo e infine fai clic sul pulsante Salva impostazioni.

Utilizzando lo stesso metodo, crea anche il campo link.

Impostazioni campo link (1) Etichetta: Slider Link (2) Campo: slider_link (3) Tipo campo: link (4) Widget (elemento modulo): link (5) Fare clic sul pulsante Salva, Per le configurazioni del campo link lasciare tutto alle impostazioni predefinite . Ho riordinato il campo come mostrato di seguito; Campo titolo Campo immagine Campo collegamento Campo corpo (è anche possibile rimuovere questo campo se non necessario) Gestisci display Nella scheda Gestisci display è possibile configurare come visualizzare l'output del campo. Ho impostato il campo del collegamento come nascosto e ho anche impostato l'etichetta dell'immagine come nascosto Drupal7: gestisci campi (6) Crea contenuto dispositivo di scorrimento

Ho creato quattro contenuti di scorrimento in primo piano per questo tutorial.

(1) Fai clic su aggiungi link contenuto (2) Crea contenuto dispositivo di scorrimento in primo piano (3) Assegna un nome di titolo appropriato (4) Carica immagine del dispositivo di scorrimento (5) Assegna i nomi dei campi alt e title (6) Assegna un titolo di collegamento e un URL dove desideri il dispositivo di scorrimento da collegare (7) Lasciare tutte le altre impostazioni come predefinite tranne il campo del percorso se lo si desidera è possibile fornire un alias URL SEO friendly. (8) Salva il contenuto.

Allo stesso modo, crea altri contenuti Slider in primo piano (ho creato quattro contenuti) (7) Crea una nuova vista

Ora è il momento di creare la nostra nuova visualizzazione Presentazione. Dal menu Dashboard fai clic su Struttura e quindi fai clic su Viste.

(1) Fai clic su aggiungi nuovo link di visualizzazione (2) Dai un nome alla vista, ho nominato Slider in primo piano (il nome del macchinario verrà generato automaticamente) (3) Dai una descrizione della vista appropriata (4) Scegli Mostra il contenuto del tipo Slider in primo piano digitare il nome). (5) Deseleziona Crea una Pge e seleziona Crea un blocco (6) Digita il titolo del blocco e scegli il formato di visualizzazione come "Presentazione" degli elementi "campi" per pagina 5 (puoi inserire il numero di elementi che vuoi visualizzare) (7 ) Fai clic sul pulsante "Continua e modifica" Visualizza le impostazioni del campo Per prima cosa aggiungiamo il campo del collegamento (il collegamento deve essere il primo campo per funzionare correttamente) quindi fai clic sull'icona Aggiungi e dal filtro Gruppi seleziona Contenuto Aggiungi contenuto: Collegamento, Fai clic su "Aggiungi e configura pulsante" nella finestra di cofigurazione successiva deseleziona "Crea un'etichetta". "Controlla" Escludi dal display. Fai clic su "Pulsante Applica"

Quindi aggiungiamo il campo immagine, quindi fai clic sull'icona Aggiungi e dal filtro Gruppi seleziona contenuto Aggiungi contenuto: campo immagine (Nota: assicurati di scegliere il campo immagine che abbiamo verificato solo per questo tipo di contenuto del dispositivo di scorrimento.) Fai clic su "Aggiungi e configura pulsante "nella finestra di cofigurazione successiva deseleziona" Crea un'etichetta ".

Formatter: Immagine (se hai installato Colorbox o Lightbox puoi sceglierli qui!) Stile immagine: Fullsize (Scegli l'immagine che hai creato nel passaggio precedente) Collega l'immagine a: Niente Impostazioni stile: Lascia impostazioni predefinite Nessun comportamento risultato: Lascia impostazioni predefinite Riscrivi risultati: Verifica Output questo campo come collegamento Percorso collegamento: [view_node] (Nota: scorri un po 'e puoi vedere i pattern di sostituzione creati dal modulo Token Core, (se non abbiamo impostato il campo link come primo non riesco a visualizzare qui l'opzione del campo link) copia solo [view_node] quindi scorri verso l'alto e incollalo nel campo percorso link.) Fai clic su "Applica pulsante"

Infine abbiamo bisogno di un altro campo per la miniatura, quindi facciamo clic sull'icona Aggiungi e dal filtro Gruppi seleziona Contenuto Aggiungi contenuto: campo immagine (Nota: assicurati di scegliere il campo immagine che abbiamo verificato solo per questo tipo di contenuto del dispositivo di scorrimento). Fai clic su "Aggiungi e configura pulsante" nella finestra di cofigurazione successiva deseleziona "Crea un'etichetta" e CONTROLLA ESCLUDI DAL DISPLAY, Formatter: Immagine (se hai installato Colorbox o Lightbox puoi selezionarli qui!) Stile immagine: Miniatura (Scegli l'immagine hai creato nel passaggio precedente) Collega l'immagine a: Niente Impostazioni stile: lascia impostazioni predefinite Nessun comportamento risultato: lascia impostazioni predefinite Riscrivi risultati: Controlla Output questo campo come collegamento Percorso collegamento: [view_node] (Nota: scorrere un po 'e puoi vedere i pattern di sostituzione creati dal modulo Token Core, (se non abbiamo impostato il campo del link come prima non possiamo vedere qui l'opzione del campo del link) copia solo [view_node] quindi scorri verso l'alto e incollalo nel campo del percorso del link. ) Fai clic su "Pulsante Applica"

Visualizza le impostazioni dei filtri

In views3 i filtri vengono creati all'inizio mentre scegliamo il tipo di contenuto e altre impostazioni! Se hai bisogno di ulteriori filtri, puoi crearlo qui!

Visualizza le impostazioni di stile

Fare clic su Formato presentazione | settig e nella finestra di configurazione successiva impostata come di seguito; (1) Tipo di elenco: Elenco non ordinato (2) Classe wrapper: lascia le impostazioni predefinite (3) Stile> Pelle: sorda (4) Diapositive> Tipo presentazione: ciclo (5) Opzioni ciclo È necessario scaricare il plugin del ciclo jQuery e copiare jquery. cycle.all.min.js su siti/all/libraries/jquery.cycle Puoi trovare il plugin su http://malsup.com/jquery/cycle .

IN ITALIANO SEMPLICE Crea una cartella denominata "librerie" nella directory site/all, quindi crea un'altra cartella denominata "jquery.cycle" in quella directory e infine copia e incolla solo il "jquery.cycle.all.min.js" in questa directory.

(6) Transito: dissolvenza (7) Azione: pausa al passaggio del mouse (8) Tweaks di Internet Explorer: impostazione predefinita (9) Widget: puoi scegliere uno o entrambi in alto e in basso (io scelgo il fondo qui, e le impostazioni avanzate come sotto;) (10) Widget in basso> Cercapersone> Tipo di cercapersone: Campi (11) Campo di cercapersone: Contenuto: Immagine (Nota: l'ultimo che abbiamo aggiunto per il pollice, non confondere poiché entrambi i campi saranno denominati uguali.) (12) Attiva diapositiva e Pausa su Cercapersone: selezionato, i controlli e il contatore del cursore non vengono selezionati. (13) Fare clic sul pulsante Applica.

Formato Mostra impostazioni campo

Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) Crea una regione personalizzata (passaggio facoltativo)

(1) Apri nella tua cartella il file your_theme_name.info e aggiungi una nuova regione come questa mostrata sotto; regioni [Featured_slider] = Dispositivo di scorrimento in primo piano e salva il file .info. (2) Apri il tuo file page.tpl.php di temi e aggiungi questo codice nel punto in cui desideri visualizzare la diapositiva come mostrato di seguito;

Puoi anche creare un modello di pagina iniziale personalizzato come page - front.tpl.php in modo da non dover apportare modifiche al modello page.tpl.php predefinito. [9] Abilita e configura il blocco

Ora questo blocco sarà visibile nell'area disabilitata dei blocchi, quindi dal menu Dashboard vai su Struttura> Blocco e abilita il blocco su una regione predefinita dei temi o sulla regione personalizzata che abbiamo creato (optional_slider). (Le regioni variano in base al tema che stai utilizzando.)

Impostazioni di configurazione del blocco Dopo aver abilitato il blocco, si ottiene un collegamento per configurare il blocco, quindi fare clic sul collegamento Configura e sulla sezione delle impostazioni impostata come di seguito;

(1) Titolo del blocco (se non si desidera visualizzare il titolo BLOBK, basta digitare) (2) Ancora una volta si ottengono tutte le impostazioni della regione specifiche del tema abilitate. Su impostazioni di visibilità (3) Pagine> Mostra blocco su pagina specifica: scegli Solo le pagine elencate e digita in modo che questo blocco venga visualizzato solo sulla prima pagina. SUGGERIMENTI CSS PER VISUALIZZARE IN LINEA THUMBNAILS

Aggiungi questi codici CSS al foglio di stile dei temi per visualizzare le miniature in linea. .views-slideshow-controlli-bottom .views-slideshow-pager-field-item {float: left; margine: 20px 6px; } Apporta le modifiche necessarie.

14
user842

Dai un'occhiata a questo podcast di Mustardseed Media: Visualizza il tema della presentazione .

Durante il podcast, Bob analizza alcune delle nozioni di base di Slideshow Slideshow e anche il tema dell'output. Si basa su Drupal 6, ma credo che la maggior parte delle basi e delle lezioni saranno le stesse. Con solo un po 'di CSS, una presentazione può apparire come ton meglio. Consiglio vivamente di guardare questo podcast se vuoi delle presentazioni piacevoli.

2
Laxman13

Se vuoi sapere di più sulla presentazione delle visualizzazioni (ad esempio con le miniature) devi vedere questo buon tutorial: http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on- drupal7

1
gbwebservice