Opprett en lysbildefremvisning med SlideShowPro og Expression Engine

Det finnes mange alternativer for å lage og vise lysbildefremvisninger på nettet (for eksempel her og her, for eksempel). For denne opplæringen har jeg besluttet å integrere SlideShowPro med Expression Engine.


Screencast Preview



Trinn 1: Opprett en database

For å installere og bruke Expression Engine, må du først opprette en database. For denne opplæringen, opprettet jeg en database kalt eeTuts.



Trinn 2: Installer Expression Engine

Last ned installasjonsfilene fra expressionengine.com. Avhengig av dine behov, må du kanskje betale for en lisens. Når du har pakket opp installasjonsfilene i webkatalogen din, bør strukturen se slik ut:


Før du fortsetter installasjonen, er det god praksis å gi nytt navn til systemkatalogen til et annet navn. Systemkatalogen gir tilgang til kontrollpanelet, og endring av navnet kan bidra til å skjule denne katalogen fra generelle brukere. Jeg har gått videre og endret navnet for å kontrollere.

Pek på install.php filen med nettleseren din for å starte installasjonen. I dette tilfellet bruker vi versjon 1.6.7. For mer informasjon om installeringsprosessen, se Expression Engine dokumentasjonen, som du finner her: http://expressionengine.com/docs/installation/installation.html

Fra min erfaring oppstår installasjonsfeil oftest på grunn av at de ikke har riktig mappe / filtillatelser og / eller ikke har tilgang til databasen.

Når Expression Engine er installert, bør du se flere tabeller i databasen. Hvis du ikke endret tabellprefikset under installasjonsprosessen, bør alle tabellene begynne med "exp_". Når det er installert, opprettes 68 tabeller.


Etter vellykket installasjon er kontrollpanelet og standardstedet tilgjengelig.


Logg inn på kontrollpanelet med legitimasjonsoppsettet i installasjonen og administrasjonsskjermen skal vises.


Full Screencast



Trinn 3: Last ned en filopplasterutvidelse

Selv om Expression Engine leveres med en filopplaster som standard, skal jeg installere en populær filtillegg, funnet her. Jeg gjør dette hovedsakelig for å demonstrere hvordan du installerer utvidelser, men sekundært gir denne filtypen tilleggsalternativer som kan være nyttige for deg. Vennligst se dokumentasjonen for denne utvidelsen for mer informasjon. Når utvidelsesfilen er lastet ned og utpakket, blar du til kontrollkatalogen og legger ext.mh_file_ext.php i utvidelsesmappen, lang.mh_file_ext.php i språk-> engelsk katalogen og ikonmappen i bildekatalogen ( plassert over kontrollkatalogen). Deretter aktiverer du denne utvidelsen ved å gå til Admin -> Verktøy -> Extensions Manager, klikk Aktiver utvidelser og deretter aktivere den spesifikke utvidelsen, i dette tilfellet filopplastingsutvidelsen.
La oss nå lage en tilpasset katalog til hvor filene skal lastes opp til.


Trinn 4: Konfigurer en filopplastingskatalog

Opprett en ny mappe i bildekatalogen og ring den til Porteføljen. Sørg for å gi denne katalogen Skriv tillatelser. Klikk nå på Admin -> Weblog administrasjon -> Filopplastingsinnstillinger. Opprett et nytt filopplastingsmål med følgende legitimasjon:

Server banen til opplasting katalog: / bane / til / bilder / portefølje /
URL til opplastingsregister: http://example.com/images/Portfolio/
Kontroller at bare bilder er valgt. La alt annet være alene og sende inn.



Trinn 5: Oppsett en weblog

I kontrollpanelet klikker du på fanen Admin (på høyre side av kontrollpanelet) -> Weblog administrasjon -> Weblogbehandling. Klikk på "Opprett en ny weblog" og ring den til Portefølje og gjør kortnavneporteføljen. Legg igjen de resterende alternativene og trykk på send.


Trinn 6: Oppsett en egendefinert feltgruppe

Klikk på Admin -> Weblog administrasjon -> Tilpassede weblogfelt, klikk på "Opprett en ny weblogfeltgruppe" -knapp og ring den til Porteføljegruppe. Vi må tilordne denne gruppen til porteføljens weblogg. Merk at du bør bli bedt om å få en link til stedet for å tilordne gruppen, men hvis ikke, gå bare til Admin -> Weblog administrasjon -> Weblogbehandling og klikk på Rediger grupper for porteføljens weblogg. Tilordne porteføljens weblog til porteføljegruppen.

Tenk på en weblog som en databeholder. Disse containerens skjønnhet (weblogger) er at du kan tilpasse databeholderen til å utnytte ulike felttyper (innboks, tekstområde osv.). Feltgruppen definerer hvilke felt (input box, textarea, etc) som er tilordnet webloggen. Når en weblog er opprettet, må den tildeles en feltgruppe, slik at de riktige felttyper vises. Når du oppretter en oppføring i webloggen, vil feltene som er opprettet i den tilordnede feltgruppen, vises. Dette er en av de fantastiske delene av Expression Engine, ved at du kan lage egendefinerte databeholdere og felttyper, og få den informasjonen enkelt å vise.

