So erstellen Sie eine Foto-Website in Drupal, Teil 3

Inhaltsverzeichnis:

Anonim

Im letzten Teil dieser Serie werden wir Sie durch die letzten Phasen des Aufbaus einer Foto-Website mit dem Drupal Content Management System (CMS) von Grund auf führen.

Mit einem CMS erstellte Websites sind komplexer als Websites, die aus festen oder „statischen“ Textseiten bestehen, und für die Anzeige von Bildern unerlässlich.

Als Open-Source-Allzweck-CMS verfügt Drupal über eine große Community von beitragenden Entwicklern und ist bei Regierungen, gemeinnützigen Unternehmen und Bildungseinrichtungen beliebt.

Das Erstellen einer Website in Drupal ist aufwändiger als das Erstellen in anderen CMS wie WordPress. Daher spricht es Computer-Experten an, die die Idee mögen, hinter den Vorhang einer Website zu treten.

Die Belohnung wird eine maßgeschneiderte und sichere Website sein, die auf einer hochgradig anpassbaren Plattform basiert, auf der zusätzliche Funktionen durch die Installation von Modulen (zusätzliche Funktionen) und Themen (die das Erscheinungsbild bestimmen) bereitgestellt werden.

Um an diesen Punkt zu gelangen, haben wir den Aufbau unserer Site in einer lokalen Umgebung unter Verwendung des lokalen Acquia Dev Desktop-Hosts gestartet.

Laden Sie zunächst Acquia Dev Desktop herunter und führen Sie das Installationsprogramm aus. Starten Sie dann die Software und wählen Sie Von Grund auf neu starten.

Verwenden Sie die vorgeschlagene Standardeinstellung zum Suchen der Codebasisdateien auf Ihrem System, geben Sie den Namen Ihrer Site ein und akzeptieren Sie die Standardansagen für die Version von PHP und den Datenbanknamen. Wählen Sie v8.9.1 unter Installieren einer Drupal-Distribution, geben Sie die erforderlichen Informationen ein und Drupal wird installiert.

Installieren Sie als Nächstes das Media Gallery-Modul und das Showcase Lite-Design. Dann fangen Sie an, Ihre Galerien zu erstellen …

Was Sie benötigen, um eine Foto-Website in Drupal zu erstellen

  • Computer
  • Internet Zugang
  • Bilder zum Hochladen bereit
  • Entwicklungsanwendung (wir verwenden Acquia Dev Desktop)
  • Zeit: 1 Woche (Build)

Die drei Phasen der Entwicklung einer Drupal-Site

1. Richten Sie zunächst Ihren Domainnamen ein

Im Gegensatz zu wordpress.com bietet Drupal keine Hosting-Option an. Sie müssen diese Vorkehrungen daher selbst treffen.

Bevor Sie beginnen, müssen Sie auch einen Domainnamen für Ihre Website erwerben - besuchen Sie Domain.com, Bluehost oder www.123-reg.co.uk oder suchen Sie online nach einem Lieferanten.

Geben Sie Ihren gewünschten Site-Namen ein und Sie erhalten eine Liste der verfügbaren Erweiterungen (.com, .co.uk usw.) und Registrierungsgebühren.

2. Entwickeln Sie Ihre Drupal-Site auf Ihrem eigenen Computer

Sie könnten Drupal auf einer Webhosting-Site installieren und dort erstellen, aber die Entwicklung Ihrer Site auf einem lokalen Host (Ihrem eigenen Computer) erleichtert die Arbeit erheblich. Sie können die Site in Ihrem eigenen Tempo erstellen, auftretende Fehler beheben und das Erscheinungsbild im Laufe der Zeit verfeinern.

3. Stellen Sie die fertige Site bei Ihrem Hosting-Anbieter bereit

Wenn Ihre Site fertig ist, können Sie sie bei Ihrem Hosting-Anbieter bereitstellen. Das Übertragen der Dateien auf die Host-Site und das Konfigurieren aller Einstellungen kann bis zu einem Tag dauern, aber dann ist Ihre Foto-Website bereit für die große Enthüllung.

Erstellen Sie in 10 Schritten eine Drupal-Foto-Website

In der lokalen Umgebung von Acquia Dev Desktop entwickeln wir unsere weiter
Website vor dem Testen und der anschließenden Bereitstellung auf einer Website-Hosting-Plattform…

01 Erstellen Sie Menü-Links für die Galerien

Nachdem wir einige Galerien erstellt haben, haben wir sie mit der Hauptnavigation verknüpft, damit Website-Besucher sie problemlos durchsuchen können. Im Admin-Bereich haben wir auf Struktur und dann auf Hauptnavigation und Bearbeitungsmenü geklickt.

