DIY-CMS: Galerie erstellen

Sonntag, 29. Mai 2016

Natürlich ist es lästig, eine Galerie von Hand zu erstellen, wo es dafür doch so viele tolle Fertigangebote gibt. Aber ehrlich: Es ist sooo einfach, dass es sich fast nicht lohnt, dazu einen eigenen Beitrag zu verfassen. Geschweige denn, dafür irgendwelche Scripte, Programme, oder was auch immer zu bemühen.

Die Hauptarbeit für eine Galerie - nämlich die Bilder auszuwählen und ggf. zu bearbeiten (ausschneiden, aufhellen, etc.) - kann dir sowieso niemand abnehmen. Und der Rest ist nicht so schlimm, wie es auf den ersten Blick erscheinen mag.

Die Bilder

Du hast eine Anzahl Bilder soweit fix und fertig vorbereitet, wie du sie in der Galerie haben möchtest. Diesen Bildersatz brauchst du zweimal:

Sinnvoll ist es, den Bildern eine einheitliche Bezeichnung zu geben nach dem Muster bild##.jpg - wobei ## für eine fortlaufende -zweistellige- Numerierung steht. Das kostenlose IrfanView macht die Umbenennung zusammen mit der Größenänderung auf einen Rutsch. Ein Wasserzeichen/Text wird dabei auf Wunsch auch gleich noch mit reingebastelt. Zur besseren Übersicht empfiehlt es sich, die Bilder in einem Galerie-Unterordner im Bilderverzeichnis zu speichern.

Die Übersichts-Seite

So etwas lässt sich sehr kompliziert gestalten, auch ohne irgendwelche Scripts: divs, Flexboxen, Listen, Tabellen - es gibt so viele Möglichkeiten! Ich habe mich für diese Lösung entschieden:


<p class="mitte">
 <a href="bild01.html">
  <img src="pics/galerie/bild_tn01.jpg" alt="Galerie"></a>
 <a href="bild02.html">
  <img src="pics/galerie/bild_tn02.jpg" alt="Galerie"></a>
 <a href="bild03.html">
  <img src="pics/galerie/bild_tn03.jpg" alt="Galerie"></a>
 <a href="bild04.html">
  <img src="pics/galerie/bild_tn04.jpg" alt="Galerie"></a>
 <a href="bild05.html">
  <img src="pics/galerie/bild_tn05.jpg" alt="Galerie"></a>
 <a href="bild06.html">
  <img src="pics/galerie/bild_tn06.jpg" alt="Galerie"></a>
 <a href="bild07.html">
  <img src="pics/galerie/bild_tn07.jpg" alt="Galerie"></a>
 <a href="bild08.html">
  <img src="pics/galerie/bild_tn08.jpg" alt="Galerie"></a>
 <a href="bild09.html">
  <img src="pics/galerie/bild_tn09.jpg" alt="Galerie"></a>
</p>

Ja, ernsthaft: Das Vorschau-Bild wird mit der Einzelseite verlinkt, das alles so oft untereinander, wie es eben Bilder hat. Drum rum ein Absatz mit der Formatierung text-align: center (das verbirgt sich hinter .class mitte). Damit ist die Übersichtsseite schon so gut wie fertig.

Ich habe hier noch ein Blättermenu - das blättert bei der Galerie einfach nur durch die Galerie. Also entsprechend die Links auf der Übersichtsseite anpassen für das letzte (zurück) und das erste Bild (vor). Titel noch anpassen, ggf. ein paar Worte zur Galerie verlieren. Aber dann ist diese Seite wirklich fertig.

Die Einzelseiten

Die Übersichtsseite gleich nochmal speichern unter bild01.html. Blättermenu anpassen (Übersichtsseite + Bild02) und ggf. Titel ändern. Von dem Übersichts-Inhalt fast alles rauslöschen bis auf:


<p class="mitte">
  <img src="pics/galerie/bild01.jpg" alt="Galerie">
</p>

Der alt-Text kann natürlich für jedes Bild individuell vergeben werden - habe ich mir hier fürs Beispiel geschenkt. Darunter kann jetzt noch ein bisschen Text als Bildunterschrift getippt werden. Speichern. Fertig.

Jetzt geht es ratzfatz: Diese erste Seite speichern unter bild02.html. Blättermenü anpassen, ggf. Titel ändern. img-Tag anpassen. Speichern. Fertig.

Für alle weiteren Seiten ebenso verfahren. Das ist die ganze Kunst einer Galerie-Erstellung.

Im Falle meiner Schnurgelsgalerie will ich die natürlich ab und an mal aktualisieren. Sprich: Bilder austauschen. Wenn es bei der gleichen Anzahl bleibt, werden also einfach nur die Bilder überschrieben, auf den Einzelseiten ein bisschen Text verfasst und das wars. Falls die Anzahl variiert, muss das im Blättermenu zusätzlich angepasst und natürlich in der Übersicht eingefügt bzw. gelöscht werden. Fertig.

Du siehst: Eine Galerie zu erstellen ist wirklich sehr einfach und gar nicht soo viel Tipperei, wie man meinen könnte. Zusammen mit gutem Werkzeug wie z.B. IrfanView ist der Rest ein Kinderspiel.

Falls dir das trotzdem noch zu viel Arbeit ist - was bei umfangreicheren Fotosammlungen durchaus nachvollziehbar ist - mag ich dir ThumbaWumba empfehlen. Diese Freeware ist zwar eigentlich schon viel zu alt, um sie noch zu empfehlen, aber zumindest unter Win7 läuft sie ohne Probleme. Und sie kann z.B. auch auf einen USB-Stick "installiert" werden - ist also portabel.

Templates können nach den eigenen Wünschen gestaltet werden, da der html-Code beliebig angepasst werden kann - also auch incl. CSS. Einfach mal anschauen, es ist ziemlich selbsterklärend und noch dazu auf deutsch.

nach oben

Ich freue mich auf deinen Kommentar!

Kommentare werden erst nach Freischaltung sichtbar.

Frame nachladen (neues Fenster)