Hallo @micneu und alle anderen,
sehr interessanter use-case. Kurz gesagt, ist möglich, aber nicht einfach.
Erstmal noch wegen der Video-Galerie:
-
Video Wall - Kann YouTube und Vimeo
-
ProGallery - Kann YouTube, Vimeo und selbst gehostete Videos
Jetzt zur Bilder-Galerie:
- Die einfache, aber auf lange Sicht minimal umständliche Lösung:
Gallery Stack von @instacks - Dieses kleine Schmuckstück von einem Stack bietet die Möglichkeit, als Quelle einen Ordner in deinem File-System anzugeben. Erstellst du einen neuen Ordner, erstellst du halt eine neue Seite mit Gallery Stack und der FTP-Integration dazu. Ist etwas mehr Arbeit, aber ganz easy.
- Die komplizierte, aber auf lange Sicht ziemlich entspannte Lösung:
Wie von Jannis schon erwähnt ist das zur Zeit so nicht möglich. Zumindest nicht mit den Möglichkeiten, die Stacks zur Zeit bieten. Sprich, etwas custom code muss her, der die Sache regelt. Gehen wir mal davon aus, du legst eine Seite mit einer Galerie an, in der Sidebar hast du dann eine Liste mit Links, wo du anklicken kannst, welche Bilder aus welchem Ordner du jetzt sehen willst. Die Galerie, die hierbei zum Einsatz kommen müsste, wäre dann ProGallery. Grund: Man kann als Quell-Objekt eine CSV-Tabelle angeben (ein JSON-Feed wäre zwar schöner, aber hey, immerhin etwas).
Und jetzt wird es fancy: als Quelle in den Einstellungen des Stacks geben wir eine PHP-Variable an (z.B. so <?php echo $_SESSION['my_csv']; ?>
). Damit bei pageload kein Fehler auftritt, setzten wir per default im head der Seite die Variable und geben ihr den Pfad zu einer vorbereiteten csv-Datei, bspw. von ‘2018’. Warum wir das in die Session schreiben kommt später.
Wir könnten das theoretisch auch per JS lösen, falls wir aber einen Page Reload lostreten müssen, sind wir so auf der sicheren Seite.
Kommen wir wieder zu den Links in der Sidebar. Die bekommen ein onclick-Attribut mit dazu, um auf Klick eine Funktion auszulösen (z.B. <a href="#" class="my_class" onclick="get_images('name_des_zielordners')">Bilder 2018</a>
). Als Übergabeparameter geben wir den Ordnernamen unserer Wahl mit. Das Raute-Zeichen im href-Attribut sorgt dafür, das die Seite nicht neu lädt, falls es leer bleibt. So können wir uns die preventDefault()-Funktion im JavaScript sparen. (Wenn man kein Fan von inline-Funktionen ist, kann man stattdessen den Namen des Zielordners auch in ein anderes Attribut wie bspw. data-value
stecken. Die Funktion führt man dann aus, indem man eine $.on('click', function())
an einen jQuery-Klassenselektor dranhängt und sich mit der $.attr('data-value')
-Funktion die data-value holt. Dazu müssen dann aber alle Links die entsprechende Klasse besitzen (hier ‘my_class’), diese Klasse sollten sonst KEINE anderen Elemente haben, sonst kommt es zu Fehlern, außer man nimmt im JS eine entsprechende Prüfung auf die Existenz von dem Attribut vor oder so.) Denn dazu kommen wir als nächstes, das JavaScript, bzw, unsere get_images()-Funktion. Diese sähe grob so aus:
function get_images(target){ $.ajax({ contentType: 'json', data: target, method: 'POST', url: 'resources/get_images.php', complete: function(){ location.reload(); } }); }
Da ich faul bin, habe ich hier mal einen Page Reload losgetreten. Vermutlich könnte man mittels jQuery die Galerie auch mit der neuen CSV, die gleich kommt, neu initiieren. Da ich den Stack aber nicht habe, kann ich das so auch nicht rausfinden.
Anyway, diese Ajax Funktion (braucht übrigens jQuery, lässt sich aber auch mit bspw. vue.js oder einer angeblich existierenden nativen Funktion machen) übergibt unseren Zielordner an die get_images.php-Datei. In dieser können wir den Ordner dann so abfragen:
if(isset($_POST['target'])){$target = $_POST['target']}
Hier haben wir den Wert der Variable direkt in $target
-Variable geschrieben. So müssen wir nicht ständig auf $_POST
zugreifen und können uns viel Geschreibe sparen.
Was passiert weiter?
Nun, wir iterieren durch unser gesamtes Dateisystem, bestenfalls in einem Unterordner wo der ganze Rest drin ist, bis wir den Ordner gefunden haben, der unserem $target
entspricht. Darin lesen wir alle Dateien ein, schnappen uns die Dateinamen, bauen uns die Links zu den Bildern, generieren vielleicht einen Bildtitel aus dem Dateinamen und erstellen in unserem Verzeichnis ein csv-Datei, in die wir das alles reinschreiben. Wenn es eine solche Datei schon gibt, dann können wir diese entweder überschreiben, den ganzen Prozess abbrechen (am besten noch bevor man die ganzen Bilder einliest etc., also am Anfang auf eine entsprechende Datei prüfen), oder je nach Timestamp entscheiden, was getan werden soll. Gibt noch weitere Möglichkeiten, muss man sich dann überlegen. Jedenfalls schnappen wir uns den Dateinamen der CSV, generieren einen Link und schreiben den in unsere $_SESSION['my_csv']
vom Anfang. Die Ajax-Funktion initiiert derweil den Page-Reload und unsere Galerie wird derweil mit den neuen Bildern geladen. Das war es dann im wesentlichen auch schon.
Besser könnte man es wie gesagt so machen, indem man sich den Page Reload spart und nur die Galerie neu lädt. Dazu würde ich sie mit einem div
umschließen, der eine einmalige, eindeutige ID bekommt. (z.B. mit dem Frontend-Stack). Dann schießt man die ‘Galerie’ mit einer html()
-Funktion da hinein und ersetzt damit die alte. Dazu müsste man im JS lediglich eine success
-Funktion im AJAX einfügen und eine .then()
-Funktion hinten anfügen, die den Rest erledigt.
Noch besser wäre es, sollte der Gallery Stack jemals JSON als Quelle akzeptieren, das aus der AJAX direkt so übergeben zu lassen. Man müsste in der success
-Funktion nur die data
an die $.then()
-Funktion übergeben, den Reload der Gallery initiieren und könnte sich den ganzen cvs-Mist in der php sparen (die Formatierung für ProGallery ist nämlich ziemlich furchtbar). Weiterer Vorteil, man kann sich den Zugriff auf die $_SESSION
sparen.
Ok, also wie gesagt, grundlegend ist es möglich. Prinzipiell ist es auch nicht weiter kompliziert, am nervigsten wäre tatsächlich das Zusammenschustern der CSV-Datei.
Hoffe, ich konnte soweit helfen.
Happy weaving,
~N