Maak een diavoorstelling met SlideShowPro en Expression Engine

Er zijn veel opties beschikbaar voor het online maken en weergeven van diavoorstellingen (zoals hier en hier bijvoorbeeld). Voor deze zelfstudie heb ik besloten om SlideShowPro te integreren met Expression Engine.


Screencast Preview



Stap 1: Maak een database

Om Expression Engine te kunnen installeren en gebruiken, moet u eerst een database maken. Voor deze zelfstudie heb ik een database gemaakt met de naam eeTuts.



Stap 2: Expression Engine installeren

Download de installatiebestanden van expressionengine.com. Afhankelijk van uw behoeften, moet u mogelijk een licentie betalen. Nadat u de installatiebestanden in uw webdirectory hebt uitgepakt, ziet de structuur er ongeveer zo uit:


Voordat u doorgaat met de installatie, is het een goede gewoonte om de systeemdirectory naar een andere naam te hernoemen. De systeemmap biedt toegang tot het configuratiescherm en het wijzigen van de naam kan helpen om deze map voor algemene gebruikers te verbergen. Ik ben doorgegaan en heb de naam veranderd in controle.

Wijs naar het install.php-bestand met uw webbrowser om met de installatie te beginnen. In dit geval gebruiken we versie 1.6.7. Raadpleeg de Expression Engine-documentatie voor meer informatie over het installatieproces: http://expressionengine.com/docs/installation/installation.html

Uit mijn ervaring komen installatiefouten het vaakst voor als gevolg van het niet beschikken over de juiste map- / bestandsrechten en / of geen toegang tot de database.

Nadat Expression Engine is geïnstalleerd, ziet u verschillende tabellen in de database. Als u de tabelvoorvoegsel niet hebt gewijzigd tijdens het installatieproces, moeten alle tabellen beginnen met "exp_". Na de installatie worden 68 tabellen gemaakt.


Na een succesvolle installatie zijn het configuratiescherm en de standaardsite beschikbaar.


Meld u aan bij het configuratiescherm met de inloggegevens in de installatie en het beheerdersscherm zou moeten verschijnen.


Volledige screencast



Stap 3: Download een extensie voor een bestandsuploader

Hoewel Expression Engine standaard wordt geleverd met een uploader voor bestanden, installeer ik hier een populaire bestandsextensie. Ik doe dit voornamelijk om te demonstreren hoe extensies te installeren, maar in de tweede plaats biedt deze extensie je extra opties die nuttig voor je kunnen zijn. Raadpleeg de documentatie van deze extensie voor meer informatie. Nadat het extensiebestand is gedownload en uitgepakt, scrolt u naar de besturingsdirectory en plaatst u de ext.mh_file_ext.php in de map extensies, de taal lang.mh_file_ext.php in de directory taal-> engels en de map icons in de map images ( boven de controlemap). Schakel vervolgens deze extensie in door naar Admin -> Hulpprogramma's -> Extensiebeheer te gaan, klik op Extensies inschakelen en schakel vervolgens de specifieke extensie in, in dit geval, de extensie van de bestandsuploader..
Laten we nu een aangepaste map maken naar waar de bestanden naartoe worden geüpload.


Stap 4: Stel een bestandsuploaddirectory in

Maak een nieuwe map binnen de afbeeldingenmap en noem die Portfolio. Zorg ervoor dat u deze map Schrijven toestemmingen geeft. Klik nu op Beheer -> Weblogbeheer -> Voorkeuren voor uploaden van bestanden. Maak een nieuwe bestandsuploadbestemming met de volgende inloggegevens:

Serverpad om directory te uploaden: / path / to / images / Portfolio /
URL van uploaddirectory: http://example.com/images/Portfolio/
Zorg ervoor dat alleen afbeeldingen zijn geselecteerd. Laat al het andere met rust en leg in.



Stap 5: stel een weblog in

