Voor het laatste deel van deze serie gaan we je door de laatste fasen van het bouwen van een fotografiewebsite vanaf het begin leiden met behulp van het Drupal contentmanagementsysteem (CMS).
Websites die zijn gebouwd met een CMS zijn geavanceerder dan sites die bestaan uit vaste of ‘statische’ pagina's tekst, en zijn essentieel voor het weergeven van afbeeldingen.
Als een open-source CMS voor algemene doeleinden heeft Drupal een grote gemeenschap van bijdragende ontwikkelaars en is het populair bij overheden, non-profitorganisaties en onderwijsinstellingen.
Het bouwen van een website in Drupal is meer betrokken dan het doen in andere CMS'en zoals WordPress, dus het zal computergeletterde mensen aanspreken die het idee leuk vinden om ‘achter de schermen’ van een website te gaan.
De beloning is een op maat gemaakte en veilige website die is gebouwd op een in hoge mate aanpasbaar platform waar extra functionaliteit wordt geboden door het installeren van modules (extra functies) en thema's (die de look en feel bepalen).
Om op dit punt te komen, zijn we begonnen met het bouwen van onze site in een lokale omgeving, met behulp van de lokale host Acquia Dev Desktop.
Begin met het downloaden van Acquia Dev Desktop en voer het installatieprogramma uit, start vervolgens de software en selecteer Start From Scratch.
Gebruik de voorgestelde standaard om de codebasebestanden op uw systeem te lokaliseren, voer de naam van uw site in en accepteer de standaardprompts voor de versie van PHP en de databasenaam. Kies v8.9.1 onder Installeer een Drupal-distributie, voer alle vereiste informatie in en Drupal wordt geïnstalleerd.
Installeer vervolgens de Media Gallery-module en het Showcase Lite-thema. Begin dan met het maken van uw galerijen …
Wat je nodig hebt om een fotowebsite in Drupal te bouwen
- Computer
- internet toegang
- Afbeeldingen klaar om te uploaden
- Ontwikkelingstoepassing (we gebruiken Acquia Dev Desktop)
- Tijd: 1 week (build)
De drie fasen van het ontwikkelen van een Drupal-site
1. Begin met het instellen van uw domeinnaam
In tegenstelling tot wordpress.com biedt Drupal geen hostingoptie, dus u moet deze regelingen zelf treffen.
Voordat u begint, moet u ook een domeinnaam voor uw site verkrijgen - bezoek Domain.com, Bluehost of www.123-reg.co.uk, of zoek online naar een leverancier.
Voer uw gewenste sitenaam in en u krijgt een lijst met beschikbare extensies (.com, .co.uk, enz.) En registratiekosten.
2. Ontwikkel uw Drupal-site op uw eigen computer
Je zou Drupal op een webhostingsite kunnen installeren en daar kunnen bouwen, maar het ontwikkelen van je site op een lokale host (je eigen computer) maakt het veel gemakkelijker. U kunt de site in uw eigen tempo bouwen, eventuele problemen verhelpen en het uiterlijk en het gevoel gaandeweg verfijnen.
3. Implementeer de voltooide site bij uw hostingprovider
Als uw site klaar is, kunt u deze implementeren bij uw hostingprovider. Het overbrengen van de bestanden naar de hostsite en het configureren van alle instellingen kan tot een dag duren, maar dan is je fotowebsite klaar voor de grote onthulling.
Bouw in 10 stappen een Drupal fotowebsite
Met behulp van de lokale omgeving van Acquia Dev Desktop blijven we onze
site voor het testen en vervolgens inzetten op een website-hostingplatform …
01 Maak menukoppelingen voor de galerijen
Nadat we enkele galerijen hebben gemaakt, hebben we ze aan de hoofdnavigatie gekoppeld, zodat sitebezoekers er gemakkelijk doorheen kunnen bladeren. In het Admin-gebied klikten we op Structuur en vervolgens op Hoofdnavigatie en menu Bewerken.
We hebben een titel voor de menukoppeling ingevoerd en vervolgens ‘/ media_gallery / 1’ in het veld Link getypt, waarbij we deze stap herhaalden voor de andere galerijen, waarbij we ‘/ 1’ verving door ‘/ 2’, ‘/ 3’, enzovoort.
02 Verbetering van de beeldweergave
Onze galerijen zouden gebaat zijn bij een ‘lightbox’ om de foto's weer te geven. Als u een afbeelding selecteert, wordt een pop-up-overlay geopend, waar we doorheen kunnen klikken om alle afbeeldingen in de galerij te bekijken.
Colorbox is een populaire lightbox-plug-in die met verschillende versies van Drupal heeft gewerkt, dus het is goed ingeburgerd en wordt actief onderhouden.
U kunt de pagina hier vinden - neem een kijkje in de beschrijving van de plug-in om te zien wat deze kan doen.
03 Download de Colorbox-module
U zult aan de beschrijving opmerken dat Colorbox twee afzonderlijke elementen heeft - een module en een plug-in - en dat de plug-in een afzonderlijke download is.
Laten we beginnen met de module. Scrol naar de onderkant van de pagina en zoek de Drupal 8-versie (het is de bovenste van de twee groene vakken), muis over de tar.gz-link, klik met de rechtermuisknop en selecteer Linkadres kopiëren.
Klik in het beheerdersgedeelte van de site op het tabblad Uitbreiden, klik op Nieuwe module installeren, plak de URL en klik op Installeren.
04 Download de Colorbox-plug-in
Keer terug naar de downloadpagina van Colorbox; klik direct onder Afhankelijkheden op de koppeling Colorbox Plugin 1.x. Hiermee wordt een gecomprimeerd archiefbestand op de door uw computer aangewezen locatie voor downloads opgeslagen.
Nu moet u een map op uw systeem maken voor de Colorbox-plug-inbestanden. Maak volgens de instructies op de downloadpagina van Colorbox een map aan zodat het pad naar de bestanden (sitenaam) / bibliotheken / colorbox / wordt, en pak vervolgens het archief op die locatie uit.
05 Plaats de ongecomprimeerde plug-inbestanden
Als het archief niet is gecomprimeerd, zou je 14 bestanden in de directory moeten kunnen zien, inclusief het allerbelangrijkste jquery.colorbox-min.js JavaScript-bestand.
Als uw map iets anders weergeeft, zorg er dan voor dat u op de juiste plaats zoekt - de map (sitename) / modules / colorbox heeft een syntaxis die erg op elkaar lijkt. (Deze map moet 22 bestanden bevatten, inclusief acht submappen - zie kader hierboven.)
06 Schakel de Colorbox-module in
Nu we de Colorbox-module al hebben geïnstalleerd, moeten we deze nu inschakelen. (Dit proces is niet automatisch.) Ga terug naar het beheerdersgedeelte van uw site en klik op het tabblad Verlengen.
Scroll twee derde van de pagina naar beneden; Plaats onder het gedeelte Media een vinkje links van Colorbox. Klik onderaan de pagina op Installeren.
Ga naar Rapporten en voer een statusrapport uit: als Colorbox niet wordt vermeld in Fouten gevonden, is alles in orde.
07 Bekijk het effect van onze nieuwe lightbox
Laten we nu eens kijken welk verschil het hebben van een lightbox voor afbeeldingen heeft gemaakt. Klik op Terug naar site in de linkerbovenhoek van het scherm en roep een van de galerijen op die je aan de hoofdnavigatie hebt toegevoegd.
Klik op een afbeelding en deze wordt geopend in een pop-up-overlay. Met een paar knoppen in de linkerbenedenhoek kun je door de afbeeldingen in de galerij bladeren, terwijl een X in de rechterbenedenhoek de pop-up sluit - alles werkt prima.
08 Bekijk de informatie over het bijschrift van de afbeelding
Een ander kenmerk van Colorbox is de mogelijkheid om een bijschrift voor de afbeeldingen weer te geven, dat opduikt vanaf de onderkant van de afbeelding die wordt bekeken wanneer u er met de muis overheen beweegt.
Momenteel gebruikt het de alternatieve tekst (een korte beschrijving die wordt gebruikt door schermlezers of wanneer een afbeelding niet wordt geladen) die we voor elke foto invoeren tijdens het uploaden van de afbeeldingsbestanden. Om bijschriften te wijzigen, opent u het afbeeldingsbestand in het menu Inhoud / Bestanden.
09 Voeg enkele andere belangrijke pagina's toe aan de site
Nu de afbeelding er beter uitziet, kunnen we beginnen met het uitbouwen van de site en enkele andere belangrijke elementen toevoegen. Laten we eerst een pagina Over maken om de fotografische services die we aanbieden te schetsen.
Klik op het tabblad Inhoud, klik op Inhoud toevoegen en selecteer Basispagina. Voer de gewenste tekst in plus een inline afbeelding die is bijgesneden tot een geschikt formaat. (We gebruikten 200 x 200 pixels.) Andere pagina's om te bouwen omvatten de welkomstpagina.
10 Beoordeel de voortgang en voeg andere elementen toe
Dus nu hebben we een volledig functionerende fotografiewebsite, georganiseerd in een reeks galerijen die de afbeeldingen weergeven in een pop-up-overlay met bijschriftinformatie.
Het is een goed begin, maar dit is nog maar het begin. Andere site-elementen die u zou kunnen toevoegen, zijn onder meer reguliere blogposts, om een gesprek te beginnen met bezoekers van uw site - en dit is een andere functie die Drupal direct ondersteunt.
Laatste stappen: zet uw lokale site op het net
U heeft dus uw build voltooid en enkele ruwe kantjes gladgestreken door deze volledig te testen. Nu is het tijd om uw site op internet te zetten en deze aan een wereldwijd publiek bekend te maken. Hier is hoe het is gedaan …
1. Zoek een hostingprovider
Zodra uw site volledig is gebouwd en getest en eventuele bugs of haken en ogen zijn weggewerkt, is deze klaar om te worden vrijgegeven voor een wereldwijd publiek.
De eerste stap is het vinden van een hostingprovider. Zorg ervoor dat uw hostingprovider PHP en MySQL kan ondersteunen, beide vereist door Drupal.
2. Download een FTP-client naar uw computer
File Transfer Protocol (FTP) is de manier waarop u de bestanden van uw lokale site uploadt naar uw webhostingprovider. Een van de meest populaire FTP-clients is FileZilla, die zowel op Windows als macOS werkt. Je kunt FileZilla hier vinden.
3. Upload de bestanden via het Configuratiescherm
Uw provider geeft u toegang tot een configuratiescherm, voor alles-in-één-sitebeheer - cPanel is een populaire optie. Volg de instructies van uw provider voor implementatie, maar houd er rekening mee dat de bestandsoverdracht en het configureren van instellingen een hele dag kan duren.
is 's werelds favoriete fotografiemagazine. Elk nummer staat vol met het laatste nieuws, recensies, tutorials, deskundig koopadvies, tips en inspirerende afbeeldingen. Bovendien wordt elk nummer geleverd met een selectie van bonusgeschenken die interessant zijn voor fotografen van alle niveaus.Bekijk Deal
Beste website-hostingsites voor fotografen: zet uw portfolio online
Beste gratis cloudopslagopties voor fotografen: platforms en apps
Beste online fotografiecursussen - van beginnersgidsen tot masterclasses
Beste websitebouwers voor fotografen
Beste wachtwoordmanagers
Beste studentenlaptop
Beste fotobewerkingssoftware