Extension imgpop

Die Extension „imgpop“ bettet ein Bild mit Formatvorlage auf der Seite ein, das per Klick vergrößert und einem weiteren Klick wieder verkleinert wird.

GitHub-Repository:

imgpop-Extension

Diese Erweiterung verwendet dafür ausschließlich CSS, das in einer beiliegenden Datei angepasst werden kann. Die Vorgabe gewährleistet (in den meisten Fällen) die Funktion „out of the box“. Das Ziel war die Vermeidung der dafür in vielen Systemen üblichen „dicken“ Javascript-Pakete oder Ansätze, die mit kleinen und großen Bildern arbeiten.

Statt sich auf Grafikbibliotheken auf dem Server zu verlassen, die geeignete Dateien für die Anzeige generieren, ist bei imgpop Eigenleistung (nennen wir es „selbst denken“) sinnvoll. Die Extension nimmt ein Bild so wie es ist für alle Darstellungen. Es wird keine Neuberechnung des Bildes durchgeführt. Es liegt in der Verantwortung des Bild-Erstellers, welche Auflösung das Bild maximal haben muss.

Bilder werden (in den Standard-Einstellungen) keinesfalls größer als die Originalgröße. Dabei ist es durchaus prüfenswert, ob in dieser Größe alles „messerscharf“ sein muss, oder Qualitätseinschränkungen hinnehmbar sind. Denn „ein bisschen schärfer“ bedeutet fast immer „deutlich größere Datei“. Sehr effizient ist in den meisten Fällen das Format webp, das bei vergleichbarer Qualität fast immer deutlich kleinere Dateien zur Folge hat, als beispielweise jpg oder png.

 [imgpop ([/media/images/]Bilddatei)] 

ist die minimalistische Nutzung, mit der die Standardvorgaben für die Positionierung und Anzeige verwendet werden. Ausgangsverzeichnis ist der media/images-Ordner der Installation, von dem aus ggf. relativ referenziert werden muss.

Durch weitere Parameter lässt sich die Ausgabe auf der Seite beeinflussen:

 [imgpop "Bildadresse" "Untertitel" "ID" "Formatvorlage"]

Für die vergrößerte Darstellung kann ein individueller Untertitel mitgegeben werden. Fehlt er, greift ein dreistufiger Vorgang:

  • Es wird nach einer Textdatei im Bildverzeichnis mit dem Bildnamen gesucht und – falls vorhanden – verwendet (wie hier im ersten Beispiel-Bild).
  • Bei JPG-Dateien wird nach einem exif-Kommentar gesucht, falls keine Datei gefunden wurde.
  • Es wird der in der Sprachdatei hinterlegte Standardtext verwendet.

Eine explizit mitgegebene ID sorgt für den sicheren Betrieb mehrerer imgpop's auf einer Seite. Diese ist für den Rücksprung beim Verkleinern zuständig. Fehlt sie, wird der Dateiname verwendet, was meistens, jedoch keineswegs zwingend für Eindeutigkeit sorgt, wenn aus verschiedenen Verzeichnissen gleichnamige Bilder verwendet werden. Das kann zu fehlerhaften Anzeigen führen.

Mit der Formatvorlage lässt sich die Positionierung, Größe, etc. des Bildes auf der Seite beeinflussen. Dafür wird eine in der CSS-Datei des YELLOW-Themes definiertes Format übergeben. Es können sogar mehrere, durch Leerzeichen getrennte sein – ob das zu einem befriedigenden Ergebnis führt, hängt von der Stil-Definition ab.

Bei älteren Browsern fehlt die Unterstützung für animiertes CSS. Weil die Nutzung veralteter Browser objektiv betrachtet sträflicher Leichtsinn ist und aktuelle Versionen kostenfrei zur Verfügung stehen, gibt es keinen Grund für eine Unterstützung dieser alten Gurken.

Zurück zu Extension-Übersicht

Die Vorlage für das Bild stammt von Pixabay.