Be KreaTief: [BHPPS] Part I. "Looks kinda Pinterest"

New Series

Mit diesem Post möchte ich eine neue Serie von Tutorials einleiten. Vielleicht hat es wer bemerkt - ich probiere momentan extrem gerne konditionale Tags aus und liebe es mit verschiedenen Styles der Startseite zu experimentieren. Wie kann man die Posts so anzeigen, was kann man damit anstellen. Die Serie wird mit BHPPS (=Blogger Home Page Post Styles) gekenntzeichnet sein und soll euch verschiedene Looks für die Startseite demonstrieren. Das ist dann jedweils sehr experimentell und jede Ansicht hat natürlich ihre Vor- und Nachteile. Trotzdem habe ich bisher noch keine Tutorial gefunden, die sich spezifisch mit diesen Thema befassen (oder nur welche, die JavaScript verwenden) und vielleicht gibt es ja noch andere Leute da draussen, denen die gewohnte Startansicht einfach zu langweilig ist.

Ich versehe diese Post mit einem Schwierigkeitsgrad 3-4, da es eigentlich immer machbar ist, wenn man den Code schon vorgegeben hat, für eine Personalisierung ist dann allerdings ein gewisses Level an Code-Wissen nötig.
Ich weiss, dass viele Leute noch immer extrem eigeschüchtert von eigenen Layouts sind, trotzdem werde ich den Einbau vorerst nur mit Oliver's Five Template zeigen, welches ich mit einem Basic-Style ausgestattet habe. Ich habe beim letzten Template schon extrem gekämpft das ganze zum Laufen zu bringen und dort hatte ich nur das Blog-Gadget verwendet. Mit dem ganzen Markup von Blogger ist der Aufwand riesig (und ich meine riesig), falls ihr es aber unbedingt auf einer Blogger-Vorlage zum Laufen bringen wollt, kann ich versuchen, ob ich's irgendwo zum Laufen kriege.

With this Post I want to initiate a new series. Maybe you have already realized - I currently have a little obsession for conditiional tags and love to experiment with different styles for the home page. What can you do with it, how can you display them? This series is gonna be all about that. In the BHPPS (=Blogger Home Page Post Styles) posts I want to show you how to achieve different looks of the home page. Most of the time it's very experimental and each look has its own pros and cons. Still I haven't found any tutorials about that kind of thing and I think there really should be some! Who knows, I'm sure there are lots of other people like me who think the home page as it is, is boring.
I give this series a level from 3 to 5, because it's easy to achieve but not so easy to customize.
I'm aware that a lot of people are still afraid of self-written templates, but it is extremely hard to work only in a selfwritten environment with a blog widget. So for my examples I will be working with Oliver's Five Template, to which I added a bit of style. He wrote a blog widget on his own and it's a lot easier to work with. Still, if you're getting goosebumps only by the thought of leaving the blogger templates, tell me and I can try if I get it to work in one of those.

Intro

Der erste Stil ist eine Mischung aus Pinterest und Tumblr, oder auch Code Cake 3.0 falls sicht noch wer dran erinnert ;)
Die Grundidee ist es Titel, Erstes Bild des Posts (falls vorhanden) sowie snippet oder jumptext und Readmore-Link in einer Kachel zu platzieren. Die Kacheln ordnen sich dann neben- sowie untereinander in einer definierten Anzahl Spalten an.

The first example is a mix between pinterest and tumblr or also Code Cake 3.0 if you remember ;)
The basic idea is to showcase posttitle, first image of the post as well as snippet or jumptext in a tile. The tiles are gonna be placed in coloums.

After and Before

Basic Markup

Die Grundidee für das Markup habe ich wieder bei 5202 gefunden (hier), anstelle der Bilder verwenden wir allerdings unsere Posts und dann wollen wir das ganze auch noch responsiv gestalten.

Unser Markup würde also so aussehen

The basic idea from the markup comes - again - from Oliver (link), but instead of images we are using our posts and we want to have it all responsive.

