Bildzoom: imgmag

Erstellt am 30.06.2024 Lesedauer 2 - 3 Min.

Auf dieser Seite

Aufruf
Das Modul
Das CSS
Verarbeitung
Beispiel

Erzeugte Ausgabe

Dieses Modul entnimmt ein Bild dem Layout und vergrößert mittels CSS bis maximal zur Originalgröße durch Anklicken der Lupe (oder des Bildes). Neben dem ALT-Tag kann individuell ein Title und – für den Zomm – ein Untertitel vergeben werden. Durch Anklicken eines Schließen-Buttons (oder einer beliebiger Stelle außerhalb des Bildes) wird das Bild wieder ins Layout eingefügt.

Dieses Modul setzt geeignete Stilvorlagen voraus, die Lösung ist ausschließlich CSS-basiert.

Siehe Stilvorlage der Hilfe, Abschnitt /* ImgMag */.

Es gibt eine ergänzende Beschreibung für dieses Modul.

Aufruf

[imgmag HREF ALT TITEL UNTERTITEL ID CSS ]

HRFE: Die Datei mit Pfad relativ zur Root der Domain

ALT: Der ALT-Tag des Bildes, der immer angegeben werden sollte.

TITEL: Ein (optionaler) Bildtitel, der ggf. aus dem ALT-Tag generiert wird

UNTERTITEL: Ein (optionaler) alternativer Untertitel für die Vergrößerung, der auch HTML-Code enthalten kann. Er wird ggf. aus dem ALT-Tag generiert.

ID: Eine eindeutige ID für Querverweise. Der Default ist eine generische (s. Beispiel)

CSS: (Optionale) Formatklasse(n) zur Ausrichtung des Bildes

Wird nur die Bildquelle angegeben, werden die im Modul vorgegebenen Standards gesetzt.
Text (mehr als ein Wort) muss mit " umfasst werden.
Sollen mehrere Format-Klassen verwendet werden, gilt das analog (z.B. "right max30").
Die Vergrößerung erfolgt ausschließlich mit CSS, das in der Stil-Vorlage vorhanden sein muss.
Der Untertitel kann mit der Insert-Funktion übergeben werden.

Das Modul

Das Modul fügt einen HTML-Abschnitt ein, der mittels CSS den gewünschten Effekt erzeugt.

imgmag "href=datei" "Alt=Keine Bildbeschreibung verfügbar" "Titel=§§2" "ID=imag%id%" "css=right" "Untertitel=§§2"
<div class="imgmagbox §§§css§§§">
<img id="§§§ID§§§" class="imgmag" loading="lazy" src="§§§href§§§" alt="§§§Alt§§§" title="§§§Titel§§§" tabindex="0">
<a class="imgmagauf" href="#§§§ID§§§">🔍</a><div class="imgmagbg"></div><div class="imgmagzu">&#10006;</div>
<div class="imgmagutxt">
§§§Untertitel§§§
</div>
</div>

Bitte beachten: Das Modul verwendet die „Parameter-Verweis“ sowohl für den Titel als auch den Untertitel. Hierbei muss beachtet werden, dass der Platzhalter bereits vor der Verwendung mit dem gewünschten Wert aus einem vorangegangenen Parameter gefüllt worden sein muss. Maßgeblich für den Inhalt ist der übergebene Inhalt im Markdown. Für eindeutige IDs wird in der Vorgabe mit %id% eine generische erzeugt (s. Moduldefinition).

Das CSS

.imgmagbox{position:relative;max-width:40%;padding:0;display:inline-block;padding-left:1em;}
.imgmagbox img{max-width: 100%;max-height: 100%;animation: none;filter:none;}
.imgmagbg,.imgmagutxt,.imgmagzu{display:none;}
.imgmagauf{position:absolute;display:table-cell;height:2rem;width:2rem;text-align:center;vertical-align:middle;border-radius:50%;background:white;border:0.1rem solid white;font-size:1.2rem;right:1rem;top:1rem;color:black;}
.imgmag:focus{position:fixed;max-width:95vw;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}
.imgmag:focus ~ .imgmagbg{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.8);z-index:1;}
.imgmag:focus ~ .imgmagauf{display:none;}
.imgmag:focus ~ .imgmagzu{position:fixed;display:table-cell;height:5rem;width:5rem;font-size:3.5rem;line-height:1.2;text-align:center;vertical-align:middle;border-radius:50%;background:black;border:0.1rem solid white;right:2vw;top:2vw;color:white;z-index:5;}
.imgmag:focus ~ .imgmagutxt{position:fixed;display:block;width:94vw;bottom:1vh;left:2vw;padding:1vw;background-color:white;text-align:center;z-index:4;}

Die Stile müssen an einigen Stellen an die jeweilige Stilevorlag angepasst werden. Für die OSE-Webseite, z.B. wird die *:focus-Animation für das Bild deaktiviert, der „Schließer“ an die gewählte Schriftgröße angepasst, u.a.

Verarbeitung

Es werden keine Dateiberechnung durchgeführt. Das übergebene Bild wird „wie es ist“ in der Ansicht durch den Browser skaliert.

Das Bild wir maximal auf die gespeicherte Originalgröße vergrößert. Mit Blick auf die Dateigröße sollten die Diemensionen den Notwendigkeiten angepasst werden.

Auch hier gilt das bei imgpop Gesagte.

Beispiel

[imgmag "/media/bilder/bild1.svg" "Ein Beispiel-Bild" "§§2" "meinID" "right" "§§2"]  Weit hinten, …
[imgmag "/media/bilder/bild1.svg" "Ein Beispiel-Bild" "§§2" "imag%id%" "right" "$$$ insert Beispielinclude $$$ "]  Weit hinten, …

Im zweiten Absatz wird ein Untertitel mit HTML-Auszeichnung als Insert übergeben. Damit die ID eindeutig ist, wird sie von OSE generiert (%id% wird in eine achtstellige GUID übersetzt).

Erzeugte Ausgabe

🔍

✖

Ein Beispiel-Bild

Weit hinten, hinter den Wortbergen, fern der Länder Vokal und Konsonant, leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste der Semantik, einem Ausläufer des Phonetik-Ozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regularien. Es ist ein paradigmatisches Land, in dem Besuchern Mustertexte füllende Satzteile in den Mund fliegen. Selbst die allmächtige Interpunktion muss sich in die Blindtexte einfügen. Ein ausfüllendes, orthografisch korrektes Wortgebilde.

🔍

✖

Dieser Untertitel wurde in OSE als define → insert übergeben. Das ermöglicht eine sehr bequeme Verwendung von HTML-Auszeichnung.

Bitte beachten

Querverweise können zwar definiert werden, sind jedoch „unerreichbar“:

Das Bild verliert den Fokus, wodurch es ins Layout zurückgesetzt und der Untertitel geschlossen wird, bevor der angeklickte Link an den Browser übergeben werden kann.