Bildergalerien mit Quanta erstellen

Fotos im Netz

Elisabeth Bauer

Musste man früher ein Homepage-Paket noch extra bezahlen, liefert heute fast jeder Provider zum Internet-Anschluss kostenlosen Webspace mit -- ideal, um seine mit der Digitalkamera geschossenen Bilder Freunden und Bekannten zu präsentieren. Zum Erstellen einer Bildergalerie bietet sich unter Linux der HTML-Editor Quanta an. WYSIWYG beherrscht er zwar nur begrenzt, doch über komfortable Dialoge können auch HTML-Anfänger ansehnliche Seiten gestalten.

Vorbereitungen

Mandriva Linux spielt Quanta bereits bei der Installation ein, Nutzer von Suse Linux installieren das Programm über YaST nach. Starten Sie das Konfigurations-Tool und wählen Sie Software installieren oder löschen. Mit dem Suchbegriff kdewebdev finden Sie das Paket, in dem Quanta steckt. Setzen Sie bei den Suchergebnissen ein Häkchen vor kdewebdev3 und klicken Sie auf Übernehmen, damit YaST die Software auf die Festplatte kopiert.

Sie starten den HTML-Editor mit dem Befehl quanta, den Sie in ein mit [Alt-F2] geöffnetes Schnellstartfenster eingeben. Eine eventuell angezeigte Warnung, dass einige Erweiterungen fehlen, können Sie ignorieren -- Quanta funktioniert trotzdem.

Um mit dem Zusammenstellen der Bildergalerie nicht zu viel Arbeit zu haben, treffen Sie zunächst einige Vorbereitungen: Legen Sie im Konqueror ein Verzeichnis an, dessen Name weder Umlaute noch Leerstellen enthält, z. B. galerie. Kopieren Sie nun alle Fotos, die Sie auf Ihrer Homepage präsentieren wollen, in diesen Ordner. Achten Sie darauf, dass in den Dateinamen der Bilder keine Umlaute oder Leerzeichen vorkommen. Um den Besuchern Ihrer Homepage lange Ladezeiten zu ersparen, skalieren Sie die Bilder gegebenenfalls auf eine für Bildschirmauflösungen geeignete Größe.

Ein Ausflug in die Shell

Mit ein wenig Shell-Akrobatik sparen Sie sich die langweilige Arbeit, das Inhaltsverzeichnis und die für die Galerie benötigten Vorschaudateien von Hand zu erzeugen. Starten Sie eine KDE-Konsole und wechseln Sie mit cd galerie in das Foto-Verzeichnis. Der Bandwurmbefehl im Kasten Inhaltsseite erzeugen legt die Datei index.html mit einem Eintrag für jedes Bild im Verzeichnis galerie an.

for i in *; do echo \ 
"<td><div class=\"vorschau\"><a href=\"$i\"><img src=\"${i%.*}_thumb.jpg\">\ 
</a><div class=\"beschreibung\">$i</div></div></td>" \ 
>> index.html ; done

Was so kryptisch aussieht, sorgt später dafür, dass Sie alle Bilder auf einmal formatieren und einzeln mit einer Bildunterschrift versehen können. Mit for leiten Sie eine Schleife ein [1], die jede Datei im Verzeichnis der Reihe nach abarbeitet. Der Befehl echo schreibt HTML-Anweisungen in die Datei index.html, die später das Inhaltsverzeichnis der Bildergalerie wird. Das <img>-Tag bindet jeweils eine Vorschau ein, die ein Link auf das Originalbild ist.

Nun fehlen nur noch die Vorschaubilder: Statt dafür ein Grafikprogramm zu bemühen, nutzen Sie convert aus dem ImageMagick-Paket [2] mit einer weiteren for-Schleife:

for i in *.jpg; do convert $i -geometry 250x250 -quality 90 ${i%.*}_thumb.jpg ; done

Von jeder Datei im Verzeichnis erzeugt der Befehl convert eine verkleinerte Vorschau mit der Endung _thumb.jpg. Über 250x250 bestimmen Sie die Größe der Thumbnails. Je nachdem, ob das Bild im Hoch- oder Querformat vorliegt, skaliert convert es auf 250 Bildpunkte in der Höhe oder in der Breite. Wollen Sie kleinere oder größere Bilder verwenden, ändern Sie diesen Wert.

Das HTML-Grundgerüst

In Quanta öffnen Sie nun die auf der Kommandozeile erzeugte Datei index.html. Sie enthält bereits HTML-Tags, welche die Bilder aus Ihrem Verzeichnis als Vorschau einbinden und auf die Originaldateien verlinken. Jedes Bild steckt in einer Tabellenzelle, die Sie jetzt noch um einen Rahmen ergänzen. Markieren Sie den kompletten Text und wechseln Sie in der Werkzeugleiste zum Reiter Tabellen. Ein Klick auf das zweite Symbol von links öffnet Quantas Tabellendialog: Dort legen Sie fest, wie Quanta die Tabelle formatiert (Abbildung 1).

