(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 lo avessero trasformato in qualcosa di simile a wordpress, una piccola festa di ricerca. Ad ogni modo lo scaricherò e lo installerò alla vecchia maniera (lo consiglio ancora alla vecchia maniera).
Scarica tutti i moduli dal sito Drupal e installali 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) Collegamento (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 selezionare il nuovo stile desiderato, quindi fare clic sul pulsante Aggiungi (in questo tutorial ho scelto di ridimensionare lo stile) (3) Nella schermata successiva impostare la larghezza e l'altezza e fare clic sul pulsante Aggiungi effetto. (Le impostazioni possono variare in base allo stile scelto). Ho impostato la larghezza su 935 e l'altezza su 293 pixel.
Fai lo stesso procedimento 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 dispositivo di scorrimento (5) Assegna i nomi dei campi alt e titolo (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 (il tuo contenuto 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". "Dai un'occhiata" 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 successiva finestra di cofigurazione 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: Nothing Impostazioni stile: Lascia impostazioni predefinite Nessun comportamento risultato: Lascia impostazioni predefinite Riscrivi risultati: Controlla 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 l'opzione del campo link qui) 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 sceglierli 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 lo facessimot imposta 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 "Applica pulsante"
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 È possibile trovare il plug-in all'indirizzo 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 Pause on Pager Hove: spuntato, i controlli e il contatore del cursore lasciano deselezionati. (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 che la diapositiva venga visualizzata 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 predefinito page.tpl.php. [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) Blocca titolo (se non si desidera visualizzare il titolo BLOBK, basta digitare) (2) Ancora una volta si ottengono tutte le impostazioni 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.