Postübersicht mit Bildern (automatisch) ✤✤✤

Postübersichten sind etwas, worüber sich viele Blogger immer wieder Gedanken machen. Ich denke der Hauptgrund dafür ist, dass man durch sie eine einfache Übersicht darüber geben kann, was man schon getan hat, was auf dem Blog an Inhalt überhaupt vorhanden ist, ohne dass der User sich durch die ganzen Posts durchscrollen muss.

Postet man zum Beispiel Rezepte, ist eine Rezeptübersicht wirklich wahnsinnig schnell gemacht.

Viele Leute die ich kenne, machen diese Postübersichten manuell. Ich selbst habe bis vor Kurzen meine Tutorialübersicht auch manuell gemacht, darum war die Liste komplett unvollständig und ein paar Tote Links hatten sich darin auch noch versteckt. Doch dann kam Oliver’s Post hier und ich beschloss das mit der automatisierten Liste umzusetzen. Und seitdem habe ich es an keinem Tag bereut

Eine Frage im Blogger-Hilfeforum (übrigens solltet ihr alle dort dabei sein, wenn ihr euch mit Blogger beschäftigt, wir helfen gerne bei jedem Problem :D (Frage hier)) hat mich dann heute angeregt, dieses Tutorial zu schreiben.

Notiz Das hier ist bloss ein Praxis-Beispiel, Credit für die Ajax-Liste gilt Herrn Doetsch.

Ich gehe davon aus, dass ihr Oliver’s Post gelesen habt. Es muss nichts auf eurer Seite laufen, einfach mal durchlesen, damit ihr eine Idee davon habt, wie es funktioniert.

Vorbereitung

Als erstes solltet ihr eine Seite vorbereiten und natürlich Labels vergeben. Bei den Labels spielt Gross- und Klein-Schreibung eine Rolle, also am besten klein schreiben.

Wenn ihr euer Label habt, erstellt ihr eine neue Seite. Für den Ihalt, erstellen wir einen Container, den wir dann mit den Posts füllen werden.

Für den Container vergebt ihr eine ID.

Also die HTML-Ansicht des Posts öffnen und einfach den container mit ID rein. Diese ID solltet ihr euch merken.

Seid am besten spezifisch mit der ID, falls ihr mehrere Übersichtsseiten oder mehrere Container auf einer Seite haben wollt, wenn ihr zum Beispiel all eure Rezepte noch nach Vorspeise, Hauptspeise und Nachspeise sortieren wollt.

Für die CSS, geb ich immer gerne eine Klasse, falls ihr den Container an mehrern Orten verwenden wollt, und nicht jedes Mal die ID wiederholen wollt. Macht eine Klasse, damit ihr alle auf’s Mal stylen könnt.

<div id="wrapper-ID" class="bu-wrapper"></div>

Element Vorbereitung

Im Ajax-Befehl geben wir das Element an, welches wir reinladen wollen. Auf einer einfachen Postliste, wäre das der Titel, da ich in diesem Beispiel aber eine fancy ÜBersicht mit Bild machen möchte, müssen wir dieses Element erstellen. Und zwar für jeden Post.

Das machen wir als erstes.

Ich mache dieses Beispiel in der Simple Vorlage, aber es sollte theoretisch in jeder Blogger-Vorlage funktionieren

Code

Okay, grundsätzlich möchte ich, dass meine Post-Übersichten wie folgt aussehen:

Ich will zuerst das erste Bild des Posts und dann drunter den Titel. Beides soll auf den Post linken.

Wenn der Post kein Bild hat, wird in diesem Fall einfach kein Bild angezeigt. Ihr könnt auch ein Fallback definieren, falls ihr das wollt, einfach Bescheid geben und ich füge das noch ein. Aber ich gehe davon aus, dass man grundsätzlich Bilder verwendet, wenn man eine Bilderübersicht haben will.

Am Ende soll es in etwa so aussehen:

See the Pen yyZXpO by Myri (@mynimi) on CodePen.

Das hier ist natürlich nicht wirklich gestyled, einfach der Grundaufbau ist gemacht.

Codemässig wollen wir also vom Aufbau her Folgendes (um die CSS kümmern wir uns später)

<div class="entry">
    <a href="POSTLINK">
        <img src="FIRSTIMG"/>
        <h4 class="title">POSTTITLE</h4>
    </a>
</div>

Das müssen wir nun in den Post einbauen.

Einbau

Öffnet den Code des Blogs und sucht nach:

