Die Aufgabe:
Entwicklung eines Bildergalerie-Rasters, in das unterschiedlich breite und hohe Bilder einfließen können.
Es sollen möglichst viele Anordnungsmöglichkeiten der Bilder im Raster ausgeschöpft werden.
Die Bilder werden von einem Redakteur im Alchemy CMS eingepflegt, der die Wartung möglichst einfach haben soll und dabei keine Fehler machen können soll.
Die Lösung:
Das Raster ist insgesamt 910px breit.
Jedes darin enthaltene Bild hat einen Außenabstand von 10px zum Nächsten.
Die möglichen Bilder haben fünf verschiedene vordefinierte Größen, sodass sie in das Raster passen:
1.) “105px x 160px”
2.) “220px x 160px”
3.) “220px x 330px”
4.) “450px x 330px”
5.) “450px x 500px”
Die Bilder floaten alle links.
Problematik:
Da HTML einen Textfluss von links oben nach rechts unten hat, gerät man schnell in das Problem dass die großen Bilder links neben den kleineren stehen müssen. Ansonsten entstehen Lücken im Raster die nicht gefüllt werden können.
Die Lösung dazu:
Die Bilder floaten nicht im gesamten Raster, sondern das Raster wird in weitere unterschiedlich breite Spalten aufgeteilt in denen die Bilder jeweils floaten:
1.) ⅛ Spalte
2.) ¼ Spalte
3.) ½ Spalte
4.) das gesamte Raster
Diese Spalten habe ich in Alchemy CMS als Elemente angelegt, sodass sie vom Redakteur in beliebiger Reihenfolge platziert werden können.
In diese Spalten können jeweils die Bilder eingefügt werden.
In der ⅛ Spalte können logischerweise nur die “105px x 160px” Bilder platziert werden.
In den anderen Spalten entsprechend die Bildgrößen, die dort maximal passen.
Dieser Zusammenbau des Rasters mit Hilfe der unterschiedlichen Spalten lässt z.B. solche Strukturen zu die sehr einfach zu pflegen sind:
