[BHPPS] Proper Columns

Ein neuer Teil BHPPS. Diesmal machen wir richtige Spalten mit Zeilen. Das alles schaut dann etwas ordentlicher aus, als beim letzten Mal. Alles schön in Reih und Glied, wie man es sich eigentlich gewohnt ist. Dieser Style ist weniger kompliziert als der letzte, finde ich. Und man hat den Nachteil der "falschen" Reihenfolge auch nicht. Mit dieser Methode sind die obersten Posts aus die neusten.

A new part of BHPPS. This time showing you how to create proper columns. Those look a little more organized in comparison to the last example and the order is also what we're more used to. The first row showcases the newest posts.

After and Before

Basic Markup

Das Grundmarkup dieser Ansicht ist relativ einfach und schaut folgendermassen aus:

The basic markup is very simple and looks like this:

<div class="grid">
    <article class="col">Column 1</article>
    <article class="col">Column 2</article>
    <article class="col">Column 3</article>
    <article class="col">Column 4</article>
    ...
</div>

Das ganze hab ich übrigens bei Web Deisnger Wall gelernt und dann einfach nur angepasst, also falls ihr noch eine ausführlichere Erklärung haben wollt, schaut dort rein (ist Englisch).

Btw, I did learn this from Web Deisnger Wall and just adjusted it. If you want to find out more about responsive columns head on over there and read the article.

HTML

Der Einbau ist dann natürlich relativ simpel.
Wir suchen wieder betreffende Stelle, die wir ersetzen werden:

Building is is pretty simple due to the simple markup.
We search again the snippet to be replaced:

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

Auch hier wollen wir den Look nur auf der Startseite haben

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 class='grid'>
        <b:loop values='data:posts' var='i'>
            <article class='col'><b:include data='i' name='post'/></article>
        </b:loop>
    </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 (wie letztes Mal eigentlich, nur ohne jumlinks. Das ist mein Präferenz-Style für die Previews, aber ihr könnt das natürlich anpassen)

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>

   <span><data:i.snippet/></span>

  <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

Die Basic CSS ist folgende:

Basic CSS looks like this:

/* Image Scale */
.col .thumbpic{
    width: 100%;
    top: 0;
    left: 0; 
}

article{
 display: block;
}

.col {
 float: left;
 margin-left: 3.2%;
 margin-bottom: 30px;
}

.grid .col {
 width: 22.6%;
}

.grid .col:nth-of-type(4n+1)
{
 margin-left: 0;
 clear: left;
}

Media Queries

Und jetzt machen wir das ganze noch responsive :D

And now we wanna make them responsive.

@media screen and (max-width: 740px) {
 .grid .col {
  width: 31.2%;
 }
 .grid .col:nth-of-type(4n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 .grid .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
}

@media screen and (max-width: 600px) {
 .grid .col {
  width: 48.4%;
 }
 .grid .col:nth-of-type(3n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 .grid .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
}

@media screen and (max-width: 400px) {
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
 }
}

Pros & Cons

Vorteil ist für mich eindeutig, dass wir hier mehr Ordnung haben, als bei der Pinterest-Ansicht und die Reihenfolge auch "gewohnter" ist. Nachteile sehe ich wahrscheinlich darin, dass es bei verschieden grossen Bildern zu Lücken kommen kann, da der höchste Post die Höhe der gesamten Zeile beeinflusst. Auf jeden Flal wirkt das ganze meiner Ansicht nach gut, es können viele Posts aufs Mal gezeigt werden und man spart Platz und Scrollarbeit.

A pro for me is definitely the fact that everything's more tidy-looking. It is all in order and also the newest posts are shwon in rows. The only con I can think of is if youre image is pretty big, the height of the whole row will adjust to the height of the image and it can result in some blank space. But you still have quite a lot of space to showcase your post with a scoll-saving.

More 'bout that

0. Magazine Look Without JavaScript
1. Looks Kinda Pinterest
2. Current
3. Image Thumbs