Im Feld width stellen Sie die Breite ein, hier 100%. Cell spacing bezeichnet den Abstand zwischen Tabellenzellen, Cell padding den Abstand des Inhalts einer Zelle zum Zellenrand. Ein guter Wert für beide Felder ist 10. Aus dem Drop-down-Menü Background color wählen Sie die Hintergrundfarbe der Tabelle. Sobald Sie auf OK klicken, fügt Quanta den HTML-Code ein.

Abb. 1: Quanta hält einen Dialog zum Erstellen von Tabellen bereit.

Nun haben Sie zwar Rahmen und Zellen, Quanta weiß aber noch nicht, wie viele Bilder es in einer Zeile darstellen soll. Damit auch Benutzer mit geringer Bildschirmauflösung etwas von Ihrer Fotogalerie haben, empfiehlt es sich, maximal drei bis vier Bilder nebeneinander zu stellen. Je nachdem, für wie viele Sie sich entschieden haben, markieren Sie jeweils drei oder vier Zellen -- eine Zelle beginnt mit <td> und endet mit </td> -- und fügen das Tag für eine Zellenreihe ("Row") ein. In der Werkzeugleiste dient dazu das Symbol mit der durchgezogenen grünen Tabellenreihe rechts. Setzen Sie die übrigen Bilder ebenfalls in <tr>-Tags.

Dem Inhaltsverzeichnis fehlt nun nur noch der HTML-Kopf, den Sie ergänzen, indem Sie am Anfang der Datei Folgendes eintragen:

<html>
<head>
<title>Meine Galerie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>

Damit definieren Sie den Titel, den Sie in der Fensterleiste des Browsers sehen, und teilen dem Browser mit, welche Zeichenkodierung er zur Darstellung verwenden soll (utf-8). Von einigen wenigen Ausnahmen abgesehen, besteht jede HTML-Anweisung aus einem öffnenden und einem schließenden Tag. So grenzen Sie hier den HTML-Kopf mit den Tags <head> und </head> ein. Am Ende des Dokuments schließen Sie die HTML-Tags, die Sie oben geöffnet haben:

</body>
</html>

Die Tags müssen Sie in Quanta nicht komplett ausschreiben: Sobald Sie die ersten Zeichen getippt haben, vervollständigt sie das Programm automatisch und fügt das passende schließende Tag ein. Das Grundgerüst für Ihre Galerie ist damit fertig. Speichern Sie die Datei und klicken Sie auf das Auge-Symbol in der Werkzeugleiste, um die Seite in der in Quanta integrierten Vorschau zu betrachten. Halten Sie den Vorschau-Button länger gedrückt, präsentiert der HTML-Editor ein Auswahlmenü, über das Sie die Galerie in verschiedenen Browsern wie Konqueror, Firefox oder Opera öffnen können. Machen Sie sich darauf gefasst, dass das Ergebnis eventuell in jedem Browser etwas anders aussieht -- deshalb prüfen erfahrene Web-Designer ihre Seiten grundsätzlich mit allen gängigen Browsern.

Aufgepeppt

Noch sieht die Galerie reichlich langweilig aus. Nach dem <body>-Tag verpassen Sie ihr eine Überschrift. Dazu geben Sie unter dem body-Tag den Text ein, markieren ihn und klicken im Reiter Stil auf das Icon H1. Dadurch wird der Text zur Hauptüberschrift. Auch eine Fußzeile mit dem Erstellungsdatum, Ihrem Namen, Copyright und Ihrer Mail-Adresse macht sich gut, falls jemand Sie wegen der Bilder kontaktieren möchte. Vor dem schließenden </body>-Tag fügen Sie mit einem Klick auf das Kalenderblattsymbol im Reiter Andere Datum und Uhrzeit ein. Über das Briefsymbol im selben Reiter ergänzen Sie einen Mailto-Link mit Ihrer E-Mail-Adresse, der beim Anklicken automatisch ein Mail-Programm öffnet. Hier schlampt Quanta jedoch: Vor den schließenden Tag </a> müssen Sie im Quellcode selbst noch den Titel, unter dem der Link erscheint (etwa Kontakt), ergänzen. Mit &copy; fügen Sie ein Copyright-Symbol ein (Abbildung 2).

Abb. 2: In die Fußleiste setzen Sie Kontaktinformationen und das Erstellungsdatum der Seite.

Zwischen <div class="beschreibung"> und </div> hat der Shell-Befehl die Dateinamen eingefügt. Dort können Sie nun für jedes Bild eine schönere Beschreibung ergänzen (Abbildung 3). Wer inmitten der HTML-Tags die Übersicht verloren hat, darf sich an dieser Stelle über Quantas eingebauten WYSIWYG-Editor freuen. Komplette Websites damit zu gestalten, ist zwar kaum möglich, aber zum Ändern und zur Eingabe von Text eignet er sich schon ganz passabel. Über das Symbol VPL-Editor in der Werkzeugleiste schalten Sie Quanta in den WYSIWYG-Modus. Per Klick auf Quellcode-Editor links daneben wechseln Sie zurück zur Quelltextansicht. Über den Button rechts teilen Sie das Fenster, so dass es sowohl die Quellcode- als auch die WYSIWYG-Ansicht darstellt.

