5202

ein Blog über technische Fragen zu Blogger

Blogger: Layout im 'Galerie' Style

von
Ich habe schon vor längerer Zeit einem Leser versprochen, über ein Layout im 'Galerie' Style zu schreiben - yeah, heute ist es so weit :=). Ich werde zeigen, wie ihr mit ein paar wenigen Zeilen Code eine ganz normales 'Simple' Layout von Blogger in einen 'Galerie' Blog umwandeln könnt. 'Galerie' meint in dem Zusammenhang, das auf der Starseite von eurem Blog nur ein Teaser Bild aus dem Post zu sehen ist und ihr über einen Jump-Link auf den eigentlichen Post kommt.

Auto-Jump-Break
Der Vorteil von so einer Art Blog liegt darin, das er erstens sehr übersichtlich ist und ihr zweitens die Ladezeit kurz halten könnt, wenn ihr viele Bilder in eurem Blog habt. Ich kenne Blogs, die selbst mit VDSL über eineinhalb Minuten Bilder laden - ich will gar nicht wissen, wie das mit einer 'normalen' Internetverbindung ausschaut. Alles über 5sec Ladezeit empfinde ich bei einem Blog absolut inakzeptabel. Da ist natürlich jeder anders, aber ich warte einfach ungern und wenn Leute bergeweise Bilder auf die Startseite stellen, dann ist meine Geduld nach allerspätestens 30sec vorbei und ich gehe wieder. Aus dem Grund hat Blogger die 'Jump-Break' Funktion geschaffen, mit dem ihr große Posts oder viele Bilder auf die Postseite stellen könnt, eure Startseite dagegen schön klein bleibt.
Drei Layout-Ideen
Diesen Jump-Break automatisch zu erzeugen, ist die Idee Nummer eins. Es gibt unzählige Hacks dazu, ich habe a bisserl was neues gebaut, nämlich nur das _erste_ Bild von eurem Post als Teaser für die Startseite zu nehmen. Die Idee Nummer zwei ist, dieses Bild auf eine beliebige Größe zu skalieren. Damit das 'sauber' funktioniert, nehme ich das jQuery Script das in den dynamischen Ansichten von Blogger das Teaser-Bild in 'Magazine' oder Flipcard erzeugt. Drittens stelle ich mit drei Zeilen CSS die Vorachau-Bilder in einer Galerie-Ansicht. Alles in alle sind das fünf Minuten Arbeit und ihr habt die 'Simple' Vorlage in ein Blog mit Galerie-Style verwandelt.

Vorschau

Ein Bild sagt mehr als tausend Worte - ein Beispiel-Blog zur Ansicht.

Test-Blog

Da bei so etwas immer alles mögliche schief gehen kann, probiert das zunächst in einem Test-Blog aus.

jQuery

Der Umbau braucht das jQuery-Framework. Wie das in eurem Blog funktioniert, habe ich hier beschrieben.

Jump-Break

Um den auto Jump-Break einzubauen, müsst ihr zuerst ein Häckchen beim Schalter "Widget-Vorlage komplett anzeigen" setzen.

Vorlage > HTML bearbeiten > Widget-Vorlage komplett anzeigen
data:post.body
Dann sucht ihr mit der Suchfunktion über die Taste STRG und F diesen Tag in eurem HTML:
<data:post.body/>
Diesen Tag gibt es drei oder viermal in eurer Vorlage - der _erste_ Tag ist der richtige.
Ersetzen
Ihr _ersetzt_ diesen Tag durch dieses Snippet:
<!-- Auto Jump-Break Start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:post.snippet'>
 <b:if cond='data:post.thumbnailUrl'>
 <div class='Image thumb'>
 <img expr:src='data:post.thumbnailUrl'/>
 </div>
 </b:if>
 <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
 <div class='jump-link'>
 <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </b:if>
 <b:else/>
 <data:post.body/>
 </b:if>
 <b:else/>
 <data:post.body/>
 </b:if>
<!-- Auto Jump-Break Ende -->
Fertig! Ihr könnt euch euren Blog nun anschauen: Ihr werden auf der Startseite ein kleines Teaser-Bild von 72px im Quadrat finden - noch nicht sehr beeindruckend.

Skalierung

Um das Teaser Bild in der Größe zu skalieren, nehmen wir ein kleines jQuery Script aus den dynamischen Vorlagen - dieses Script könnt ihr ein HTML/Java Gadget packen und möglichst tief im Blog platzieren:
<script type='text/javascript'>
$(document).ready(function() {
 var dimension = 290;//Hier Größe des Bildes eintragen
 $('.thumb').find('img').each(function(n, image){
  var image = $(image);
  image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s'  + dimension)});
  image.attr('width',dimension);
  image.attr('height',dimension);
 });
});
</script>
Der Wert "290" ist die Größe des Bildes im Quadrat - hier könnt ihr jede gewünschte Größe eintragen. Dieses Script benützt eine Eigenschaft von Bilder, die in Picassa gehostet werden, d.h. bei Bildern aus anderen Quellen wird das nicht funktionieren. Wenn ihr alles richtig gemacht habt, seht ihr nun eure Bilder in eurer gewünschten Größe alle untereinander stehen. Das ist langweilig und unübersichtlich, im letzten Schritt werden wir jeweils drei Teaser nebeneinander stellen.

Galerie-Ansicht

Für die Galerie-Ansicht braucht ihr die neue CSS-Klasse .index, über die ich schon mal geschrieben habe.
Erweiterung
Ihr müsst zunächst eine neue Attribution in euren Body-Tag schreiben - das ist euer Body Tag:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass'>
schreibt den so um:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass +  &quot; &quot;  + data:blog.pageType'>
CSS
Wenn ihr das habt, könnt ihr die CSS für die Galerie-Ansicht im Vorlagen-Designer > eigene CSS hinzufügen
.index .post-outer {
    width: 33.333%;
    float: left;
 }
.index #blog-pager {
    float: left;
    width: 100%;
}
.index h3, .jump-link {
text-align: center;
}
That's all! Ihr habt nun auf eurer Startseite drei Teaser nebeneinander, die ihr von der Größe her natürlich nicht zu groß machen dürft, sie müssen ja noch auf die Seite passen :=). Wenn ihr zwei Teaser nebeneinander haben wollt, müsst ihr dementsprechend 50% wählen, bei vier sind es 25% und so weiter. Ansonsten bleibt das eine ganz normale Simple-Vorlage, die sich genau so verhält wie eine 'normale' Vorlage. Der einzige Unterschied ist, dass ihr auf der Startseite nur ein Teaser-Bild von eurem jeweiligem Post habt.

Ausblick

Ich möchte euch mit dem Post 'Layout im Galerie-Style' zeigen, wie schnell und unkompliziert ihr eine normale Vorlage umbauen könnt. Ich bin der Meinung, Blogger bietet erstaunlich viele Möglichkeiten für interessante und spannende Layout-Ideen. Ich merke oft, wie ihr Blogger in eure Blogs so viel Kreativität steckt und ich möchte euch a bisserl motivieren, eure Vorstellung, von dem was ihr mit einem Blog alles machen könnt, zu erweitern.

Kommentare

Kommentare sind auf diesem Blog immer gerne gesehen ....