Bildergalerie: gallery

Dieses Modul ist eine Erweiterung des Bildvergrößerers, aufgrund der in der Galerie erzeugen Navigation wird die Vergrößerung nur durch Anklicken des Bildes oder Untertitels geschlossen.

Konzept

Es werden alle Bilder aus einem Verzeichnis angezeigt.

Diese können unterschiedliche Formate haben, Titeltexte können optional in einer Textdatei hinterlegt werden. Fehlt ein Bildtitel, wird „Bild x“ angezeigt, wobei „x“ der Index ist, der ebenfalls auf den Miniaturen angezeigt wird.

Der Index ist der Idee geschuldet, dass damit eine zweifelsfreie Identifikation des Bildes möglich ist, auf das sich z.B. eine Nachfrage bezieht.

Alle Bilder werden als Original geladen.

Daher ist die Anzahl der Bilder, sowie deren Dateigröße sehr relevant. Abhängig von der Summe aller Dateigrößen, der Anzahl Zugriffe, sowie der verfügbaren Bandbreite, kann der Aufbau der Seite entsprechend lang dauern.

Die Galerie versieht deshalb die Bilder mit der Funktion loading=lazy, das (in modernen Browsern) das Nachladen der Bilder steuert: Sie werden erst geladen, sobald sie in den sichtbaren Bereich des Fensters kommen.

Geschwindigkeit

Eine „Test-Galerie mit über 200 Bildern in Größen bis ca. 1400 x 1400 wurde beim Herunter rollen ohne erkennbare Verzögerung auf die Seite geladen.

Aufruf

[gallery PFAD SPALTE ENDLOS]

Parameter

PFAD

Listet alle Bilder im PFAD vom Typ ⟨webp|jpg|gif|png|svg⟩ in der Reihenfolge der aufgezählten Dateitypen alphabetisch auf.

Es gibt keine Filterfunktion; alle Bilder im Pfad werden angezeigt.

SPALTE

Spaltenbreite (% der verfügbaren Breite an dieser Stelle).

Vorgabe sind 20%. Die Bilder werden mit entsprechenden Stil-Vorlagen proportional skaliert.

ENDLOS

Vorgabe 1: Es werden Navigationspfeile erzeugt, die vom Ende zum Anfang und umgekehrt navigieren.

Mit 0 gibt es keinen Pfeil am Anfang/Ende.

Bildbeschreibung

Wenn im Verzeichnis eine Datei texte.ini liegt, können den Bildern Untertitel zugeordnet werden:

bildateiname(ohne Extender)="Titel"
…

• Gleichnamige Bilder mit unterschiedlichen Extendern bekommen den gleichen Untertitel.
• Fehlen Bilder in der Liste, wird »Bild x« als Titel ausgegeben. Die Bilder werden in der Miniatur nummeriert, es kann also ggf. darauf verwiesen werden.
• Die Galerie erzeugt generische Referenz-IDs für die Vergrößerung. Auf einer Seite kann deshalb nur eine Galerie verwendet werden.

Das Modul

Mit PHP wird der erforderliche Seiten-Code erzeugt. Für die Animation müssen die Stile in der dem Layout zugewiesenen Style-Sheet vorhanden sein. Siehe Stilvorlage der Hilfe, Abschnitt /* gallery */.

gallery pfad spalte=20 endlos=1
<?php
// pfad relativ, Spalte in % zur verfügbaren Gesamtbreite
$dir = '§§§pfad§§§';
$endlos = §§§endlos§§§;
$texte = $_SERVER["DOCUMENT_ROOT"].'§§§pfad§§§texte.ini'; // §pfad endet mit / (muss…)
$files = glob($_SERVER["DOCUMENT_ROOT"] . $dir . '*{svg,webp,png,jpg,gif,avif}', GLOB_BRACE);
if (count($files)>0) {
	file_exists($texte) ? $besch = parse_ini_file($texte, false, INI_SCANNER_RAW) : $besch = [];
	$i = 1;
	$h = count($files);
	$gallery = '<small class="gi">Bild zum Vergrößern anklicken, zum Schließen Bild anklicken.</small>' . PHP_EOL;
	$gallery .= '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(§§§spalte§§§%,1fr));grid-gap:0.3rem;justify-content:center;align-content:center">' . PHP_EOL;
	foreach ($files as $filename){
	   $tx = pathinfo($filename,PATHINFO_FILENAME);
		$gallery .= '<div class="gall">' . PHP_EOL;
		$gallery .= '<a class="iboxx" href="#gl'.$i.'"><img loading=lazy src="'.$dir . basename($filename) .'" title="Zum Vergrößern anklicken" /><span class="gallp">'.$i.'</span></a>' . PHP_EOL;
		$gallery .= '<div class="imgbox"  id="gl'.$i.'">';
		$gallery .= '<span class="glo"><span class="imag">'.$i.'</span></span>' . PHP_EOL;
		if (($i==1)&&($endlos==1)){
			$gallery .= '<a title="rückwärts" href="#gl' . $h . '"><div class="gzur"></div></a>';
		}
		if ($i>1){
			$gallery .= '<a title="rückwärts" href="#gl'. ($i - 1) .'"><div class="gzur"></div></a>';	
		}
		if ($i<count($files)){
			$gallery .= '<a title="vorwärts" href="#gl' . ($i + 1) . '"><div class="gvor"></div></a>';
		}
		if (($i==$h)&&($endlos==1)){
			$gallery .= '<a title="vorwärts" accesskey="." href="#gl1"><div class="gvor"></div></a>';
		}
		$gallery .= '<a href="#_"><img loading=lazy src="'. $dir . basename($filename) .'"><span class="imgboxtitle">'.(isset($besch[$tx]) ? strip_tags($besch[$tx]) : 'Bild ' . $i).'</span></a></div></div>' . PHP_EOL;
		$i++;
	}
	$gallery .= '</div>' . PHP_EOL;
}
else {
	$gallery = '<p><strong><mark>Keine Bilder gefunden.</mark></strong></p>';
}
echo $gallery."\n";
?>

Beispiel

[gallery /media/bilder/ 13]

Erzeugte Ausgabe

­

1

1

Bild1…Bild5 sind SVG-Grafiken

2

2

Bild 2

3

3

Bild 3

4

4

Bild 4

5

5

Bild 5

6

6

Das NoSi-Logo als PNG — weil klein, bleibt es klein.

7

7

Das ist ein (sinnfrei) animiertes Gif-Bild