Wir haben einen Titel für den Menü-Link eingegeben, dann "/ media_gallery / 1" in das Feld "Link" eingegeben, diesen Schritt für die anderen Galerien wiederholt und "/ 1" durch "/ 2", "/ 3" usw. ersetzt.

02 Verbessern der Bildanzeigen

Unsere Galerien würden von einem „Leuchtkasten“ zur Anzeige der Fotos profitieren. Wenn Sie ein Bild auswählen, wird ein Popup-Overlay geöffnet, durch das wir alle in der Galerie angezeigten Bilder anzeigen können.

Colorbox ist ein beliebtes Lightbox-Plug-In, das mit mehreren Versionen von Drupal funktioniert hat. Es ist also gut etabliert und wird aktiv gewartet.

Die Seite finden Sie hier - werfen Sie einen Blick auf die Beschreibung des Plug-Ins, um zu sehen, was es kann.

03 Laden Sie das Colorbox-Modul herunter

Aus der Beschreibung geht hervor, dass Colorbox zwei diskrete Elemente enthält - ein Modul und ein Plug-In - und das Plug-In ist ein separater Download.

Beginnen wir mit dem Modul. Scrollen Sie zum Ende der Seite und suchen Sie die Drupal 8-Version (es ist das obere der beiden grünen Felder), bewegen Sie den Mauszeiger über den Link tar.gz, klicken Sie mit der rechten Maustaste und wählen Sie Linkadresse kopieren.

Klicken Sie im Admin-Bereich der Site auf die Registerkarte "Erweitern", klicken Sie auf "Neues Modul installieren", fügen Sie die URL ein und klicken Sie auf "Installieren".

04 Laden Sie das Colorbox-Plug-In herunter

Kehren Sie zur Colorbox-Downloadseite zurück. Klicken Sie unmittelbar unter Abhängigkeiten auf den Link Colorbox Plugin 1.x. Dadurch wird eine komprimierte Archivdatei zum Herunterladen an dem von Ihrem Computer angegebenen Speicherort gespeichert.

Jetzt müssen Sie auf Ihrem System ein Verzeichnis für die Colorbox-Plug-In-Dateien erstellen. Erstellen Sie gemäß den Anweisungen auf der Colorbox-Downloadseite ein Verzeichnis, sodass der Pfad zu den Dateien (Site-Name) / library / colorbox / lautet, und entpacken Sie das Archiv an diesem Speicherort.

05 Platzieren Sie die unkomprimierten Plug-In-Dateien

Wenn das Archiv nicht komprimiert ist, sollten Sie 14 Dateien im Verzeichnis sehen können, einschließlich der wichtigen JavaScript-Datei jquery.colorbox-min.js.

Wenn in Ihrem Ordner etwas anderes angezeigt wird, stellen Sie sicher, dass Sie an der richtigen Stelle suchen. Der Ordner (Site-Name) / modules / colorbox verfügt über eine Syntax, die sehr ähnlich ist. (Dieser Ordner sollte 22 Dateien enthalten, einschließlich acht Unterordner - siehe Einschub oben.)

06 Aktivieren Sie das Colorbox-Modul

Nachdem wir das Colorbox-Modul bereits installiert haben, müssen wir es jetzt aktivieren. (Dieser Vorgang erfolgt nicht automatisch.) Kehren Sie zum Administrationsbereich Ihrer Site zurück und klicken Sie auf die Registerkarte "Erweitern".

Scrollen Sie zwei Drittel der Seite nach unten. Setzen Sie im Bereich Medien ein Häkchen links neben Colorbox. Klicken Sie unten auf der Seite auf Installieren.

Gehen Sie zu Berichte und führen Sie einen Statusbericht aus: Wenn Colorbox nicht unter Gefundene Fehler aufgeführt ist, ist alles in Ordnung.

07 Testen Sie die Wirkung unseres neuen Leuchtkastens

Nun wollen wir sehen, welchen Unterschied ein Bild-Leuchtkasten gemacht hat. Klicken Sie oben links auf dem Bildschirm auf Zurück zur Site und rufen Sie eine der Galerien auf, die Sie zur Hauptnavigation hinzugefügt haben.

Klicken Sie auf ein Bild und es wird in einem Popup-Overlay geöffnet. Mit zwei Schaltflächen in der unteren linken Ecke können Sie sich durch die Bilder in der Galerie bewegen, während ein X in der unteren rechten Ecke das Popup schließt - alles funktioniert einwandfrei.

