Blättern in Fotoalbum UND individuelle Foto-Auswahl von Patrick Andrieu, 08.04.2009 20:03

Blättern in Fotoalbum UND individuelle Foto-Auswahl

Patrick Andrieu Homepage des Autors 08.04.2009 20:03

Hallo dedlfix!

Solele... Heute hatte ich endlich Zeit...

Dein Skript funktionierte einwandfrei (nach dem ich erstmals ewig probieren musste, wie ich die Pfade anzugeben hatte) solange... man JavaScript deaktiviert hatte. Mit JavaScript wollte die Galerie-Funktion nicht, weil Dein Skript andere Pfade generierte als die, die das JavaScript erwartet:

Die Pfade in der Perl-Galerie sehen so aus:

<a href="/z_testdir/scripts/perl/gallery2.pl?path=/roadster/urlaub_2004/1230_warten1.jpg">

während die von Deinem Skript so aussahen:

<a href="/z_testdir/scripts/php/gallery.php?path=urlaub_2004/1230_warten1.jpg">

Da ich keine Lust hatte, das JavaScript zu ändern (weil da am Pfad gesplittet und gepoppt [!][ja!] wird), was mich 5mn gekostet hätte, habe ich als PHP-Laie, der erstmal suchen mußte, was trim(), rtrim(), und was weiß ich noch was für seltsame PHP-Funktionen wie und was machen, lieber ganze drei Stunden dazu verbracht, Dein Skript so zu ändern, dass er mir das liefert, was ich will.

Aber zunächst... das Skript in Deinem zweiten Posting dient nur dazu, die Thumbnails automatisch generieren zu lassen, ja? Da ich in meinem Beispiel davon ausgegangen bin, dass ein am Skript interessierter Galerie-Baslter bereits seine Thumbnails erstellt hat, habe ich es nicht verwendet - und auch nicht getestet. Sehen wir das als Zugabe, ja?

Diese DOCUMENT_ROOT-Abfrage und das Definieren der gleichnamigen Konstante zu Beginn des Skripts »common.php« ist wofür? Die Konstante wird nämlich nicht mehr gebraucht (taucht nirgends mehr auf). Das macht meine Version jetzt. Auch musste ich eine Konstante DIR_PATH definieren, um mal damit konkatenieren oder mal substringen zu können. Ist sicher nicht das gelbe von Ei [1], so aber erhalte ich die Thumbsverlinkungen und Bild-Referenzierung im DIV »show« so, wie ich sie haben will.

So sieht die »common.php« aus:

----------------- Konfigurationsskript »common.php« -----------------

<?php

if (!isset($_SERVER['DOCUMENT_ROOT'])) {
  define('DOCUMENT_ROOT', '/data/wwwdocs/_test/picgal');
} else {
  define('DOCUMENT_ROOT', rtrim($_SERVER['DOCUMENT_ROOT'], '/'));
}

define('GALLERY_BASE_DIRECTORY', DOCUMENT_ROOT.'/roadster');
define('DIR_PATH', '/roadster/');

// Nimm dies, wenn kein Galerie-Verzeichnis übergeben wurde
define('DEFAULT_GALLERY_DIRECTORY', '/urlaub_2004');

// Name des Parameters zur Scriptsteuerung
define('URL_PARAMETER_NAME', 'path');

// Verzeichnis der Thumbnails, relativ zum jeweiligen Galerie-Verzeichnis
define('THUMBNAILS_DIRECTORY', 'th');
// Thumbnail-Dateinamen-Vorspann und -Anhängsel.
define('THUMBNAIL_PREFIX', '');
define('THUMBNAIL_SUFFIX', '_t');

// Vollen Pfadnamen zum die Galerien enthaltenen Verzeichnis ermitteln
// und einen(!) / anhängen
define('REAL_GALLERY_BASE_PATH', rtrim(realpath(GALLERY_BASE_DIRECTORY), '/') . '/');
// REAL_GALLERY_BASE_PATH enthält beispielsweise /pfad/zum/docroot/galleries/

// Vollen Pfadnamen zur gewünschten Galerie ermitteln
define('REAL_GALLERY_DIRECTORY', isset($_GET[URL_PARAMETER_NAME]) ?
        //realpath(REAL_GALLERY_BASE_PATH) : // . trim($_GET[URL_PARAMETER_NAME], '/')) :
        substr(REAL_GALLERY_BASE_PATH,0,-strlen(DIR_PATH)).$_GET[URL_PARAMETER_NAME] . '/' :
        REAL_GALLERY_BASE_PATH . trim(DEFAULT_GALLERY_DIRECTORY, '/'));


// Führt der Pfad zu einem Ziel außerhalb von GALLERY_BASE_DIRECTORY?

