Bilder Raster Layout in der Galerie verstehen

Stellen Sie 36 Hochzeitsfotos untereinander auf eine Seite, scrollt ein Besucher durch 36 Bildhöhen, bevor er das Ende erreicht. Stehen dieselben Fotos am Monitor zu viert nebeneinander, sind es neun Reihen, und schon ohne zu scrollen sieht er zwei bis drei davon, also acht bis zwölf Motive. Am Handy mit zwei Spalten bleiben immerhin 18 Reihen statt 36. Genau das leistet ein Bilder-Raster: Es verteilt die Vorschaubilder auf gleich breite Spalten und füllt sie Reihe für Reihe auf. Im Bildergalerie-Script zeigt jede Kategorie ihre Fotos auf diese Weise, und wie viele Spalten es werden, legen Sie selbst fest.

Bilder-Raster einer Kategorie: 14 Fotos in 4 Spalten ergeben 4 Reihen, die letzte mit zwei Bildern und zwei leeren Zellen

Wie ein Bilder-Raster seine Plätze verteilt

Ein Raster liest sich wie eine Buchseite. Das erste Foto steht oben links, die folgenden reihen sich nach rechts an, und ist die Reihe voll, beginnt darunter die nächste. Wie viele Reihen entstehen, ist eine Division mit Aufrunden: 14 Fotos bei 4 Spalten ergeben 3,5, also vier Reihen. In der letzten bleiben zwei Plätze frei. Diese Lücke ist kein Fehler, sie zeigt dem Besucher, dass die Sammlung hier endet.

Weil die Reihenfolge so streng ist, bestimmt sie den ersten Eindruck. Was ohne Scrollen sichtbar ist, also am Monitor die erwähnten acht bis zwölf Bilder und am Handy meist nur die ersten vier bis sechs, entscheidet darüber, ob jemand weiterblättert. Liegen dort drei fast gleiche Aufnahmen vom Sektempfang, wirkt die ganze Galerie eintönig. Mischen Sie in den ersten Reihen lieber Totale und Detail.

Wer ein Raster einrichtet, stößt immer wieder auf dieselben Fachwörter. Die Tabelle übersetzt sie:

Begriff	Was gemeint ist
Zelle	Der Platz für genau ein Vorschaubild, auch wenn das Bild ihn nicht ganz ausfüllt
Spaltenzahl	Wie viele Zellen in einer Reihe stehen, bevor umgebrochen wird
Abstand (Gutter)	Die freie Fläche zwischen zwei Zellen, waagerecht und senkrecht
Seitenverhältnis	Das Verhältnis von Breite zu Höhe, etwa 4:3 bei vielen Kameras oder 1:1 beim Quadrat

Vier Arten, ein Raster zu füllen

Gleich breite Spalten sind nur die Grundlage. Was innerhalb der Zellen passiert, unterscheidet die Galerien deutlich voneinander:

Zuschneiden auf Quadrate: Jedes Foto wird auf denselben Ausschnitt gebracht. Die Fläche wirkt wie gekachelt, dafür fehlen Ränder, bei Hochformaten oft Kopf oder Füße.
Einpassen in gleiche Zellen: Das ganze Foto bleibt sichtbar und steht mittig in seiner Zelle. Querformate lassen oben und unten etwas Luft, Hochformate links und rechts. Die Spalten bleiben trotzdem gerade.
Mauerwerk (Masonry): Alle Bilder sind gleich breit, aber unterschiedlich hoch und rücken in ihrer Spalte nach oben. Das sieht lebendig aus, die Lesereihenfolge springt aber zwischen den Spalten hin und her.
Reihen mit bündigem Rand: Die Bilder behalten ihr Format und füllen jede Reihe bis zum rechten Rand. Das gelingt schon mit CSS-Flexbox: Jedes Bild wächst per flex-grow im Verhältnis seiner Breite zur Höhe, dadurch ist jede Reihe in sich gleich hoch, nur die Reihen untereinander nicht ganz. Sollen alle Reihen exakt dieselbe Höhe haben, rechnet ein Script die Breiten aus.

Für eine selbst betriebene Galerie ist das Einpassen die unkomplizierteste Wahl. Es zeigt jedes Foto vollständig, braucht kein JavaScript und hält die Reihenfolge streng ein. Zuschneiden lohnt sich, wenn Ihre Motive ohnehin mittig liegen, etwa bei Produktfotos auf weißem Grund.

Die Spaltenzahl im Bilder-Raster durchgerechnet

Die passende Spaltenzahl folgt aus zwei Zahlen: der Breite, die Ihre Galerie auf dem Bildschirm hat, und der kleinsten Kachel, auf der man ein Motiv noch erkennt. Hat der Inhaltsbereich 900 Pixel, bekommt jede Zelle bei drei Spalten rund 300 Pixel, bei vier etwa 225 und bei sechs nur noch 150, jeweils abzüglich der Abstände. Unter etwa 150 Pixeln lassen sich am Monitor Gesichter kaum noch unterscheiden. Auf einem Handy mit rund 360 Pixeln nutzbarer Breite bleiben bei zwei Spalten etwa 170 Pixel je Bild, bei drei kaum mehr als 110.