08 Überprüfen Sie die Bildunterschrifteninformationen

Eine weitere Funktion von Colorbox ist die Möglichkeit, eine Beschriftung für die Bilder anzuzeigen, die am unteren Rand des angezeigten Bilds angezeigt wird, wenn Sie mit der Maus darüber fahren.

Derzeit wird der alternative Text (eine kurze Beschreibung, die von Bildschirmleseprogrammen verwendet wird oder wenn ein Bild nicht geladen wird) verwendet, den wir beim Hochladen der Bilddateien für jedes Foto eingeben. Öffnen Sie zum Ändern von Untertiteln die Bilddatei im Menü Inhalt / Dateien.

09 Fügen Sie der Site einige andere Schlüsselseiten hinzu

Da die Bildanzeige jetzt besser aussieht, können wir mit dem Aufbau der Site und dem Hinzufügen einiger anderer Schlüsselelemente beginnen. Erstellen wir zunächst eine Info-Seite, auf der die von uns angebotenen Fotodienste beschrieben werden.

Klicken Sie auf die Registerkarte Inhalt, klicken Sie auf Inhalt hinzufügen und wählen Sie Basisseite. Geben Sie den gewünschten Text sowie ein Inline-Bild ein, das auf eine geeignete Größe zugeschnitten ist. (Wir haben 200 x 200 Pixel verwendet.) Weitere zu erstellende Seiten sind die Begrüßungsseite.

10 Bewerten Sie den Fortschritt und fügen Sie weitere Elemente hinzu

Jetzt haben wir eine voll funktionsfähige Fotografie-Website, die in eine Reihe von Galerien unterteilt ist, die die Bilder in einem Popup-Overlay mit Untertitelinformationen anzeigen.

Es ist ein guter Anfang, aber dies ist nur der Anfang. Andere Site-Elemente, die Sie hinzufügen könnten, sind regelmäßige Blog-Posts, um eine Konversation mit Besuchern Ihrer Site zu eröffnen - und dies ist eine weitere Funktion, die Drupal sofort unterstützt.

Letzte Schritte: Stellen Sie Ihre lokale Site im Netz bereit

Sie haben Ihren Build abgeschlossen und einige Ecken und Kanten durch vollständiges Testen ausgebügelt. Jetzt ist es an der Zeit, Ihre Website im Internet bereitzustellen und einem globalen Publikum zugänglich zu machen. So geht's …

1. Suchen Sie einen Hosting-Dienstleister

Sobald Ihre Website vollständig erstellt und getestet wurde und alle Fehler oder Mängel behoben wurden, kann sie einem globalen Publikum zugänglich gemacht werden.

Der erste Schritt besteht darin, einen Hosting-Anbieter zu finden. Stellen Sie sicher, dass Ihr Hosting-Anbieter PHP und MySQL unterstützt, die beide von Drupal benötigt werden.

2. Laden Sie einen FTP-Client auf Ihren Computer herunter

Mit dem File Transfer Protocol (FTP) laden Sie die Dateien Ihrer lokalen Site zu Ihrem Webhosting-Anbieter hoch. Einer der beliebtesten FTP-Clients ist FileZilla, das sowohl unter Windows als auch unter MacOS funktioniert. Sie finden FileZilla hier.

3. Laden Sie die Dateien über die Systemsteuerung hoch

Ihr Provider bietet Ihnen Zugriff auf ein Control Panel für die umfassende Site-Verwaltung an einem Ort - cPanel ist eine beliebte Option. Befolgen Sie die Anweisungen Ihres Providers für die Bereitstellung. Beachten Sie jedoch, dass die Konfiguration der Dateiübertragung und der Einstellungen bis zu einem ganzen Tag dauern kann.

ist das weltweit beliebteste Fotomagazin. Jede Ausgabe enthält die neuesten Nachrichten, Rezensionen, Tutorials, Kaufempfehlungen von Experten, Tipps und inspirierende Bilder. Außerdem enthält jede Ausgabe eine Auswahl an Bonusgeschenken, die für Fotografen aller Fähigkeiten von Interesse sind. View Deal

Beste Website-Hosting-Sites für Fotografen: Holen Sie sich Ihr Portfolio online
Beste kostenlose Cloud-Speicheroptionen für Fotografen: Plattformen und Apps
Beste Online-Fotokurse - vom Anfängerführer bis zum Meisterkurs
Beste Website-Builder für Fotografen
Beste Passwort-Manager
Bester Studenten-Laptop
Beste Fotobearbeitungssoftware