if (substr(REAL_GALLERY_DIRECTORY, 0, strlen(REAL_GALLERY_BASE_PATH)) != REAL_GALLERY_BASE_PATH) {
  die('Path violation.'); // Angriffsversuch kurz und schmerzlos beenden.
}

/**
 * Erstellt den Thumbnail-Dateinamen aus einem gegebenen Bilddateinamen.
 *
 * @param string $imageFilename
 * @return string
 */
function getThumbnailFilename($imageFilename) {
  $extension = pathinfo($imageFilename, PATHINFO_EXTENSION);
  return trim(THUMBNAILS_DIRECTORY, '/') .  '/'.
    THUMBNAIL_PREFIX .
    substr($imageFilename, 0, - (strlen($extension) + 1)) . // ohne Extension
    THUMBNAIL_SUFFIX .
    '.' . $extension;
}


/**
 * Bearbeiten von Fehlermeldungen
 *
 * Bitte Inhalt dieser Funktion ersetzen durch eine angemessene Fehlerbehandlung.
 * Anwender sollten weder die Ursache noch Details dazu angezeigt bekommen.
 *
 * @param string $message
 * @param string $details
 */
function error($message, $details = '') {
  echo '<div>', $message, ' - ', $details, '</div>';
}

und so »gallery.php« (hier bereinigt von Kommentaren, die mir zwar sehr geholfen haben, beim Anpassen jedoch irritiert haben):

----------------- Galerieskript »gallery.php« -----------------

<?php
error_reporting(E_ALL);
require_once 'common.php';
define('TEMPLATE_FILENAME', '../../files/gallery.tpl');
define('SCRIPT_URL', $_SERVER['SCRIPT_NAME']);


ini_set('track_errors', 1); // PHP-Fehlermeldungstext in $php_errormsg schreiben lassen

function createHtmlFromTemplate($templateFilename, $images, $galleryDirectory, $showImageFilename) {
  if (false === $template = @file_get_contents($templateFilename)){
    error('Template nicht gefunden', $php_errormsg);
    return '';
  }

  $href = sprintf('%s?%s=%s', SCRIPT_URL, URL_PARAMETER_NAME, $galleryDirectory);

  $templateLoopPattern = '#<TMPL_LOOP +NAME=THUMBS>(.*?)</TMPL_LOOP>#s';
  if (preg_match_all($templateLoopPattern, $template, $matches)) {
    $replacements = array();
    foreach ($matches[1] as $nr => $match) {
      foreach ($images as $imageFilename => $imageInfo) {
        $templateLoopVars = array(
          '<TMPL_VAR NAME=SCRIPT_URI>' => $href . $imageFilename,
          '<TMPL_VAR NAME=THPATH>' => $galleryDirectory . getThumbnailFilename($imageFilename),
          '<TMPL_VAR NAME=PICNAME>' => basename($imageFilename),
        );
        $replacements[$nr][] = strtr($match, $templateLoopVars);
      }
    }
    foreach ($replacements as $replacement)
      $template = preg_replace($templateLoopPattern, implode('', $replacement), $template, 1);
  }

  $templateVars = array(
    '<TMPL_VAR NAME=SCRIPT>' => 'PHP',
    '<TMPL_VAR NAME=SCRIPT_URL>' => SCRIPT_URL,
    '<TMPL_VAR NAME=PICNAME>' => $showImageFilename,
    '<TMPL_VAR NAME=DIRPATH>' => $galleryDirectory,
  );
  $template = strtr($template, $templateVars);

  return $template;
}

if (is_file(rtrim(REAL_GALLERY_DIRECTORY,'/'))) {         // Wurde ein Dateiname statt eines Verzeichnisses angegeben?
  // Dateiname und Verzeichnis trennen
  $showImageFilename = basename(REAL_GALLERY_DIRECTORY);
  $realGalleryDirectory = dirname(REAL_GALLERY_DIRECTORY);
} else {
  $realGalleryDirectory = REAL_GALLERY_DIRECTORY;
}

  if (!is_dir($realGalleryDirectory))
  error('Galerie-Pfad ist kein Verzeichnis', $realGalleryDirectory);


// Galerie-Basis-Pfad aus Galerie-Verzeichnis entfernen.
if (strpos($realGalleryDirectory, REAL_GALLERY_BASE_PATH) === 0) {
  $galleryDirectory = DIR_PATH.rtrim(substr($realGalleryDirectory, strlen(REAL_GALLERY_BASE_PATH)), '/') . '/';
}
else {
  echo "ELSE: realGalleryDirectory: ", $realGalleryDirectory;
  trigger_error('Galerie-Verzeichnis außerhalb des DocumentRoot.', E_USER_ERROR);
}