Klik in het configuratiescherm op het tabblad Beheerder (aan de rechterkant van het configuratiescherm) -> Weblogbeheer -> Weblogbeheer. Klik op 'Een nieuwe weblog maken' en noem het Portfolio en maak de korte naamportfolio. Laat de resterende opties staan ​​en druk op Verzenden.


Stap 6: Stel een aangepaste veldgroep in

Klik op Beheer -> Weblogbeheer -> Aangepaste weblogvelden, klik op de knop "Een nieuwe weblogveldgroep maken" en noem het Portfolio Groep. We moeten deze groep toewijzen aan de Portfolio-weblog. Opmerking: u moet een link naar de locatie krijgen om de groep toe te wijzen, maar als dat niet het geval is, gaat u naar Beheer -> Weblogbeheer -> Weblogbeheer en klikt u op Groepen bewerken voor de Portfolio-weblog. Wijs de Portfolio-weblog toe aan de Portfolio Group.

Zie een weblog als een gegevenscontainer. Het mooie van deze containers (weblogs) is dat u de datacontainer kunt aanpassen om verschillende veldtypen te gebruiken (invoervak, tekstgebied, enz.). De veldgroep definieert welke velden (invoervak, tekstveld, enz.) Worden toegewezen aan de weblog. Zodra een weblog is gemaakt, moet deze vervolgens worden toegewezen aan een veldgroep, zodat de juiste veldtypen worden weergegeven. Nadat u een item in de weblog hebt gemaakt, verschijnen de velden die in de toegewezen veldgroep zijn gemaakt. Dit is een van de geweldige onderdelen van Expression Engine, waarin u aangepaste gegevenscontainers en veldtypen kunt maken en die informatie gemakkelijk kunt weergeven.

Opmerking: als u de term weblog niet leuk vindt, kunt u die referentienaam binnen het configuratiescherm wijzigen (sommige mensen verwijzen naar deze gegevenscontainers als secties.). Zodra Expression Engine versie 2.0 arriveert, wordt de term weblog niet langer gebruikt om naar deze gegevenscontainers te verwijzen (in plaats daarvan wordt kanaal gebruikt).


Stap 7: Maak twee velden binnen de Portfolio Field Group:

  1. Veldnaam = image_caption, veldlabel = bijschrift van afbeelding, veldtype = tekstveld, opmaak instellen op geen, verzenden
  2. Veldnaam = afbeeldingsbestand, veldlabel = afbeeldingsbestand, veldtype = bestand (deze optie wordt weergegeven vanwege de extensie die we hebben geïnstalleerd), kies de map voor het uploaden van de portfolio die we hebben gemaakt, vul het veld in, klik op verzenden


Stap 8 - Voeg gegevens toe aan de Portfolio Weblog

Klik op Publiceren -> Portfolio. Het scherm zou op de volgende afbeelding moeten lijken. Plaats een paar records op de weblog. Controleer de map Portfolio uploaden om te zorgen dat de afbeeldingen in die map worden gepost. Nadat een paar afbeeldingen op het weblog zijn geplaatst, kunnen we de sjablonen maken.



Stap 9: Maak de sjabloongroep en sjablonen

Klik op het tabblad Sjablonen. Klik op de knop "Een nieuwe sjabloongroep maken" (rechterkant van het scherm). Noem deze groep "hoofd" en vink het vakje aan om de indexsjabloon de startpagina van de site te maken. Klik nu op de indexsjabloon vanuit de "hoofd" -sjabloongroep en plak de volgende code in dit tekstvak:

        Expression Engine Slideshow   Hallo! 

