5202

ein Blog über technische Fragen zu Blogger

Blogger: Galerie im Tumblr-Style

von
Allen Lesern, Besuchern und Freunde dieses Blogs zum Start des neuen [bürgerlichen] Jahres alles Gute!

Hier gibt's weder gute Vorsätze noch Änderungen :), sondern es geht wie gewohnt weiter und zwar mit einer spannenden Idee zu einer Bilder Galerie im Tumblr Style - wie bekommt ihr a bisserl mehr Pepp in die Präsentation eurer Bilder?

Seid ehrlich - auf den meisten Blogs gibt's halt ein Bild und dann noch ein Bild und darunter kommt ein weiteres Bild ... ist irgendwie nicht wirklich interessant, oder? Es geht auch anders.

Beachtet bitte, die Bildquelle von der Skizze stammt vom Blog Kreuz und Quer und steht unter © Christian Gruner. Es ist eine große Ehre, diese tollen Bilder verwenden zu dürfen - noch mal ein herzliches Dankeschön für die Erlaubnis!

Tumblr Style

Die Skizze ist meine Referenz an Tumblr, die bekanntlich durch die Präsentation von Fotos groß geworden sind. Die Jungs benützen dabei durchgehend einen sowohl einfachen als auch genialen Kniff, nämlich die Anordnung in senkrechten Kolumnen.

Der gesamte Inhalt oder nur Fotos stehen dabei in einem vierer oder fünfer Raster und das wirkt erstens geordnet, als auch durch die unterschiedliche Höhe der einzelnen Elemente interessant.

Dieser 'Tumblr-Style' wird inzwischen in vielen Layouts nachgeahmt und zwar meistens mit dem Masonry Plugin, beziehungsweise Nachbauten davon.

CSS Variante von Masonry

Das alles ist spannend und ich habe mir vor einiger Zeit schon mal überlegt einen Post darüber zu machen - und bin doch wieder davon abgekommen. Für die Präsentation von Fotos braucht ihr nämlich kein Javascript, das geht auch mit purer CSS.

Über Inhalte in Kolumnen habe ich bereits an anderer Stelle geschrieben, heute gibt's sozusagen eine Sonderform dieses Spaltenlayouts.

Das Layout - HTML

Ich beschreibe die einzelnen Schritte zu einer solchen Galerie - ihr könnt das in einem Post, auf einer Unterseite oder in einem HTML/Javascript Gadget bauen.

Die Struktur der Galerie ist dabei äußerst simpel - eine unsortierte Liste mit img Tags innerhalb der einzelnen Listenpunkte:
<div id="container">
    <ul id="content">             
        <li><img src="http://beispiel1.jpg" alt=""/></li>
        <li><img src="http://3eispiel2.jpg" alt=""/></li>
        <li><img src="http://beispiel3.jpg" alt=""/></li>
         ....
      </ul> 
</div>
 
Ihr könnt so viele Bilder einfügen wie ihr wollt - die Anordnung in Kolumnen macht ihr später mit CSS.

Der Bildlink

Ihr müsst euch beim Einbau der Bilder entscheiden, wie breit eure Kolumnen werden sollen - in meinem Beispiel verwende ich 200px breite Kolumnen, dementsprechend braucht ihr auch 200px breite Bilder. Einleuchtend, oder?

Bevor ihr jetzt eure Bildverarbeitung anwerft und eure Bilder dort zurechtschneidet - das geht einfacher und zwar über den Picasa Bildlink.

Ihr setzt das s-Attribut von Picasa auf s200 und schon sind alle eure Bilder 200px Breit. Beispiel:
https://lh4.googleusercontent.com/-WOPS7HqNdk8/UGivXwoQGjI/AAAAAAAAC5E/J2Eyl2R-fNY/s200/1280px-Die_Bauernhochzeit-2.jpeg

Die CSS

Weiter geht's mit der CSS für drei Kolumen - bei drei Kolumne à 200px bekommt die gesamte Galerie eine Breite von 600px. Damit das funktioniert, muss logischerweise euer Postbereich größer als 600px sein ... sonst passt so eine Galerie da nicht rein, okay?

Ich habe außerdem eine Anpassung für Blogger geschrieben, mit der ihr die Bloggereigene CSS überschreibt - ohne diese Anpassung würde die Galerie 'zerhaut' aussehen.
/* You have to overwrite some Blogger CSS */
.post-body #content img, .Image #content img {
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
      -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
           box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
   background: transparent !important;
   padding: 2px;
}
#content img {
  width: 200px
}
/* Columne Style */
#content {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 4px;
     -moz-column-gap: 4px;
          column-gap: 4px;
  width: 600px;
  font-size: 0 !important;
  line-height: 0 !important;
    }
#container {
 width: 600px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 padding: 0;
 margin: 0 auto;
}
Als Ergebnis habt ihr nun 3 CSS-Kolumnen mit einem Abstand von jeweils 4px zwischen jeder einzelnen Spalte. Ihr könnt natürlich auch vier oder fünf Spalten nehmen - müsst dann aber die Gesamtbreite anpassen ... auf 800px beziehungsweise 1000px.

Experimentell

Ich habe diese Galerie auf Blogger Postseiten, Blogger statischen Seiten und auf Google Drive zum laufen gebracht. Die Galerie funktioniert in Chrome, FF, Safari, Opera und IE10. In alten Versionen vom Internet Explorer wird nur eine Liste von Bildern angezeigt.

Obwohl das funktioniert ist das natürlich etwas sehr experimentelles - ich empfehle jedem, der sich dafür interessiert, das erst mal in einem Test-Blog auszuprobieren.

Kommentare

Falls das jemand mal ausprobiert und es zu Fehler oder Problemen kommt würde mich das natürlich sehr interessieren - über einen kurzen Kommentar würde ich mich freuen.

Auch wenn alles klappt, dürft ihr natürlich gerne Lobeshymnen dichten :D!