$images = array();
foreach (glob($realGalleryDirectory . '/*', GLOB_NOSORT) as $filename) {
  if ($imageInfo = @getimagesize($filename)) {
    $images[basename($filename)] = $imageInfo;
  }
}
uksort($images, 'strnatcmp');

if (!isset($showImageFilename)) {
  reset($images);
  $showImageFilename = key($images);
}

// Erzeuge die HTML-Seite aus dem Template.
echo createHtmlFromTemplate(TEMPLATE_FILENAME, $images, $galleryDirectory, $showImageFilename);

[1] Vielleicht bringst Du Verbesserungen!

Also an dieser Stelle erneut vielen Dank für das Skript! Dass ich solange gebraucht habe, die paar Änderungen einzubauen, hat damit zu tun, dass ich in der common.php mit diesen ganzen Pfadangaben und -manipulationen nicht durchgeblickt habe, und mir alles mittels echo ausgeben lassen musste. Dann, wie erwähnt, musste ich bei ca. 5 oder 6 Funktionen suchen, was diese bewirken - lediglich mit substr() war ich einigermaßen vertraut ;)

############################################################ Und nun für die künftigen Archivleser, alles zusammengefaßt!

Ziel war es, eine einfache JavaScript-Bildergalerie zu bauen - auf Wunsch des OP mit Thumbnails zum Anklicken und Buttons zum Vor- und Zurückblättern.

Die einfache Bildergalerie ist hier: http://www.atomic-eggs.com/z_testdir/html/gallery.html

CSS und JavaScript: http://www.atomic-eggs.com/z_testdir/files/gallery.css http://www.atomic-eggs.com/z_testdir/html/gallery.js

Wer nur eine Bildergalerie für seine Site braucht, kann sich davon inspirieren lassen.

Die Galerie hat aber den Nachteil, dass für Besucher ohne JavaScript die Bilder »standalone« im Browser angezeigt werden. Der Besucher muss zur Galarieseite zurückblättern, um weitere Bilder anzuschauen.

Und wer wie der OP Fotograf ist, und sicher mehrere Galerien vorstellen möchte, wird es sehr schnell satt haben, die vielen Thumbs händisch im Code zu notieren. Computer sind dazu da, sich die Arbeit leichter zu machen, dafür muss man sich einmal anstrengen, entsprechende Automatismen zu schreiben, die man später immer wieder verwenden kann.

So entstand die Galerie mit Perl. Diese Galerie wird komplett anhand einer Template-Datei serverseitig generiert. Das Perl-Skript liest das jeweilige Verzeichnis ein, listet die darin enthaltenen Bilddateien (hier: .jpg) auf, generiert in einer Schleife die Verlinkung der Thumbnails im entsprechenden DIV-Element.

Ist JavaScript aktiv, bietet die Galerie die selben Funktionen wie die »einfache, statische« Version. Ist JavaScript deaktiviert, kann kein »onclick«-Event stattfinden, der Linkziel wird stattdessen aufgerufen und dieser lautet wie ganz oben im Posting:

/scriptverzeichnis/gallery.pl?path=/galerienverzeichnis/galerie1/bild10.jpg

Das Skript empfängt den Parameter, zerlegt in seinen Bestandteilen, und generiert die Seite neu mit dem entsprechenden Bild (hier Bild10.jpg) im Anzeige-DIV.

Untereinander werden die Galerie ähnlich verlinkt - halt ohne Bilddateinamen:

/scriptverzeichnis/gallery.pl?path=/galerienverzeichnis/galerie3

Das Skript merkt sich - hier ist es egal, ob die Galerien mit oder ohne JavaScript besucht werden -, dass kein Dateinamen im Parameter vorhanden ist, und generiert die Galerieseite mit den Bilder aus dem Verzeichnis »galerie3«.

Dank dedlfix wurde das Ganze nun um die PHP-Version erweitert, die nach dem selben Prinzip funktioniert: Empfangen des Paramters, Verzeichnis einlesen, Thumbs-Verlinkungen generieren etc...

Die PHP- und die Perl-Variante nutzen die selbe Templatedatei (hier wurde sogar dafür gesorgt, dass PHP oder Perl je nach Version oben rechts (in roter Farbe) eingeblendet wird) und die selbe JavaScript-Datei (die aber im Vergleich zur externen JavaScript-Datei der »statischen« Galerie wegen der anderslautenden Linkzielen geändert werden musste):

• Perl-generierte JavaScript-Galerie • PHP-generierte JavaScript-Galerie

zum Testen mit und ohne JavaScript!

-> Forstezung nächste Antwort...

Viele Grüße aus Frankfurt/Main, Patrick

--
_ - jenseits vom delirium - _