<b:includable id='post' var='post'>
<!-- jede Menge Code für das include -->
<!-- hier kommt der Code rein -->
</b:includable>
<b:includable id='postQuickEdit' var='post'>

Also ihr sucht nach dem post includable und platziert es ganz am Ende davon, dort bevor das includeable endet.

Der Code, den ihr dann einfügt ist folgender:

<!-- Blogübersicht Entry -->
<div class='entry'>
    <a expr:href='data:post.url'>
        <b:if cond='data:post.firstImageUrl'>
            <img expr:src='data:post.firstImageUrl'/>
        </b:if>
        <h4 class='title'><data:post.title/></h4>
    </a>
</div>
<!-- Blogübersicht Entry Ende -->

Wenn ihr das habt, könnt ihr die CSS einfügen.

CSS

Hier müssen wir als erstes, das Entry ausblenden, wenn wir es nicht im container laden.
Also machen wir ein allgemeines display: none für den entry und im container drin, dann display: block.

für die CSS sucht ihr nach: ]]></b:skin> und fügt folgende CSS direkt oben drüber ein.

Natürlich könnt ihr hier stylen, wie ihr wollt, aber wenn ihr euch für die Ansicht entscheidet, die ich im Codepen verlinkt habe, generiert ihr euch am besten eure persönliche CSS.

Wie viele Posts pro Zeile angezeigt werden sollen, sowie die Margin könnt ihr in den Variabeln definieren. Die Media queries müsst ihr wahrscheinlich auch anpassen.

Und dann klickt ihr oben im Codepen neben CSS auf das Aug-Symbol und kopiert die CSS.

Aber davor noch die Ausblende-Einblende-CSS.

/* Entry allgemein ausblenden */
.entry{
    display: none;
}

/* Entry innerhalb des Blogübersicht Containers wieder einblenden */
.bu-wrapper .entry{
    display: block;
}

/* Mit dem CodePen generiert */
.bu-wrapper {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.bu-wrapper .entry {
    width: calc((100% - (5 - 1) * 10px) / 5);
}

.bu-wrapper .entry:nth-of-type(n) {
    margin-bottom: 10px;
    margin-right: 10px;
}

.bu-wrapper .entry:nth-of-type(5n) {
  margin-right: 0;
}

.bu-wrapper .entry img {
    max-width: 100%;
    height: auto;
}

/* Wollt ihr's nicht responsive, dann entfernt alle media queries */
@media screen and (max-width: 1450px) {
    .bu-wrapper .entry {
        width: calc((100% - (4 - 1) * 10px) / 4);
    }
    .bu-wrapper .entry:nth-of-type(n) {
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .bu-wrapper .entry:nth-of-type(4n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 1030px) {
    .bu-wrapper .entry {
        width: calc((100% - (3 - 1) * 10px) / 3);
    }

    .bu-wrapper .entry:nth-of-type(n) {
        margin-bottom: 10px;
        margin-right: 10px;
    }
    
    .bu-wrapper .entry:nth-of-type(3n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 720px) {
    .bu-wrapper .entry {
        width: calc((100% - (2 - 1) * 10px) / 2);
    }

    .bu-wrapper .entry:nth-of-type(n) {
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .bu-wrapper .entry:nth-of-type(2n) {
        margin-right: 0;
    }
}

@media screen and (max-width: 520px) {
    .bu-wrapper .entry {
        width: 100%;
        margin-bottom: 10px;
    }
}

Und dann seit ihr ready für Ajax.

Ajax Code

Hier ist grundsätzlich das was Oliver schon erklärt hat.

Wenn ihr jQuery schon einmal integriert hat, dann müsst ihr’s nicht noch einmal tun, aber ich verlinke es hier der Vollständigkeit halber.

Ihr braucht hier eure Wrapper-ID und euer Label, sowie die URL der Page. Beachtet, dass ihr hier die Blog-Adresse mit .com eingebt, und nicht die längerspezifische URL. Sonst funktioniert es in anderen Ländern nicht.

Und dann sucht ihr im Code </body>

Und darüber fügt ihr folgendes ein.

<!-- jQuery  -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<!-- Blogübersicht Script -->
<b:if cond='data:blog.url == &quot;PAGEURL&quot;'>
    <script type='text/javascript'>
        //<![CDATA[
        $(document).ready(function() {
            $("#wrapper-id").load("/search/label/LABELNAME?max-results=100 .entry");
            return !1;
        });
        //]]>
    </script>
</b:if>
<!-- Blogübersicht Script Ende -->

UNd dann speichert ihr und eure Blogübersicht sollte nun auf der Page sichtbar sein.