Daraus folgt eine Faustregel: am Monitor drei oder vier Spalten, auf dem Handy zwei. Mehr Spalten lohnen sich nur für Motive, die auch klein funktionieren, etwa Farbmuster, Logos oder Briefmarken. Fünf Spalten mit Landschaftsfotos ergeben dagegen eine Wand aus kleinen grünen Flecken.

Typische Fehler im Raster und woran man sie erkennt

Viele Probleme lassen sich schon mit einem Blick auf die fertige Seite zuordnen. Vier Fehlerbilder kommen besonders oft vor:

Gesichter wirken breitgezogen: Breite und Höhe der Vorschau sind per CSS fest vorgegeben, ohne das Seitenverhältnis zu beachten.
Reihen rutschen beim Laden nach unten: Im HTML fehlen die Maße der Vorschaubilder. Der Browser kennt den Platz erst, wenn die Datei da ist, und schiebt die Seite nachträglich zurecht.
Bilder stehen in Stufen statt in geraden Reihen: Das Raster ist mit schwebenden Elementen (float) gebaut, und ein höheres Bild blockiert den Platz darunter.
Die letzte Reihe ist auffällig groß: Ein flexibles Layout dehnt die zwei verbliebenen Zellen auf die ganze Breite. Abhilfe schafft eine feste Zellbreite.

Raster, Liste oder Einzelbild: wann was passt

Das Raster ist für die Auswahl gemacht: viele Fotos, die der Besucher überfliegt, um eines davon groß anzusehen. Eine Liste mit einem Bild je Zeile passt besser, wenn zu jedem Foto ein längerer Text gehört, etwa bei einer Bauanleitung in zwölf Schritten oder einer Produktreihe mit Preisen. Die Einzelansicht mit großem Bild und Blätterpfeilen eignet sich, wenn die Reihenfolge eine Geschichte erzählt, etwa eine Wanderung vom Start bis zum Gipfel.

Die meisten Galerien verbinden zwei dieser Formen. Das Raster dient als Inhaltsverzeichnis, ein Klick öffnet das Foto groß in einer Lightbox, in der man weiterblättern kann. So braucht die Übersicht nur kleine Dateien, und die Großansicht beansprucht keinen Platz im Seitenlayout.

So baut das Bildergalerie-Script sein Bilder-Raster

Im Bildergalerie-Script gibt es zwei Raster. Auf der Startseite stehen die Kategorien als Kacheln mit Titelbild, Name, Kurztext und Bildanzahl. Auf der Seite einer Kategorie folgen die Vorschaubilder. Beide verhalten sich unterschiedlich, und nur das zweite stellen Sie in der Verwaltung ein.

Raster	Wie es entsteht	Was Sie einstellen
Kategorie-Kacheln auf der Startseite	CSS-Raster (`.kategorien_liste`), jede Kachel mindestens 340 Pixel breit, 16 Pixel Abstand	nichts, die Spaltenzahl ergibt sich aus der Breite; am Monitor sind es höchstens zwei
Vorschaubilder einer Kategorie	Tabelle (`table.bilder_tabelle`), eine Zelle je Bild	„Vorschaubilder pro Zeile“ (Standard 2, erlaubt 1 bis 20), „Breite“ und „Höhe der Vorschaubilder“ (je 200, erlaubt 20 bis 1000 Pixel)

Die Einstellungen finden Sie in der Verwaltung unter „Einstellungen“ im Abschnitt „Vorschaubilder“. Ein Beispiel mit 14 Bildern in einer Kategorie: Beim Standardwert 2 entstehen sieben Reihen. Stellen Sie 4 ein, sind es vier Reihen, die letzte enthält zwei Bilder und zwei leere Zellen (td.spalten_leer), damit die Spalten sauber untereinander stehen. Die Bilder erscheinen in der Reihenfolge, in der sie hochgeladen wurden. Umsortieren lässt sich das Raster nicht, und alle Bilder einer Kategorie stehen auf einer Seite. Das Diagramm zeigt, wie sich die 14 Bilder bei vier Spalten am Monitor verteilen und wie dieselben Bilder auf einem Handy erscheinen.

Bei vier Vorschaubildern pro Zeile ergeben 14 Fotos am Monitor vier Reihen mit zwei leeren Zellen, auf dem Handy sieben Reihen zu zwei Bildern.

Welcher Wert für „Vorschaubilder pro Zeile“ passt

Wie breit die Tabelle höchstens wird, rechnet css/layout.css aus: Spalten mal (Breite der Vorschaubilder plus 36 Pixel). In der mitgelieferten Vorlage bleiben in der Galerie-Karte 916 Pixel für den Inhalt, jede Zelle hat links und rechts 10 Pixel Innenabstand. Bei 200 Pixel breiten Vorschaubildern ergibt das:

