Kategorien
Allgemein Content Management Systeme Datenbanken Infrastruktur Shared Hosting Tools Wunschthema

Dateien und Datenbanken

Auf den Artikel Datenrettung – komfortabel, sicher und kostenlos! in der letzten Woche gab es viele positive Kommentare. Positive Kommentare freuen uns, zeigen sie doch, dass wir auf dem richtigen Weg sind. Interessant als Feedback sind aber auch die eher negativen Kommentare. Schliesslich erfahren wir auf diese Art und Weise, woran wir vielleicht gar nicht gedacht hat. Hier ein Beispiel von Fabian:

Ein vorbildlicher Service! Habe ich das aber richtig gelesen. Ich verliere damit „die schnelle Sicherung“ vor einem Update und kann das auch nicht mehr automatisiert (bequem) im cpanel machen? Und die super mega coole Clone-Möglichkeit einer WP Umgebung im Installatron geht dann auch nicht mehr? Für mich persönlich wäre das ein Rückschritt im Workflow.
Für den „normalen“ Betrieb natürlich eine Verbesserung. Aber man kann es nie allen Recht machen 😉

Ich wollte erst eine Antwort im Kommentar schreiben, dachte dann aber, es wäre besser daraus einen Blogeintrag zu machen.

Dateien und Datenbanken

Backups bestehen normalerweise aus Dateien (Textdateien, Bilddateien, HTML-Dateien, etc). Wenn eine Website, die mit einem Content Management System wie WordPress oder Joomla erstellt ist, gesichert werden soll, muss ausser den Dateien auch die Datenbank gesichert werden. Das hört sich einfach an, ist aber eine Wissenschaft für sich.

Wenn ich beispielsweise eine Bilddatei habe (meinbild.jpg), dann kopiere ich dieses Bild einfach an den gewünschten Ort im Dateisystem und habe ein Backup. Der Restore Prozess besteht ebenfalls aus dem Kopierbefehl.

Wenn ich eine Datenbank benutze, so greife ich auf diese Datenbank mit einem Hostnamen, einem Benutzernamen und einem Passwort über eine wie auch immer gestaltete Programmiersprache zu. Ich kann die Datenbank daher nicht einfach so „kopieren“. Um die Arbeitsweise zu verdeutlichen hier ein kleines Beispiel.

Wenn ich eine Joomla Site betreibe, könnte ich in der Tabelle jos_content mit dem SQL Befehl:

SELECTFROM `jos_content` WHERE `id` = 1

den Inhalt des ersten erstellten Artikels erhalten. Dieser Inhalt wird mir dann in einem Array, einer Liste oder einem Objekt meiner Programmiersprache angeboten. Um den eigentlichen Inhalt zu sehen, muss ich ihn irgendwo ausgeben. Das geht natürlich auf der Website:

Joomla Website
Joomla Website

Das geht aber auch in Programmen wie phpMyAdmin. Da sieht die Ausgabe nicht so schick aus, der Inhalt ist allerdings tatsächlich der Gleiche.

jos_content Tabelle
jos_content Tabelle

So richtig „greifen“, wie eine Bilddatei, lässt sich eine Datenbank daher nicht.  Joomla kann tausende von Artikeln verwalten, wie soll ich die sichern? Du ahnst es vielleicht schon: Ich verwandle die Datenbank in eine Datei. Um das zu machen, benötige ein Werkzeug, ein Programm, eine Programmiersprache … irgendwas, dass es mir erlaubt, auf die Daten in der der Datenbank zuzugreifen.

Der Datenbankserver MySQL bringt das Kommandozeilen Tool mysqldump mit. Mit dem Befehl:

mysqldump -u [uname] -p[pass] db_name > db_backup.sql

kann ich den Inhalt der Datenbank in eine Datei verwandeln.
Mit einem anderen Befehl könnte ich eine einzige Tabelle, wie die jos_content sichern/exportieren.

mysqldump -u [uname] -p[pass] db_name table > table_backup.sql

