Mobirise Tutorials

Tutorial - VN Gallery

⚠️ Lest diese Anleitung zur VN Gallery

Bitte löscht vor dem Import eines Updates dieser oder einer anderen PHP-Anwendung von Volker Niederastroth (VN) alle Komponenten innerhalb der Software, einschließlich der Blöcke, sowie auf dem Rechner das zugehörige Erweiterungsverzeichnis und auf dem Server hier das Verzeichnis /assets/vn-gallery/, damit eine fehlerfreie Neuinstallation möglich ist.

Bitte veröffentlicht in diesem Fall einmalig alles und deaktiviert dazu die Option „Nur Änderungen veröffentlichen“. Ansonsten wird Mobirise die zur Anwendung gehörende PHP-Datei nicht neu publizieren. Meine hier gezeigte Version ist vom 11. Juli 2026.

Diese Anwendung findet ihr in der VN Block Galerie als "VN Gallery" in der Kategorie "Mobirise & PHP" zum kostenlosen Download.

Beim ersten Aufruf der veröffentlichten Seite werdet ihr nach dem Administrator-Passwort gefragt. Ruft die Seite daher unmittelbar auf, um euer Passwort einmalig einzutragen.

Der Administratorbereich aller Galerien der gleichen Seite lässt sich auf dem Desktop unter anderem durch „Strg + Doppelklick“ auf den Hintergrund oder durch „Strg + Shift + A“ öffnen; auf mobilen Geräten habt ihr ebenfalls verschiedene Möglichkeiten. In den Blockwerkzeugen habe ich die Option „Schütteln“ gewählt, um mich auf dem Smartphone anzumelden.

Weiterhin habe ich unter der Galerie einen Link zum Administratorbereich, mit der OnClick-Funktion "vnAdmin()", eingebaut:

<a href="javascript:void();" class="text-primary" onclick="vnAdmin()">Admin</a>

Der Link zum Login meiner 2. Galerie erhält entsprechend der ID die OnClick-Funktion "vnAdmin_galerie_2()", usw.:

<a href="javascript:void();" class="text-primary" onclick="vnAdmin_galerie_2()">Admin</a>

Ein Bindestrich ist in einem normalen JavaScript-Funktionsnamen problematisch. JavaScript würde das als Rechnung verstehen, daher wird hier die id="galerie-2" mit der id="galerie_2" - also mit Unterstrich ersetzt.

Ihr könnt mehrere Galerien auf derselben Seite anlegen. In den Block‑Einstellungen müsst ihr dabei jedoch zwingend die Galerie‑ID umbenennen, z. B. in „galerie-2“, wie ich es hier zeige mit meiner Galerie Segelyacht.

In den Blockwerkzeugen könnt ihr auch eine Startkategorie wählen, die beim Aufruf der Seite angezeigt wird — anstatt alle Fotos oder gar keine anzuzeigen.

Die Daten und Bilder werden automatisch im Verzeichnis "vn-gallery" im Mobirise-Ordner "assets" auf dem Server angelegt und mittels .htaccess nach außen geschützt. Das Passwort wird dort zusätzlich verschlüsselt gespeichert. Die Bilder können jedoch weiterhin von jedem direkt im Browser heruntergeladen werden.

Fotos, die ihr wieder löscht, werden auch sogleich am Server gelöscht.

Die Kategorien können entweder in ihrer ursprünglichen Reihenfolge angezeigt oder alphabetisch, aufsteigend (A–Z) bzw. absteigend (Z–A), sortiert werden. 

Zunächst müsst ihr die Blockeinstellungen vornehmen, um sie an eure Bedürfnisse anzupassen. Diese Einstellungen werden im Mobirise-Arbeitsbereich als Platzhalter-Galerie dargestellt, sodass man sofort Farben und Stil sehen kann. Kontrolliert das Ergebnis dieser Einstellungen anschließend in der Live‑Galerie, nachdem das entfernte Veröffentlichen abgeschlossen ist.

Tipps:

Wenn ihr euer Administratorpasswort erneuern möchtet, löscht einfach die Datei "pw.hash" und startet die Anwendung neu. Dadurch wird die Ersteinrichtung erneut ausgeführt. Bei einer Passwortänderung bleibt die Galerie unverändert. Diese Datei findet ihr am Server in diesem Verzeichnis:

/assets/vn-gallery/config/galerie-1/

Zusätzliche Bilder werden standardmäßig der gewählten Kategorie zugeordnet und ans Ende angehängt. Wählt daher vor dem Hochladen die passende Kategorie, auf die diese Bilder zutreffen.

Die hochgeladenen Bilder lassen sich im Administrationsbereich per Drag & Drop an jede beliebige Position verschieben. Dadurch wird das nachträgliche Positionieren in der Galerie zum Kinderspiel. Die zu den Bildern gehörenden Daten werden in einer JSON‑Textdatei gespeichert und beim Verschieben entsprechend aktualisiert.

Ein Eintrag im JSON‑Format sieht beispielsweise wie unten dargestellt aus. Er beginnt mit einer öffnenden geschweiften Klammer und endet mit einem Komma; der unterste bzw. letzte Eintrag enthält kein Komma.

Die Datei befindet sich im selben Verzeichnis wie die Passwortdatei. Sowohl diese JSON‑Datei als auch die hochgeladenen Bilder sollte man gelegentlich sichern, indem man sie vom Server auf den Rechner kopiert. 

{
  "name": "img_6a4cbebf575463.45475173.jpg",
  "caption": "Bucht am Haus - Cala Salada",
  "cat": "cat-172401a6",
  "created": 1783414463
},