Pro Zeile	Breite der Tabelle	Platz je Bild	Ergebnis
2 (Standard)	472 Pixel	216 Pixel	Bilder in voller Größe, rechts bleibt fast die halbe Karte leer
3	708 Pixel	216 Pixel	volle Größe, gut lesbar
4	916 Pixel (Obergrenze 944)	209 Pixel	volle Größe, die Karte ist ganz gefüllt
5	916 Pixel (Obergrenze 1180)	rund 163 Pixel	Querformate staucht der Browser auf diese Breite, Hochformate mit 150 Pixel passen noch

Für die Werkseinstellung von 200 × 200 Pixel heißt das: 4 pro Zeile, wenn Ihre Besucher überwiegend am Computer kommen, sonst 3. Der Standardwert 2 verschenkt am Monitor Platz. Wollen Sie fünf Spalten, senken Sie die „Breite der Vorschaubilder“ auf 160 Pixel. Dann erzeugt die Galerie passende Dateien, statt größere vom Browser stauchen zu lassen, und die Seite lädt weniger Daten. Am Handy spielt der Wert keine Rolle, dazu unten mehr.

Hochformat und Querformat nebeneinander

Das Script schneidet keine Vorschaubilder zu. Es passt jedes Foto in einen Rahmen aus „Breite der Vorschaubilder“ und „Höhe der Vorschaubilder“ ein, das Seitenverhältnis bleibt erhalten. Bei 200 × 200 Pixel wird ein Querformat-Foto mit 4000 × 3000 Pixel zu 200 × 150, ein Hochformat-Foto mit 3000 × 4000 zu 150 × 200. In der Tabelle steht jedes Bild mittig in seiner Zelle, die Reihen bleiben so trotz unterschiedlicher Formate geordnet.

Anders bei den Kacheln der Startseite: Dort zeigt das Titelbild per CSS (object-fit: cover) immer einen Ausschnitt von 140 × 105 Pixel. Ändern Sie später Breite oder Höhe der Vorschaubilder, erzeugt die Galerie passende Dateien beim nächsten Aufruf der Kategorie neu. Löschen müssen Sie dafür nichts.

Bis 600 Pixel Bildschirmbreite zeigt die Galerie die Vorschaubilder immer in zwei Spalten mit 12 Pixeln Abstand, ganz gleich, was unter „Vorschaubilder pro Zeile“ steht. Die leeren Zellen blendet sie dort aus, und die Titelbilder der Startseite schrumpfen auf 96 × 72 Pixel. Wenn Sie das Bilder-Raster an eigenen Fotos ausprobieren möchten, können Sie das Bildergalerie-Script kostenlos herunterladen.

Häufige Fragen

Beim Einrichten des Rasters drehen sich die meisten Fragen um Spalten, Abstände und die Form der Vorschaubilder.

Wie viele Spalten sollte ein Bilder-Raster haben?

So viele, dass jedes Vorschaubild am Monitor mindestens etwa 150 Pixel breit bleibt und auf dem Handy etwa 150 bis 170 Pixel. Bei üblichen Breiten sind das drei bis vier Spalten am Computer und zwei auf dem Handy.

Wie groß sollte der Abstand zwischen den Kacheln sein?

Etwa ein Zehntel bis ein Zwanzigstel der Kachelbreite wirkt ausgewogen, bei 200 Pixel breiten Vorschauen also 10 bis 20 Pixel. Ohne Abstand verschwimmen helle Fotos ineinander, bei sehr großen Abständen zerfällt das Raster in einzelne Inseln. Im Bildergalerie-Script ergeben die 10 Pixel Innenabstand jeder Zelle mindestens 20 Pixel zwischen zwei Bildern.

Muss ich die Vorschaubilder fürs Raster selbst zuschneiden?

Nein. Das Bildergalerie-Script erzeugt die Vorschaubilder beim Hochladen selbst. Es schneidet dabei nichts ab, sondern passt jedes Foto in den eingestellten Rahmen ein, ab Werk 200 × 200 Pixel. Querformate werden dadurch niedriger, Hochformate schmaler. Weil jedes Bild mittig in seiner Zelle steht, bleibt das Raster trotzdem geordnet.

Warum hat die letzte Reihe im Bildergalerie-Script leere Plätze?

Geht die Zahl der Bilder nicht in der eingestellten Spaltenzahl auf, füllt die Galerie die letzte Reihe mit leeren Zellen auf. Bei 14 Bildern und 4 Vorschaubildern pro Zeile bleiben zwei Plätze frei. Wählen Sie unter „Vorschaubilder pro Zeile“ einen Wert, der zu Ihrer üblichen Bildanzahl passt, oder nehmen Sie die Lücke als Zeichen, dass die Kategorie zu Ende ist.