Crea una presentazione con SlideShowPro e Expression Engine

Sono disponibili molte opzioni per la creazione e la visualizzazione di presentazioni online (ad esempio qui e qui, ad esempio). Per questo tutorial, ho deciso di integrare SlideShowPro con Expression Engine.


Anteprima Screencast



Passaggio 1: creare un database

Per installare e utilizzare Expression Engine, è necessario prima creare un database. Per questo tutorial, ho creato un database chiamato eeTuts.



Passaggio 2: installare Expression Engine

Scarica i file di installazione da expressionengine.com. A seconda delle esigenze, potrebbe essere necessario pagare una licenza. Dopo aver decompresso i file di installazione nella tua directory web, la struttura dovrebbe essere simile a questa:


Prima di procedere con l'installazione, è buona prassi rinominare la directory di sistema con un altro nome. La directory di sistema fornisce l'accesso al pannello di controllo e la modifica del nome può aiutare a nascondere questa directory da utenti generici. Sono andato avanti e ho cambiato il nome da controllare.

Puntare al file install.php con il browser Web per iniziare l'installazione. In questo caso, stiamo usando la versione 1.6.7. Per ulteriori informazioni sulla procedura di installazione, consultare la documentazione di Expression Engine, disponibile qui: http://expressionengine.com/docs/installation/installation.html

Dalla mia esperienza, gli errori di installazione si verificano più spesso a causa di non avere le autorizzazioni corrette per cartelle / file e / o non avere accesso al database.

Una volta installato Expression Engine, dovresti vedere diverse tabelle nel database. Se non hai modificato il prefisso della tabella durante il processo di installazione, tutte le tabelle dovrebbero iniziare con "exp_". Una volta installati, vengono creati 68 tavoli.


Al termine dell'installazione, sono disponibili il pannello di controllo e il sito predefinito.


Accedi al pannello di controllo con le impostazioni delle credenziali nell'installazione e dovrebbe apparire la schermata di amministrazione.


Screencast completo



Passaggio 3: scarica un'estensione per il caricamento di file

Sebbene Expression Engine venga fornito con un file uploader per impostazione predefinita, installerò un'estensione di file popolare, qui trovata. Lo sto facendo principalmente per dimostrare come installare estensioni, ma in secondo luogo, questa estensione di file fornisce opzioni aggiuntive che potrebbero essere utili per te. Si prega di consultare la documentazione di questa estensione per ulteriori informazioni. Una volta scaricato e decompresso il file di estensione, scorrere fino alla directory di controllo e posizionare ext.mh_file_ext.php nella directory extensions, il file lang.mh_file_ext.php nella directory language-> english e la cartella icone nella directory images ( situato sopra la directory di controllo). Successivamente, abilitare questa estensione andando su Admin -> Utilità -> Gestione estensioni, fare clic su Abilita estensioni e quindi abilitare l'estensione particolare, in questo caso, l'estensione del file uploader.
Ora, creiamo una directory personalizzata in cui verranno caricati i file.


Passaggio 4: installazione di una directory di caricamento file

Crea una nuova cartella all'interno della directory images e chiamala Portfolio. Assicurati di dare a questa directory le autorizzazioni di scrittura. Ora, fai clic su Amministrazione -> Amministrazione blog -> Preferenze caricamento file. Crea una nuova destinazione per il caricamento di file con le seguenti credenziali:

Percorso del server per caricare la directory: / percorso / per / immagini / Portfolio /
URL della directory di caricamento: http://example.com/images/Portfolio/
Assicurati che l'opzione Immagini sia selezionata. Lascia tutto il resto da solo e invia.



Passaggio 5: installazione di un weblog

All'interno del pannello di controllo, fare clic sulla scheda Amministrazione (sul lato destro del pannello di controllo) -> Amministrazione del weblog -> Gestione del weblog. Clicca su "Crea un nuovo weblog" e chiamalo Portfolio e crea il portfolio dei nomi brevi. Lascia le sole opzioni rimanenti e premi invio.


Passaggio 6: installazione di un gruppo di campi personalizzato

Fare clic su Admin -> Amministrazione weblog -> Campi weblog personalizzati, fare clic sul pulsante "Crea un nuovo gruppo campo weblog" e chiamarlo Gruppo portfolio. Dobbiamo assegnare questo gruppo al blog del Portfolio. Nota, ti dovrebbe essere richiesto un link alla posizione per assegnare il gruppo, ma in caso contrario, vai su Admin -> Amministrazione del weblog -> Gestione del weblog e fai clic su Modifica gruppi per il blog del portfolio. Assegna il weblog del portfolio al gruppo portfolio.

Pensa a un weblog come contenitore di dati. La bellezza di questi contenitori (weblog) è che è possibile personalizzare il contenitore dei dati per utilizzare vari tipi di campo (casella di inserimento, area di testo, ecc.). Il gruppo di campi definisce quali campi (casella di input, textarea, ecc.) Sono assegnati al weblog. Una volta creato un weblog, è necessario assegnarlo a un gruppo di campi, quindi verranno visualizzati i tipi di campo corretti. Dopo aver creato una voce nel weblog, verranno visualizzati i campi creati nel gruppo di campi assegnato. Questa è una delle fantastiche parti di Expression Engine, in quanto è possibile creare contenitori di dati e tipi di campi personalizzati e visualizzare facilmente tali informazioni.