Merk: Hvis du ikke liker termen weblog, kan du endre det referansenavnet i kontrollpanelet (noen refererer til disse databeholdere som seksjoner.). Når Expression Engine versjon 2.0 kommer, vil termen weblog ikke lenger bli brukt til å referere til disse databeholdere (kanal vil bli brukt i stedet).


Trinn 7: Opprett to felt i porteføljeplassgruppen:

  1. Feltnavn = image_caption, Feltetikett = Bildetekst, Feltype = Tekstområde, Angi formatering til Ingen, Send inn
  2. Feltnavn = image_file, Feltetikett = Bildefil, Feltype = Fil (dette alternativet vises på grunn av utvidelsen vi installerte), Velg porteføljeopplastingsmappen som vi opprettet, gjør feltet obligatorisk, trykk på send


Trinn 8 - Legg til data i porteføljens weblogg

Klikk på Publiser -> Portefølje. Skjermen skal se ut som følgende bilde. Legg inn noen poster i webloggen. Sjekk porteføljens opplastings katalog for å sikre at bildene blir lagt ut på den katalogen. Etter at noen bilder er lagt ut på bloggen, la oss da lage maler.



Trinn 9: Opprett malgruppen og maler

Klikk på fanen Maler. Klikk på "Create a New Template Group" -knappen (høyre side av skjermen). Kall denne gruppen "main" og merk av i boksen for å gjøre indeksmalen til hjemmesidenes hjemmeside. Klikk nå på indeksmalen fra «hoved» malegruppen og lim inn følgende kode i denne tekstboksen:

        Expression Engine Slideshow   Hallo! 

Klikk oppdatering for å lagre filen. Merk: I dette tilfellet har jeg allerede generert Flash-filen og Flash-koden. Du kan foretrekke andre måter å integrere Flash-kode på, for eksempel å bruke swfobject (http://code.google.com/p/swfobject/).

Nå, i "hoved" malegruppen, opprett en ny mal (midt på skjermen), ring den porteføljen_xml og sett typen til xml (Du kan navngi det uansett, jeg bruker bare _xml for å hjelpe meg videre identifiser filen). Lim inn følgende xml-kode i denne mal:

    exp: weblog: oppføringer weblog = "portefølje"  / Exp: weblogg-: oppføringer  

Du vil legge merke til at taggen for Expression Engine weblog entries er brukt, at den refererer til porteføljens weblog og at den trekker tilbake de egendefinerte feltene vi opprettet (image_file, title, image_caption). Koden "bildetekst" i bildeetiketten er det som feeds inn i SlideShowPros tekstavsnitt. Formatet image_file file_name / image_file er spesifikt for filutvidelsen vi installerte. Ved å bruke denne koden, er det fulde navnet på den opplastede filen tatt. XML-galleriet, albumet, lgpath og tnpath er spesifikke for SlideShowPro. Oppdater filen for å lagre den. Gjør nå filen og vis kilden. Når du ser kildekoden til xml-filen, skal dataene du lagde til webloggen, vises som:


Hvis dataene ikke vises, vennligst gå gjennom trinnene igjen, og kontroller at du har dataene i riktig weblog, det riktige weblogens korte navn er referert, at alle tagger er stavet riktig og at alle tagger er ordentlig lukket. Kopier adressen til denne gjengitte xml-filen, slik vi legger til den i SlideShowPro-komponenten.


Trinn 10: Rediger SlideShowPro Flash-komponenten

SlideShowPro er ikke ledig, og selv om det kan slå noen brukere av, er det flere muligheter for å integrere andre løsninger som er gratis. Når du forstår hvordan oppføringer og weblogger fungerer, er det bare et spørsmål om å koble andre verktøy til oppføringene og fange opp dataene. Mer informasjon om SlideShowPro finner du her. Når du har installert SlideShowPro-utvidelsene (se nettstedets dokumentasjon for mer info), åpne komponenten og bla til bunnen for å redigere XML-innstillingene. Lim inn adressen du nettopp kopierte fra den gjengitte xml-filen til XML-filbanelinjen. La XML-filtype være standard. Tilpass de andre innstillingene etter eget ønske. Lagre og publiser denne filen for å generere swf.

På dette tidspunktet bør den gjengitte swf-filen vise bildene. Hvis ikke, bekreft at xml-filen din har data i den. Vær også oppmerksom på at du bør bruke jpg-filer, da png-filer ikke ser ut til å bli støttet. Plasser den gjengitte swf-filen i rotkatalogen på nettstedet, for å matche det opp der hvor flashfilen blir referert i indeksmalskoden.

Til slutt, hvis du vil legge til musikk i lysbildeserien, legger du bare til følgende i xml-malen (Pass på at du har lydfilen i riktig katalog. I dette tilfellet opprettet jeg en lydkatalog, i roten ovenfor kontrollkatalogen og sett lydfilen der.):

  

Ekstra lenker

Det er noen andre eksempler (som jeg har kommet over minst) som gir ytterligere informasjon om bruk av SlideShowPro med Expression Engine. For videre lesing kan du finne disse linkene nyttig:

  • Bruke EEs gallerimodul med SlideShowPro
  • Bruke Flickr med EE og SlideShowPro
  • Et annet eksempel på å integrere SlideShowPro med Expression Engine
  • Galleri vs Weblog-sammenligning