Bilder

Die Darstellung von Bildern ist zwar nicht kompliziert. Wenn man aber mehr als ein Paar Bilder zeigen will, kann das auch ziemlich mühsam werden, weil man für jedes Bild wiederkehrende Operationen ausführen muss.

Ausgangspunkt ist ein Bild, zum Beispiel von einer Digitalkamera. Egal, um welches Kamera-Fabrikat es sich auch handelt, diese Bilder sind für eine Präsentation im Web ungeeignet. Sie sind viel zu groß und hätten eine viel zu große Ladezeit. Man muss daher diese Bilder immer verkleinern und zwar auf zwei Formate:

ein Miniaturbild (thumb, z.B. 200px), das einen Eindruck vermitteln soll und
ein Vorschaubild (preview, z.B. 600px), das sich öffnet sieht, wenn man auf das Miniaturbild klickt.

Um die Übersicht in den vielen Bildern nicht zu verlieren, muss man sich um eine gewisse Ordnung in der Benennung und bei der Speicherung kümmern.

Ein Bild wird etwa so kodiert:

<div>
    <a href="/testfolder/.images/z_p_oh2.jpg">
        <img src="/testfolder/.images/z_t_oh2.jpg" alt="Geburtstagsfeier">
    </a>
</div>

wobei das Original-Bild oh2.jpg, das Miniaturbild z_t_oh2.jpg und das Vorschaubild z_p_oh2.jpg heißt. Diese beiden zusätzlich hergestellten Bilder befinden sich in einem Ordner .images. Dass sich das Bild in einem div-Abschnitt befindet, hat zur Folge, dass vor und nach dem Bild jedenfalls ein Zeilenumbruch stattfindet.

Modul mod:image

Das Modul mod:image nimmt dem Benutzer die Vorgänge der Bildverkleinerung und Bildformatierung ab. Wird ein Bild mit diesem Modul angesprochen,

legt das Modul einen Ordner .images an
speichert dort die verkleinerten Versionen des Bildes mit dem Prefix z_t_ und z_p_ an
generiert den Kode für das Bild und verwendet auf Wunsch auch den zusätzlichen Light-Box-Kode

Das automatische Anlegen von Miniaturbild und Vorschaubild erfolgt aus Performancegründen nur beim ersten Aufruf. Wenn man danach das Miniaturbild vergößern möchte, muss man vorher diese Bilder im angelegten Ordner .images löschen.

Anwendung

<mod:image ID="Image5" runat="server"
Cap="Einzelndes Bild oh2.jpg ohne Lightbox, Width=400"
Width="400"
PathToImage="/testfolder/"
Image="oh2.jpg"></mod:image>

Konfiguration

Man kann in der Konfigurationsdatei web.config folgende Parameter konfigurieren:

<add key="Img_t" value="200"/>
<add key="Img_p" value="640"/>
<add key="Img_tp" value="z_t_"/>
<add key="Img_pp" value="z_p_"/>
<add key="Img_path" value=".images"/>