Our markup would look like this.

<div id="container">
    <ul id="content">             
        <li>POST PREVIEW</li>
        <li>POST PREVIEW</li>
        <li>POST PREVIEW</li>
         ....
      </ul> 
</div>

Das bauen wir nun in den Blog ein

Let's build this in the blog.

HTML

Die betreffende Stelle ist folgende. Die schreiben wir neu.

Search for this snippet, that's what we're going to rewrite.


       <b:loop values='data:posts' var='i'>    
         <article><b:include data='i' name='post'/></article>
       </b:loop>

Das passen wir nun für die Startseite an. Die Post-Seiten sollen wieterhin alles auf voller Breite anzeigen, auf der Startseite wollen wir 4 Spalten mit den Kacheln.

Wir erstetzen also eben gesuchtes Snipped durch folgendes:

We're going to customize it for our home page. The post pages style is gonna be untouched. We want the tiles only on the home page.

So replace the snippet from above with this:

<b:if cond='data:blog.pageType == &quot;index&quot;'>           
 <div id="tilecontainer">
     <ul id="tilecontent">  
   <b:loop values='data:posts' var='i'>
           <li><article class='tile'><b:include data='i' name='post'/></article></li>
         </b:loop>
  </ul> 
 </div>
<b:else/>
    <b:loop values='data:posts' var='i'>    
     <article><b:include data='i' name='post'/></article>
    </b:loop>
</b:if>

Als nächstes suchen wir diese Stelle:

Next search for

<b:includable id='post' var='i'>

Bisher steht in diesem includable folgendes

You'll find the following in there

      <h2><data:i.date/></h2>
       <b:if cond='data:i.title'>
        <h3><a expr:href='data:i.url'><data:i.title/></a></h3>
       </b:if>
 <b:if cond='data:i.hasJumpLink'>
     <data:i.body/>
     <div class='jump-link'>
    <a expr:href='data:i.url' expr:title='data:i.title'>
     <data:i.jumpText/>
    </a>
    </div>
   <b:else/>
    <data:i.body/>
      </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-footer'>
       <span>
        <b:if cond='data:i.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:i.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
       </span> 
      </div>
      <b:include name='iframe_comments'/>
     </b:if>

Wir erstezen das nun durch folgendes:

Replace it by this:

  <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <a expr:href='data:i.url'><img class='thumbpic' expr:src='data:i.firstImageUrl'/></a>

   <h3><a expr:href='data:i.url'><data:i.title/></a></h3>

   <b:if cond='data:i.hasJumpLink'>
    <span><data:i.body/></span>
    <div class='jump-link'>
     <a class='pull-right' expr:href='data:i.url' expr:title='data:i.title'><data:i.jumpText/></a>
    </div>
   <b:else/>
    <span><data:i.snippet/></span>
   </b:if>

  <b:else/>
  <!-- Page Type Item -->
   <h2><data:i.date/></h2>
   <b:if cond='data:i.title'>
    <h3><a expr:href='data:i.url'><data:i.title/></a></h3>
   </b:if>
   <data:i.body/>
   <div class='post-footer'>
    <span>
     <b:if cond='data:i.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:i.labels' var='label'>
       <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
       <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop>
     </b:if>
    </span> 
   </div>
   <b:include name='iframe_comments'/>
  </b:if>

CSS

Und nun zur CSS.
Die Basis für 4 Spalten ist folgende

Now for the CSS.
The base for 4 columns is this


#tilecontent {
    -webkit-column-count: 4; /* Anzahl Spalten */
       -moz-column-count: 4;
            column-count: 4;
    -webkit-column-gap: 4px;
       -moz-column-gap: 4px;
            column-gap: 4px;
    width: 100%;
    list-style: none; 
}

#tilecontainer {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Kachel Style */
#tilecontent .tile {
    display: inline-block; 
    width: 100%;
    padding: 3px; 
    margin-bottom: 4px; 
}

