Bildergalerie auf voller Breite

Die Galerie funktioniert auch auf kleinen Displays.

Bis vor wenigen Jahren war jede Webseite auf die Breite von 960 Pixeln optimiert, und danach mussten sich Browserfenster sowie Bildschimgröße richten. Das änderte sich, als winzige Telefone und riesige Fernseher plötzlich zum Surfen herhalten mussten. Angesichts der neuen Anforderungen programmierte ich eine minimalistische Bildergalerie, die von 520 px bis 2000 px Fensterbreite funktioniert. Die Bilder werden ohne Scrollen so groß wie möglich angezeigt, aber nicht abgeschnitten.

Natürlich gibt es eine Demonstration. Die Fotos stammen aus Wettbewerben der Wikipedia. Wer die Galerie verwenden möchte, kann sie unter CreativeCommons CC-BY-SA herunterladen (12 MB).

Die Bilder sind immer im Seitenverhältnis 2:3. Hochformate müssen links und rechts einen farblich passenden Balken bekommen. Auf den ersten Blick klingt dies nach einer Einschränkung. Ich bin aber der Meinung, dass die meisten Browserfenster ungefähr quadratisch oder breiter als hoch sind. Deshalb passen Querformate einfach besser. Und wenn die Hochformate schon zwangsläufig links und rechts Platz haben, sollte dieser wenigstens immer mit etwas Passendem gefüllt sein und nicht in einer Einheitsfarbe.

Die Anpassung an eigene Bilder und Texte ist zugegebenermaßen etwas umständlich. Es können zwei bis fünf Galerien erstellt werden. Alle Bilder müssen im Format 1024 × 683 Pixel und mit maximal 200 kB gespeichert werden. Dieses Format ist vorgeschrieben. Zusätzlich zu der großen Auflösung müssen die gleichen Bilder für die Thumbnails am unteren Fensterrand in 210 × 140 Pixeln gespeichert werden. Die eigenen Bilder werden in der Datei index.html eingetragen, dort befinden sich auch die Texte für about me, references und contact. Wenn alles funktioniert, kommt die fertige Seite per FTP oder was auch immer auf den Webspace. Viel Erfolg!

Wer möchte, kann das auch für 100 Euro von mir gemacht bekommen. Gegen Kohle sind natürlich auch andere Anpassungen möglich. Im Einsatz gibts die Galerie bei Dirk Lorenz.

Leave a Comment