Nota: se non ti piace il termine weblog, puoi cambiare il nome di riferimento all'interno del pannello di controllo (alcuni fanno riferimento a questi contenitori di dati come sezioni). Quando arriva la versione 2.0 di Expression Engine, il termine weblog non sarà più utilizzato per fare riferimento a questi contenitori di dati (verrà utilizzato invece il canale).


Passaggio 7: creare due campi all'interno del gruppo di campi del portfolio:

  1. Nome campo = image_caption, Field Label = Didascalia immagine, Tipo di campo = Textarea, Imposta formattazione su Nessuno, Invia
  2. Nome campo = file_immagine, Etichetta campo = File immagine, Tipo campo = File (questa opzione viene visualizzata a causa dell'estensione installata), Scegli la directory Caricamento portfolio che abbiamo creato, rendi il campo richiesto, premi Invia


Passaggio 8: aggiunta di dati al portale Web del portfolio

Fare clic su Pubblica -> Portafoglio. Lo schermo dovrebbe apparire simile all'immagine seguente. Pubblica alcuni record sul weblog. Controlla la directory di caricamento del tuo portfolio per assicurarti che le immagini vengano pubblicate su quella directory. Dopo che alcune immagini sono state pubblicate sul weblog, creiamo i modelli.



Passaggio 9: creare il gruppo di modelli e modelli

Fare clic sulla scheda Modelli. Fare clic sul pulsante "Crea un nuovo gruppo di modelli" (lato destro dello schermo). Chiama questo gruppo "principale" e seleziona la casella per rendere il modello di indice la home page del sito. Ora, fai clic sul modello di indice all'interno del gruppo di modelli "principale" e incolla il seguente codice in questa casella di testo:

        Presentazione di Expression Engine   Ciao! 

Fare clic su Aggiorna per salvare il file. Nota: in questo caso, ho già generato il file Flash e il codice Flash. Potresti preferire altri modi di integrare il codice Flash, come l'utilizzo di swfobject (http://code.google.com/p/swfobject/).

Ora, all'interno del gruppo di modelli "principale", crea un nuovo modello (sezione centrale dello schermo), chiamalo portfolio_xml e imposta il tipo su xml (puoi chiamarlo come vuoi, sto solo usando _xml per aiutarmi ulteriormente identifica il file). Incolla il seguente codice xml in questo modello:

    exp: weblog: entries weblog = "portfolio"  / Exp: weblog: voci  

Noterai che il tag delle voci del weblog di Expression Engine viene utilizzato, che fa riferimento al blog del portfolio e che sta ritirando i campi personalizzati che abbiamo creato (image_file, title, image_caption). Il tag "caption" all'interno del tag immagine è ciò che alimenta la sezione didascalia di SlideShowPro. Il formato image_file file_name / image_file è specifico per l'estensione del file che abbiamo installato. Usando questo codice, viene catturato il nome completo del file caricato. La galleria xml, l'album, lgpath e tnpath sono specifici di SlideShowPro. Aggiorna il file per salvarlo. Ora, visualizza il file e visualizza la fonte. Dopo aver visto il codice sorgente del file xml, i dati che hai aggiunto al weblog dovrebbero apparire come questo:


Se i dati non vengono visualizzati, rivedere nuovamente i passaggi e accertarsi di disporre dei dati nel weblog corretto, fare riferimento al nome breve del weblog corretto, che tutti i tag siano stati scritti correttamente e che tutti i tag siano stati chiusi correttamente. Copia l'indirizzo per questo file xml renderizzato, poiché lo aggiungeremo al componente SlideShowPro.


Passaggio 10: modificare il componente Flash di SlideShowPro

SlideShowPro non è gratuito e, sebbene ciò possa allontanare alcuni utenti, ci sono diverse possibilità per l'integrazione di altre soluzioni gratuite; una volta compreso il funzionamento delle voci e dei weblog, si tratta solo di collegare altri strumenti alle voci e acquisire tali dati. Maggiori informazioni su SlideShowPro possono essere trovate qui. Dopo aver installato le estensioni di SlideShowPro (consultare la documentazione del sito per maggiori informazioni), aprire il componente e scorrere verso il basso per modificare le impostazioni XML. Incolla l'indirizzo che hai appena copiato dal file xml sottoposto a rendering nella riga Percorso file XML. Lascia il tipo di file XML al valore predefinito. Personalizza le altre impostazioni come meglio credi. Salva e pubblica questo file per generare swf.

A questo punto, il file swf renderizzato dovrebbe mostrare le immagini. In caso contrario, verificare che il file xml contenga dati. Si noti inoltre che è necessario utilizzare i file jpg, poiché i file PNG sembrano non essere supportati. Posiziona il file swf renderizzato nella directory root del sito, in modo che corrisponda a dove viene fatto riferimento al file flash nel codice del modello di indice.

Infine, se si desidera aggiungere musica alla presentazione, è sufficiente aggiungere il seguente al modello xml (assicurarsi di avere il file audio nella directory corretta. In questo caso, ho creato una directory audio, nella radice, sopra la directory di controllo e metti il ​​file audio lì.):

  

Link aggiuntivi

Ci sono alcuni altri esempi (che ho trovato almeno) che forniscono ulteriori informazioni sull'utilizzo di SlideShowPro con Expression Engine. Per ulteriori informazioni, potresti trovare utili questi collegamenti:

  • Usando il modulo galleria di EE con SlideShowPro
  • Utilizzando Flickr con EE e SlideShowPro
  • Un altro esempio di integrazione di SlideShowPro con Expression Engine
  • Confronto galleria vs weblog