/* Bild Style */
#tilecontent .tile .thumbpic{
    width: 100%;
    top: 0;
    left: 0; 
}

Das kann man dann nach Lust und Laune weiter gestalten, bis man happy ist. Aber ich möchte in dieser Serie weniger auf die spezifische Gestaltung sondern auf das Gerüst eingehen.

You can customize this now however you want, until you're happy. But I just want to talk about the bone of it, skin and even tattoos is up to you.

Media Queries

Das ganze wollen wir jetzt noch responsive machen. Durch die Angabe der Prozente werden die Spalten schon kleiner, allerdings bleibt die Spaltenanzahl. Mithilfe von Media Queries reduzieren wir die Spaltenzahl mit einer Reduktion der Bildbreite.

Die komplette Grund-CSS mit Media Queries schaut dann so aus:

Now for the responsive part. We gave it all procentual widths, so they will scale as we reduce the window size, but the colums remain, which gets unpractical on a smaller screen.
To help that we reduce the columns with the width, using media queries.

The complete CSS now looks like this:

@media screen and (min-width:996px){
    #tilecontent {
        -webkit-column-count: 4; /* Anzahl Spalten */
           -moz-column-count: 4;
                column-count: 4;
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
        width: 100%;
        list-style: none; 
    }
}

@media screen and (max-width:995px){
    #tilecontent {
        -webkit-column-count: 3; /* Anzahl Spalten */
           -moz-column-count: 3;
                column-count: 3;
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
        width: 100%;
        list-style: none; 
    }
}

@media screen and (max-width:625px){
    #tilecontent {
        -webkit-column-count: 2; /* Anzahl Spalten */
           -moz-column-count: 2;
                column-count: 2;
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
        width: 100%;
        list-style: none; 
    }
}

@media screen and (max-width:410px){
    #tilecontent {
        -webkit-column-count: 1; /* Anzahl Spalten */
           -moz-column-count: 1;
                column-count: 1;
        -webkit-column-gap: 4px;
           -moz-column-gap: 4px;
                column-gap: 4px;
        width: 100%;
        list-style: none; 
    }
}

#tilecontainer {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Kachel Style */
#tilecontent .tile {
    display: inline-block; 
    width: 100%;
    padding: 3px; 
    margin-bottom: 4px; 
}

/* Bild Style */
#tilecontent .tile .thumbpic{
    width: 100%;
    top: 0;
    left: 0; 
}

Aussehen tut's dann so

And that's what it looks like

Pros & Cons

Wie alles hat auch dieser Style seine Vor und Nachteile. Den grössten Nachteil sehe ich hier darin, dass die Reihenfolge der Post nicht wie gewohnt verläuft. Die Spalten werden von oben nach unten gefüllt. Die vier obersten Posts sind also nicht die vier neusten. Wenn es beim Blog also auf die Reiehenfolge der Posts ankommt, ist diese ansicht sicher nichts für einem. Führt man allerdings zum Beispiel einen Fotoblog, fände ich diese Ansicht super. Man hat den Gallery-Feel, den man sogar noch dadurch verstärken könnte, die Snippets und den Post-Titel komplett zu entfernen und nur das erste Bild sprechen zu lassen.
Positiv finde ich den Look allgemein. Im Gegensatz zu anderen Spalten, deren Zeilen ebenfalls geordnet sind, wirkt dieses Beispiel natürlicher. Die Post ordnen sich anneinander an und es ist sehr viel platzsparender.

Just like everything else this style has his pros and cons. The biggest disatvantage of this style for me is the fact that the columns are filled columnwise, not in rows. So the upper posts are not the newest. If you have a blog where chonology matters it probably won't work. But I can imagine it looking perfect on a photoblog, even if you have it more drastic, by removing titles and snippets and letting the images speak only.$

More 'bout that

0. Magazine Look Without JavaScript
1. Current
2. Column Style
3. Image Thumbs

Be KreaTief

[BHPPS] Part I. "Looks kinda Pinterest"