So prinzipiell geht es um das im- und exportieren von Daten in eine Datenbank hinein oder aus einer Datenbank heraus.

Die .sql Datei, die beim Sichern/Exportieren erzeugt wird, enthält den Befehl diese Tabelle wieder zu erzeugen (CREATE TABLE)

CREATE TABLE `jos_content` (
 `id` int(10) UNSIGNED NOT NULL,
 `asset_id` int(10) UNSIGNED NOT NULL DEFAULT '0' COMMENT 'FK to the jos_assets table.',
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL DEFAULT '',

.............. VIEL MEHR ANWEISUNGEN ...........................
 `language` char(7) COLLATE utf8_unicode_ci NOT NULL COMMENT 'The language code for the article.',
 `xreference` varchar(50) COLLATE utf8_unicode_ci NOT NULL COMMENT 'A reference to enable linkages to external data sets.'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

und die Befehle die einzelnen Artikel wieder zu erzeugen (INSERT INTO)

INSERT INTO `jos_content` (`id`, `asset_id`, `title`, `alias`, `introtext`, `fulltext`, `state`, `catid`, `created`, `created_by`, `created_by_alias`, `modified`, `modified_by` ...) VALUES
(1, 61, 'Getting Started', 'getting-started', '<p>It\'s easy to get started creating your website. Knowing some of the basics will help.</p><h3>What is a Content Management System?</h3><p>A content management system is software that allows you to create and manage webpages easily by separating the creation of your content from the mechanics required to present it on the web.</p><p>In this site, the content is stored in a <em>database</em>. The look and feel are created by a <em>template</em>. Joomla! brings together the template and your content to create web pages.</p><h3>Logging in</h3><p>To login to your site use the user name and password that were created as part of the installation process. Once logged-in you will be able to create and edit articles and modify some settings.</p><h3>Creating an article</h3>
.............. VIEL MEHR ANWEISUNGEN ...........................

Nun haben wir die Datenbank als Datei vorliegen, können diese Datei kopieren und wir können die Daten in der Datei in eine andere Datenbank importieren.

Hinweis: Die normalerweise mit einem Passwort geschützten Daten liegen nun übrigens ungeschützt in einer Datei auf einer Festplatte. 

An dieser Stelle wird es interessant, weil diese Funktionen für mehrere Zwecke genutzt werden.

  1. Backup und Restore im Sinne der Sicherung der Daten
  2. Export und Import im Sinne von Umziehen und Kopieren von Daten

Da der mysqldump Befehl natürlich nicht besonders benutzerfreundlich ist und teilweise den Nutzern auch gar nicht zur Verfügung steht, werden Backup Tools (außer zum Backup) auch gern zum Klonen von Websites genutzt. Das funktioniert bei „überschaubaren“ Sites noch ganz gut, bei Sites mit größeren Datenbanken klappt es oft nicht mehr so gut. Die Gründe sind vielfältig.

Nach dieser langen Vorrede möchte ich zum Kern meiner Antwort an Fabian kommen.

phpMyAdmin

Wer mit Datenbanken hantiert, dem ist der Name phpMyAdmin sicher schon mal über den Weg gelaufen. Mit phpMyAdmin lassen sich Datenbanken exportieren (Backup) und importieren (Restore). Musste man früher noch Parameter festlegen, so sind es heutzutage wirklich nur ein paar Mausklicks zum Erfolg.
Im cPanel muss das Icon phpMyAdmin angeklickt werden.

cPanel Datenbanken
cPanel Datenbanken
phpMyAdmin
phpMyAdmin

Auf der linken Seite sehe ich meine Datenbanken. Die seafoll1_jos1 ist die Joomla Datenbank.

Backup einer Datenbank

Um nun diese Datenbank zu sichern, musst du sie mit einem Klick auf den Namen auswählen und auf den Reiter Exportieren klicken.

phpMyAdmin Datenbank Export
phpMyAdmin Datenbank Export

Du kannst alle Einstellungen so lassen, wie sie sind und auf den OK Button klicken. Das Programm phpMyAdmin erzeugt eine .sql Datei und lädt sie auf deinen PC herunter. Das ist das Backup!
Aus Platzgründen kannst du die Datei noch in ein komprimiertes Archiv verwandeln (zippen).

Restore einer Datenbank

Genau so einfach wie das Backup ist der Restore Vorgang. Es liegt nun an dir, welches Szenario du benötigst

  1. vor einem Update soll eine schnelle Sicherung gemacht werden
  2. nach einem Schaden soll ein Restore in der gleichen Datenbank vorgenommen werden
  3. die Site soll „geklont“ werden

Schnelle Sicherung

Wenn du eine schnelle Sicherung vor einem Update benötigst, würde ich die Datenbank gar nicht exportieren, ich würde sie einfach „kopieren“. Das funktioniert komplett auf dem Server und reicht als Notfall für ein fehlgeschlagenes Update aus.

phpMyAdmin - Datenbank kopieren
phpMyAdmin – Datenbank kopieren

Achtung: Wenn das Update ohne Fehler durchgelaufen ist, solltest du die Kopie der Datenbank wieder löschen um Speicherplatz zu sparen.

Restore in der gleichen Datenbank

In diesem Fall müssen die existierenden „schlechten“ Tabellen zunächst gelöscht werden. Dazu musst du im Reiter Struktur alle Tabellen markieren und löschen. Damit wirklich nichts verloren geht, kannst du vorher die „schlechte“ Datenbank unter einem anderen Namen kopieren.

phpMyAdmin - Tabellen löschen
phpMyAdmin – Tabellen löschen

Anschließend klickst du auf den Reiter Importieren, wählst deine .sql Datei des Backups mit den „guten“ Daten aus und klickst auf den OK Button. Alle Daten aus der Datei werden in die Datenbank importiert.

phpMyAdmin - Datenbank importieren
phpMyAdmin – Datenbank importieren

Site soll geklont werden

In diesem Fall muss das .sql Backup der einen Datenbank einfach in die gewünschte andere Datenbank importiert werden.

Fazit

Zunächst einmal vielen Dank an Fabian für den Kommentar. Bei einer kurzen Diskussion über das Thema wurde uns wieder klar, wie komplex die Zusammenhänge bei Datenbanken sein können. Unter anderem um die diese Komplexität zu reduzieren, haben wir das neue System überhaupt eingeführt. Wer wie Fabian (und ich auch) manchmal komplexere Aktionen machen will, dem sei daher phpMyAdmin wärmstens empfohlen.


tl;dr: Wir machen aus einer Datenbank eine Datei 🙂

 

 

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 7726px; left: 50px;">Save

Kategorien
Content Management Systeme Webdesign Wunschthema

Mega Menüs sind Mega

Ein Mega Menü ist ein um Spalten, Bilder, Formularfelder, Videos, Slideshows und Buttons angereichertes Menü. Es erscheint, wenn man mit der Maus einen Link in der Navigation überfährt oder wenn man auf einem Touch Device den Link klickt.
Für die einen sind Mega Menüs wie „die Pest“, für andere die tollste Erfindung seit geschnittenem Brot. Wie kommt das eigentlich?

Kategorien
Tools Wunschthema

Newsletter und E-Mail Marketing mit phpList

Mit einem Newsletter kannst du einen direkten Kontakt zu deinen Kunden herstellen und pflegen.

Ein Besucher oder Kunde, der seine E-Mail Adresse freiwillig im Formular des Anbieters einträgt, weil er an den Informationen, Dienstleistungen oder Produkten interessiert ist, wird sich über regelmässige E-Mails im Posteingang freuen. Wenn er die Nachrichten nicht mehr haben will, bestellt er sie ab. So einfach ist das.

Anders sieht es aus, wenn der Kunde auf allerlei Wegen dazu gebracht werden soll, den Newsletter zu abonnieren, obwohl er das gar nicht wirklich will oder zumindest noch nicht so richtig darüber nachgedacht hat. Dann fühlt er sich vielleicht gestört und der Newsletter kommt nicht so gut an.

Interessant ist auch, wenn Firmen E-Mail Adressen erwerben oder in der eigenen Firma „finden“, beispielsweise in einem Shop, einem Blog, einer Microsite, dem Ticketsystem, einem Gewinnspiel, einer Community oder anderen Datenbanken, in denen personenbezogene Daten so „liegen“ und diese dann nutzen wollen, um die Besitzer der E-Mail Adresse mit Newslettern zu „bespielen“. Auch hier kann es zu Abwehrreaktionen beim Kunden kommen.

Solange sich der Kunde freundlich angesprochen fühlt und nicht bedrängt wird, funktionieren sogar die beiden letzten Möglichkeiten. Die Rechtmäßigkeit der Verwendung der Daten lasse ich hier bewusst außen vor da dies in unterschiedlichen Ländern unterschiedlich geregelt wird.

Um eine E-Mail zu verschicken, benötigt man grundsätzlich nicht viel. Viele E-Mails zu verschicken kann aufwendiger werden. Der Newsletter muss erstellt, versendet und ausgewertet werden. Daher gibt es zahlreiche Services, die die Dienstleistung „Newsletter versenden“ für mehr oder weniger große Geldbeträge anbieten. Eine gute Übersicht, der kaum etwas hinzuzufügen ist, findet sich hier:
Die wichtigsten deutschen und US-Anbieter fürs E-Mail-MarketingStand 3/2016.

In unserem Blog geht es oft um selbst gehostete Open Source Lösungen und daher möchte ich ein Projekt vorstellen, das es seit 16 Jahren gibt – phpList.

phpList

Das Programm ist dafür gemacht, Newsletter, Presseerklärungen, Marketingschreiben oder einfach Nachrichten an eine Liste von Abonnenten zu schicken. Es ist in PHP geschrieben und benötigt eine MySQL Datenbank.

phpList verfügt über ein Web Interface mit Verwaltungsfunktionen für den „Campaign Manager“ (oder Admin) und für den Abonnenten. Das Abonnement Management funktioniert automatisiert. Wer phpList nicht selbst hosten möchte, kann es auf phplist.com als Service nutzen.

Installation

phpList ist, wie der Name schon vermuten lässt, eine Sammlung von PHP Scripts, die auf einen Webserver geladen und mit einem Webinstaller installiert werden müssen.
Eine ausführliche Beschreibung des Vorgangs hält das phpList Manual bereit – Installing phpList manually.

Als Novatrend Kunde hast du es einfacher und kannst phpList per Installatron installieren.

ACHTUNG: Seit November 2017 benutzen wir das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.

phpList im Installatron
phpList im Installatron

Ich wähle die Subdomain http://lists.seafolly.ch aus, lege den Admin Zugang fest und überlasse dem Installatron die Installation.

Installatron - phpList - Konfiguration
Installatron – phpList – Konfiguration

Unter http://lists.seafolly.ch können sich nun Benutzer in den standardmäßig vorhandenen Newsletter ein- und austragen.

Newsletter abonnieren
Newsletter abonnieren

Nach der Eintragung wird eine E-Mail mit einem Bestätigungslink an die eingetragene E-Mail Adresse verschickt.

Anfrage zur Bestätigung
Anfrage zur Bestätigung

Erst durch einen Klick auf diesen Link abonniert der Benutzer den Newsletter.

Unter http://lists.seafolly.ch/admin kann der Admin die Daten verwalten. Zum Beispiel könnte er die Anmeldeseite so bearbeiten, dass Text und E-Mail auf Deutsch erscheinen (Navigation -> Anmeldeseiten).

Abonnenten Übersicht

Die Abonnenten einer Liste können gefiltert, exportiert, gelöscht und verschoben werden.

Abonnenten Liste
Abonnenten Liste

Newsletter versenden

Nachrichten können in einem fünfstufigen Dialog erstellt werden. Dabei wird zunächst der Inhalt erstellt (Textvorlagen können definiert werden). Danach wird das Format festgelegt (HTML, Text). Im Anschluss wird der Versendezeitpunkt und der gewünschte Empfängerkreis ausgewählt. Während der Bearbeitung können Test Nachrichten an definierte E-Mail Adressen zur Kontrolle versendet werden.

Newsletter erstellen
Newsletter erstellen

Die erstellten Newsletter erscheinen in einer Liste und können jederzeit bearbeitet werden.

Newsletter Liste
Newsletter Liste

Der eigentliche Versand erfolgt zum festgelegten Zeitpunkt. Umfangreiche Statistiken können nach dem Versenden des Newsletters in CSV Dateien exportiert werden. Es gibt eine Statistik Übersicht, die Klicks pro URL, die Klicks pro Nachricht, die Anzahl der geöffneten Nachrichten und Domainstatistiken.

Integration in andere Systeme

Auch wenn ein Link zur Abonnement Seite meines Erachtens ausreicht, besteht doch immer ein Bedarf dem Besucher das Abonnieren eines Newsletters zu erleichtern. Daher kann phpList in andere Systeme integriert werden, zum Beispiel hier:

Links


tl;dr: phpList ist ein vollwertiges Open Source Newsletter- und E-Mail Marketing System. Es ist über Plugins erweiterbar, sehr flexibel und stabil.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 3205px; left: 50px;">Save

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer;">Save

Kategorien
Content Management Systeme Editoren Site Builder Webdesign Webserver Wunschthema

Debugging mit PHPStorm und MAMP

In der letzten Woche ging es um die Erstellung einer Galerie mit der PhotoSwipe Library in WordPress. Das Ergebnis war gut, aber wie so oft fehlte noch eine Kleinigkeit. Unter dem Einzelbild sollte außer der Beschreibung des Bildes noch ein Link zum Artikel sein, in dem das Bild verwendet wird. Als Entwickler muss man nun suchen, wo man diesen Link am Besten einfügt und wie man an die gewünschten Daten kommt. Glücklicherweise merkt sich WordPress in welchem Beitrag ein Bild verwendet wird, so dass es grundsätzlich relativ einfach möglich sein müsste, einen korrekten Link einzufügen.

Wer öfter programmiert, hat einen Lieblingseditor oder eine Lieblingsentwicklungsumgebung (IDE). Im PHP Umfeld ist vermutlich das Produkt PHPStorm „die IDE“. PHPStorm ist ein proprietäres Produkt aber auch im Open Source Umfeld sehr beliebt. Du kannst dir eine kostenlose 30 Tage Version von der Website des Herstellers laden.

Die Aufgabe mit dem Link ist eine gute Gelegenheit um das Debbuging mit PHPStorm zu zeigen. Unter Debugging versteht man den Vorgang, Fehler in Computersystemen zu diagnostizieren und zu finden. Der Name geht tatsächlich auf Käfer und Motten (bugs) zurück, die in frühen Computern zu Kurzschlüssen an den Elektronenröhren führten. Webentwickler nutzen für die lokale Entwicklung oft eine Zusammenstellung freier Software für Webserver, Datenbank und Programmiersprache. Im macOS Umfeld ist das oft MAMP, im Windows Umfeld XAMP, bei Linux sind alle benötigten Programme bereits enthalten. Eine Website wird meistens lokal erstellt und in einem Git Repo gelagert (siehe auch Entwicklungsworkflow für Deine Website(s)). Die Änderungen am Code werden dann auf unterschiedliche Weise (git pull, FTP, Browser-Upload, etc.) auf den produktiven Server übertragen.

Die Fehlersuche und überhaupt das Verständnis von Programmcode ist bei modernen Content Management Systemen nicht mehr ganz einfach. WordPress ist glücklicherweise immer noch relativ leicht zu verstehen, die Innereien der Variablen und Arrays sind aber oft unübersichtlich.

Eine wichtige Funktion eines Debuggers ist das Setzen von Haltepunkten an bestimmten Code Zeilen. Die Programmausführung wird an so einem Haltepunkt unterbrochen und man kann sich dann in der IDE die Werte aller im Speicher vorhandenen Variablen ansehen. Ein für meinen Zweck sehr hilfreiches Feature.

Was wir hier machen nennt sich Remote Debugging. PHPStorm wird so konfiguriert, dass es weiß, welcher Server auf welchem Port verwendet wird und wartet dann auf einen speziellen Parameter beim Aufruf der lokalen Website. MAMP/XAMPP muss ebenfalls vorbereitet werden und den Parameter an PHPStorm weitergeben. Ich beschreibe die Vorgehensweise bei MAMP, da ich mit macOS arbeite.

MAMP vorbereiten

Dein PHP Interpreter benötigt die entsprechenden Informationen in seiner Konfigurationsdatei php.ini. Damit du die richtige Datei änderst, musst du in den Preferences herausfinden, welche PHP Version dein MAMP benutzt. In meinem Fall ist das PHP 7.0.12.

MAMP - PHP-Version
MAMP – PHP-Version

Nun musst du die passende php.ini Datei finden und ein paar Änderungen vornehmen. Die Datei liegt bei mir in /Applications/MAMP/bin/php/php7.0.12/conf.

php.ini
php.ini

Ganz am Ende der Datei müssen folgende Zeilen eingefügt werden, bzw. auskommentiert werden.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.12/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.idekey=PHPSTORM

Danach muss der Webserver neu gestartet werden.

PHPStorm vorbereiten

Ich lege mir für jede Website einen Unterordner in meinem /dev Ordner an, also in diesem Fall /dev/wordpress. In PHPStorm ist jede Website dann ein Projekt.

PHPStorm
PHPStorm

Das Remote Debugging muss in den PHPStorm Preferences konfiguriert werden (einfach nach dem Wort debug suchen). Die Standardwerte kannst du übernehmen, wichtig ist der Debug port 9000. Es muss der gleiche Port wie in der php.ini von MAMP sein.

Debug - Einstellungen
Debug – Einstellungen

In PHPStorm kann nun der Debugger eingeschaltet werden. Oben im Menu ist ein kleiner Telefonhörer, der im oberen Bereich rot ist (ausgeschaltet). Nach einem Mausklick ist er oben und unten grün, „hört“ also mit.

Debugger einschalten
Debugger einschalten

Jetzt fehlt noch die Verbindung zum MAMP. Rufe im Menü den Punkt Run -> Edit Configurations auf.

Remote Einstellungen
Remote Einstellungen

Unter dem Eintrag PHP Remote Debug musst du einen neuen Server einrichten (Name MAMP) und als IDE key den gleichen Schlüssel wie in der php.ini eintragen (PHPSTORM).

PHP Remote Debug
PHP Remote Debug

Debugging

Jetzt kann es losgehen. PHPStorm wartet auf das vereinbarte „Zauberwort“ (PHPSTORM) und MAMP auf einen Seitenaufruf. Bevor der kommt, musst du allerdings einen Haltepunkt festlegen. In meinem Beispiel nutze ich das PhotoSwipe Masonry Plugin (siehe Beitrag WordPress Galerie mit PhotoSwipe und Masonry Effekt) und möchte dort etwas in Erfahrung bringen. Ich öffne die Datei photoswipe-masonry.php und klicke die Zeilen 474 und 480 an. An dieser Stelle wird der Titel erzeugt, der unter der Einzelansicht eines Fotos angezeigt wird. Mein Ziel ist herauszufinden, ob die ID des mit dem Foto verknüpften Artikels als Variablenwert zur Verfügung steht.

Haltepunkte setzen
Haltepunkte setzen

Ich rufe die Website mit folgendem Parameter auf:
http://127.0.0.1/?XDEBUG_SESSION_START=PHPSTORM
und navigiere dann auf der Website an die Stelle mit dem Foto, wo der zusätzliche Link erscheinen soll.

PHPStorm hält tatsächlich automatisch an der von mir markierten Codezeile an und ich kann im Debug Fenster die Variablenwerte durchgehen. Der Aufbau der Website stoppt ebenfalls an diesem Punkt.
(Ein Klick auf den kleinen grünen Play Button im Debugger Fenster lässt das Programm zum nächsten Haltepunkt laufen).

Debugging Session
Debugging Session

WordPress behandelt ein Bild im Medienbereich intern als Post. Mein Bild hat die ID 23. Im Attachment Array sehe ich einen Eintrag mit dem Namen post_parent und der richtigen ID des Beitrags in dem das Bild benutzt wird (26). Hurra! Jetzt kann ich eine WordPress Funktion suchen, die mir den Titel des Beitrags liefert. Den Link zum Artikel kann ich mit der ID zusammenbauen (Vielleicht Stoff für einen neuen Beitrag 😉 ).

Fazit

Auch wenn es Anfangs etwas mühselig und zeitaufwendig ist und sicher nicht beim ersten Mal klappt, halte durch! Der Debugger spart dir viel Zeit und macht manche Dinge erst möglich, so dass du ihn nicht mehr missen möchtest.

Links:


tl;dr: Debugging ist nützlich, gar nicht schwer und funktioniert auch mit MAMP und XAMPP.

Kategorien
Content Management Systeme Site Builder Webdesign Wunschthema

WordPress Galerie mit PhotoSwipe und Masonry Effekt

Heute gibt es wieder ein Wunschthema. Es geht es um die Darstellung von Fotos in WordPress.

Im Zeitalter von Facebook, Pinterest, Instagram und ähnlichen Services sind die Ansprüche an die Darstellung von Fotos gestiegen. Besucher erwarten auch auf selbst gehosteten Websites eine schicke Darstellung. Auf allen denkbaren Geräten sollte eine Galerie einfach per Touch, Swipe, Pinch und Klick bedienbar sein und schnell laden.

Vermutlich hast du das Problem auch schon mal gehabt. Du wolltest Fotos auf deiner Website in einer Art Slideshow oder einem Grid darstellen. Nachdem die Galerie lief, hast du schnell festgestellt, dass es eben doch nicht auf allen Geräten gleich gut bedienbar war, ganz zu schweigen von der Ladezeit. Wenn dann noch individuelle Wünsche des Kunden kommen oder es einfach viele Fotos sind, verzweifelt man schnell.

PhotoSwipe

Die JavaScript Library PhotoSwipe ist eine echte Hilfe in solchen Fällen.

PhotoSwipe
PhotoSwipe

Sie zeichnet sich durch die folgenden drei Eigenschaften aus:

  • Modular: PhotoSwipe besteht aus zahlreichen Modulen, die es ermöglichen, nur die Teile der Bibliothek zu nutzen, die du wirklich brauchst. Das hält den JavaScript Code klein.
  • Responsiv: Photoswipe lädt das zur Bildschirmgröße passende Foto.
  • Touch Unterstützung: PhotoSwipe unterstützt die meisten Touch Gesten wie beispielsweise das „größer ziehen mit zwei Fingern“ und das Schließen der Einzelansicht durch „nach oben wischen“.

Photoswipe hat nur einen Haken. Es ist ein Stück Code, das nicht so einfach out of the Box funktioniert und Kenntnis von JavaScript erfordert.

Glücklicherweise gibt es eine gute Dokumentation und so etwas wie offizielle Plugins für RubyEmber.jsEagerKokenOrchardYellow CMSKirby und Drupal.

Es gibt kein offizielles WordPress Plugin aber es gibt mehrere WordPress Plugins, die die Bibliothek nutzen um die im WordPress Core bereits vorhandene Galeriefunktion zu erweitern.

WordPress Galerien erstellen

Bevor ich die PhotoSwipe Bibliothek hinzufüge, beschreibe ich zunächst den Weg, wie du in WordPress Galerien erstellst. Eine WordPress Galerie besteht aus existierenden Fotos, die du innerhalb eines Beitrags hinzufügen kannst. Klicke einfach auf den Dateien hinzufügen Button und wähle die entsprechenden Bilder aus.

WordPress - Galerie zusammenstellen
WordPress – Galerie zusammenstellen

Hinweis: Falls noch keine Fotos vorhanden sind, kannst du in diesem Schritt auch welche hochladen. Wechsle einfach in das Tab Dateien hochladen und wähle danach die Bilder aus.

Nach einem Klick auf den Galerie erstellen Button kannst du weitere Eigenschaften der Galerie wählen. Du kannst die Größe der Vorschaubilder auswählen, was bei einem Klick auf das Bild passieren soll, die Art der Sortierung, die Anzahl der Spalten und den Typ des Layouts.

Galerie Einstellungen
Galerie Einstellungen

Nach dem Speichern erscheinen die Bilder innerhalb der visuellen Ansicht im Editor. Du kann die Einstellungen weiterhin bearbeiten.

Galerie in der visuellen Ansicht des Editors
Galerie in der visuellen Ansicht des Editors

Wenn du in den Text Modus wechselst, siehst du, was hinter der Galerie steckt. Sie ist ein WordPress ShortCode, dem Parameter und Id’s der Bilder übergeben wurden.

Galerie - ShortCode
Galerie – ShortCode

Damit ist deine WordPress Galerie fertig und sieht auch o.k. aus (Ich probiere das hier beim Schreiben des Artikels im NOVATREND Blog aus, deshalb steht im Titel Privat).

WordPress-Galerie
WordPress-Galerie

Hier ein Beispiel einer Darstellung mit der WordPress Slideshow Option (noch ohne PhotoSwipe).

WordPress - DiaShow
WordPress – DiaShow

Beide Darstellungsarten funktionieren sehr gut, sehen aber doch recht „hausbacken“ aus.

Plugin PhotoSwipe Masonry Gallery

An dieser Stelle kommt das PhotoSwipe Masonry Gallery Plugin ins Spiel. Es arbeitet auf der Basis von WordPress Galerien und verändert deren Darstellung.

PhotoSwipe Masonry Gallery
PhotoSwipe Masonry Gallery

In den Einstellungen des Plugins kann die Größe der Thumbnails und die Maximalgröße des Einzelbildes eingestellt werden. Außerdem lässt sich ein weißer Hintergrund konfigurieren und der Masonry Effekt deaktivierten.

PhotoSwipe Einstellungen
PhotoSwipe Einstellungen

Das Ergebnis sieht sehr beeindruckend aus (Beispiel). Die Thumbnails ordnen sich je nach verfügbarem Platz an. In der Einzelansicht auf Touch Geräten kannst du dich durch die Bilder „wischen“ und diese auch auf Pinterest, Twitter und Facebook teilen. Jede Einzelansicht hat einen eindeutigen URL.

WordPress Galerie mit PhotoSwipe Masonry Plugin
WordPress Galerie mit PhotoSwipe Masonry Plugin

Durch die Nutzung der WordPress Galerien hat das Plugin einen angenehmen Nebeneffekt. Du musst keine Galerien separat erstellen und WordPress wird das eigene Galerie Feature sicherlich weiter pflegen.

Achtung: Die Anzahl der Bilder und die Größe der Thumbnails müssen beachtet werden, sonst kommt es zu langen Ladezeiten und dem Gegenteil dessen, was ich letzte Woche noch bemängelt habe. Das zur Neuberechnung der Thumbnails in den PhotoSwipe Einstellungen vorgeschlagene AJAX Thumbnail Rebuild Plugin funktioniert gut und sollte bei einer Änderung der Thumbnailgröße genutzt werden.

Links:


tl;dr: Mit PhotoSwipe lassen sich Fotos ansprechend darstellen