Abb. 3: Mit der Tabelle für die Bildergalerie und den Beschreibungstexten steht das Grundgerüst der Seite.

Statt jetzt jede Bildunterschrift einzeln mit HTML-Tags zu formatieren, nutzen Sie so genannte CSS-Anweisungen. Platzieren Sie den Cursor über dem Tag </head>, das den HTML-Kopf abschließt, und fügen Sie dort über das Symbol Tt im Reiter Andere einen Bereich für CSS-Anweisungen ein. Setzen Sie den Cursor zwischen das soeben eingefügte <style type="text/css"> und </style> und klicken Sie im Reiter Stil auf das Symbol CSS. Quanta präsentiert den Dialog für CSS-Anweisungen.

Im Reiter Klassen tragen Sie im Feld Selektor hinzufügen die Klasse des Beschreibungsfelds, beschreibung, ein und ergänzen es über Hinzufügen. Ein Doppelklick auf den neuen Eintrag öffnet einen weiteren Dialog, in dem Sie nun die Stilanweisungen für Ihre Bildunterschriften auswählen. Interessant sind zum Beispiel die Anweisungen unter font. Mit font-family wählen Sie die Schriftart aus. Markieren Sie eine Anweisung links, erscheint auf der rechten Seite oben ein Feld, aus dem Sie die passenden Werte auswählen (Abbildung 4).

Abb. 4: Die Schriften für die Bildunterschriften wählen Sie per Menü aus -- Quanta generiert daraus die passende CSS-Anweisung.

Da Sie nicht davon ausgehen können, dass jeder Besucher Ihrer Homepage dieselben Schriften wie Sie installiert hat, empfiehlt es sich, vor allem generelle Stile wie sans-serif oder serif aus dem unteren Feld zu verwenden. Im Feld rechts unten sehen Sie, welche Angaben Quanta übernehmen wird. Klicken Sie auf font-size, erhalten Sie ein Feld zum Einstellen der Schriftgröße. Die Textfarbe setzen Sie über color. Rechts oben erscheint dabei ein Palettensymbol, über das Sie zum KDE-Farbwahldialog gelangen. Zuletzt legen Sie mit der Anweisung text-align die Ausrichtung der Beschreibungen fest. Wenn Sie alle Dialog mit einem Klick auf OK schließen, fügt Quanta die CSS-Anweisungen ins Dokument ein -- allerdings mit einem kleinen Fehler: Damit Browser die Stilangabe als solche erkennen, setzen Sie vor beschreibung einen Punkt (Abbildung 5).

Abb. 5: Per CSS-Anweisung definieren Sie am Anfang Ihrer Datei Formate wie Schriftgröße und Textausrichtung.

Wer sich mit dem Schreiben von CSS-Dateien auskennt, kann sie direkt ins Dokument einfügen. So umranden Sie die Tabellenzellen z. B. mit einem hellgrauen Rahmen und zentrieren die Bilder:

td {
 border: 1px solid #aaa;
 text-align: center;
}

Soll die Tabelle ohne Kanten in den Hintergrund integriert werden, setzen Sie die allgemeine Hintergrundfarbe der Seite auf den Farbwert, den Sie vorher für die Tabelle ausgewählt haben:

body {
 background-color: #fff0d3;
}

Das Ergebnis ist eine ansprechende, individuell gestaltete Fotogalerie. Wenn Sie bisher nur mit HTML-Editoren gearbeitet haben, die einen WYSIWYG-Modus bieten, müssen Sie eventuell erst ein wenig herumtüfteln, um eine Homepage nach Ihren Vorstellungen zu gestalten. Eine ausgezeichnete HTML-Referenz, die sich als Nachschlagewerk und Tipp-Fundus eignet, finden Sie unter [3]. (amü)

<link rel="stylesheet" type="text/css" href="stil.css">

<link rel="stylesheet" type="text/css" href="../stil.css">

Infos

[1] Artikel über for-Schleifen: Hans-Georg Eßer, "Unendlicher Loop", EasyLinux 04/2006, S. 90 -- auf der Jahres-CD [2] Artikel über Bildbearbeitung auf der Kommandozeile: Heike Jurzik, EasyLinux 06/2006, S. 89 f. -- auf der Jahres-CD [3] Selfhtml: http://de.selfhtml.org/

Dieser Online-Artikel kann Links enthalten, die auf nicht mehr vorhandene Seiten verweisen. Wir ändern solche "broken links" nur in wenigen Ausnahmefällen. Der Online-Artikel soll möglichst unverändert der gedruckten Fassung entsprechen.