Klik op bijwerken om het bestand op te slaan. Opmerking: In dit geval heb ik het Flash-bestand en de Flash-code al gegenereerd. U geeft misschien de voorkeur aan andere manieren om Flash-code te integreren, zoals swfobject (http://code.google.com/p/swfobject/).

Maak nu, binnen de "hoofd" -sjabloongroep, een nieuwe sjabloon (middelste gedeelte van het scherm), noem het portfolio_xml en stel het type in op xml (je kunt het een naam geven die je maar wilt, ik gebruik gewoon _xml om me verder te helpen identificeer het bestand). Plak de volgende xml-code in deze sjabloon:

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

U zult zien dat de tag tag van Expression Engine weblog wordt gebruikt, dat het verwijst naar de weblog van de portfolio en dat het de aangepaste velden die we hebben gemaakt (image_file, title, image_caption) terugtrekt. De tag "bijschrift" in de afbeeldingstag is wat wordt ingevoerd in de ondertitelsectie van SlideShowPro. De indeling image_file file_name / image_file is specifiek voor de bestandsextensie die we hebben geïnstalleerd. Met behulp van deze code wordt de volledige naam van het geüploade bestand vastgelegd. De xml-galerij, album, lgpath en tnpath zijn specifiek voor SlideShowPro. Werk het bestand bij om het op te slaan. Maak nu het bestand en bekijk de bron. Bij het bekijken van de broncode van het xml-bestand zouden de gegevens moeten verschijnen die u aan de weblog hebt toegevoegd, vergelijkbaar met deze:


Als de gegevens niet worden weergegeven, bekijkt u de stappen opnieuw en zorgt u ervoor dat u de gegevens in het juiste weblog vermeldt, naar de juiste korte naam van het weblog verwijst, dat alle tags correct zijn gespeld en dat alle tags correct zijn gesloten. Kopieer het adres voor dit gerenderde xml-bestand, omdat we dat aan het onderdeel SlideShowPro zullen toevoegen.


Stap 10: bewerk het Flash-onderdeel van de SlideShowPro

SlideShowPro is niet gratis en hoewel dat sommige gebruikers kan uitschakelen, zijn er verschillende mogelijkheden om andere gratis oplossingen te integreren; als je eenmaal begrijpt hoe ingangen en weblogs werken, is het alleen een kwestie van andere tools koppelen aan de ingangen en die gegevens vastleggen. Meer informatie over SlideShowPro is hier te vinden. Nadat u de SlideShowPro-uitbreidingen hebt geïnstalleerd (raadpleeg de documentatie bij de site voor meer informatie), opent u de component en scrolt u naar de onderkant om de XML-instellingen te bewerken. Plak in het adres dat u zojuist hebt gekopieerd van het gerenderde xml-bestand naar de regel XML-bestandspad. Laat het XML-bestandstype op Standaard staan. Pas de andere instellingen naar wens aan. Bewaar en publiceer dit bestand om de swf te genereren.

Op dit punt zou het gerenderde swf-bestand de afbeeldingen moeten weergeven. Als dit niet het geval is, controleert u of uw XML-bestand gegevens bevat. Merk ook op dat je jpg-bestanden moet gebruiken, omdat png-bestanden niet worden ondersteund. Plaats het gerenderde swf-bestand in de hoofdmap van de site, zodat het overeenkomt met waar naar het flash-bestand wordt verwezen in de indexsjablooncode.

Als u tenslotte muziek aan de diavoorstelling wilt toevoegen, voegt u eenvoudig het volgende toe aan de xml-sjabloon (zorg ervoor dat u het geluidsbestand in de juiste map hebt staan. In dit geval heb ik een geluidsdirectory gemaakt in de hoofdmap hierboven de besturingsdirectory en plaats daar het geluidsbestand.):

  

Aanvullende links

Er zijn een paar andere voorbeelden (die ik tenminste tegenkwam) die aanvullende informatie geven over het gebruik van SlideShowPro with Expression Engine. Voor verder lezen, vindt u deze links misschien nuttig:

  • De galeriemodule van EE gebruiken met SlideShowPro
  • Flickr gebruiken met EE en SlideShowPro
  • Een ander voorbeeld van het integreren van SlideShowPro met Expression Engine
  • Galerij versus Weblog-vergelijking