5202

ein Blog über technische Fragen zu Blogger

Post-Listen mit Post-Titel und Teaser-Bild erzeugen

von

Myri hat einen sehr lesenswerten Post darüber geschrieben, wie ihr Listen aus Posts mit Vorschaubild, Überschrift, Link auf den Post usw. automatisch erstellen könnt.

Es stimmt was Myri schreibt, das viele [die meisten] Blogger so etwas manuell machen. Ihr kennt dass bestimmt - ihr ladet kleine Bildchen hoch, verlinkt die auf einen Post, schreibt was dazu und so weiter. Ich finde das per Hand zu machen ist viel zu aufwändig und im Grunde auch nicht nötig, weil es wirklich - wie Myri zeigt - mit Ajax verblüffend einfach geht.

In diesem Post greife ich die Idee von Myri mit einer Änderung auf - statt die Listenelemente aus dem Blog selbst zu nehmen, finde ich es einfacher, dafür über die Blogger API zu gehen.

In Natura könnt ihr das Ergebnis hier sehen. Der Code von Codepen scheint auf externe Seiten blockiert zu werden - ich kann es leider nicht hier auf der Seite einbinden!

Blogger API v2

Schauen wir uns Schritt für Schritt an, wie ihr jedes Blog-Element über die Blogger API v2 bekommt. Ich benütze dazu jQuery, weil das imho simpler funktioniert [und ich ein fauler Hund bin und mir das mit Vanilla Javascript zu aufwändig ist :D]

Beginnen wir, indem wir alle Blog-Elemente als Javascript Objekt über die Blogger API aufrufen:

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    //
  };
});

Wir wollen aus den ersten fünf Posts jeweils das erste Bild - ich zeige das am Blog von Myri als Beispiel - mit freundlicher Erlaubnis. Teaser-Bilder von meinem Blog wäre relativ witzlos:

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    for (var i = 0; i < 5; i++){
        var imgURL = data.feed.entry[i].media$thumbnail.url;
      } 
  };
});

Unglücklicherweise ist die Blogger API v2 von Google schlecht dokumentiert - eine Auflistung aller Objekte findet ihr etwa hier. Dieser Post ist die umfassendste Zusammenfassung über die Blogger JSON API, die ich kenne - leider aber auf Französisch.

Wir wollen das Ergebnis [die fünf Teaser-Bilder] ausgeben:

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i++){
        var imgUrl = data.feed.entry[i].media$thumbnail.url;
        htmlCode += "<li><img src='"+imgUrl+"'/></li>";
      } 
    htmlCode += "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  };
});

Das sieht dann so aus:

See the Pen VYRQdj by oliver (@5202) on CodePen.

Die Teaser-Bilder werden von Blogger quadratisch mit mit 72px Durchmesser ausgegeben. Das natürlich viel zu klein.

Schneiden wir sie doch etwas zu, indem wir das s Attribut im Teaser-Link durch ein w300-h200+p Attribut ersetzen. Das bedeutet, dass alle Bilder eine Breite von 300px und einer Höhe von 200px bekommen.

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var h = /\/s\d{2,4}\-c/;
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i++){
        var imgUrl = data.feed.entry[i].media$thumbnail.url.replace(h, "/w" + 300 +  "-h" + 200 + "-p");
        htmlCode += "<li><img src='"+imgUrl+"'/></li>";
      } 
    htmlCode += "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  };
});

Schaut damit gleich viel besser aus:

See the Pen yywvxG by oliver (@5202) on CodePen.

Nächster Schritt - wir setzen die Posttitel unter das jeweilige Teaser-Bild:

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var h = /\/s\d{2,4}\-c/;
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i++){
        var imgUrl = data.feed.entry[i].media$thumbnail.url.replace(h, "/w" + 300 +  "-h" + 200 + "-p");
        var posttitle = data.feed.entry[i].title.$t;
        htmlCode += "<li><img src='"+imgUrl+"'/><div>"+posttitle+"</div></li>";
      } 
    htmlCode += "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  };
});

Das Resultat:

See the Pen wBOyQm by oliver (@5202) on CodePen.

Es gibt auch Posts ohne Bilder - unser Script scheitert, falls ein Teaser-Bild nicht existiert. Machen wir noch eine Abfrage, ob es ein Teaser-Bild gibt und setzten wir falls nicht, einen Platzhalter ein.

$.ajax({
  url: "/feeds/posts/default?alt=json-in-script",
  type: "get",
  dataType: "jsonp",
  success: function(data) {
    var h = /\/s\d{2,4}\-c/;
    var htmlCode = '<ul>';
    for (var i = 0; i < 5; i++){
        var imgUrl=(data.feed.entry[i].media$thumbnail != null )
        ? data.feed.entry[i].media$thumbnail.url 
        : 'http://1.bp.blogspot.com/-mxinHrJWpBo/VD6fqbvI74I/AAAAAAAAcn8/LslulDeOROg/s300-c/noimage-chalkboard.jpg';
        var imgUrl = imgUrl.replace(h, "/w" + 300 +  "-h" + 200 + "-p");
        var posttitle = data.feed.entry[i].title.$t;
        htmlCode += "<li><img src='"+imgUrl+"'/><div>"+posttitle+"</div></li>";
      } 
    htmlCode += "</ul>"
    document.getElementById('result').innerHTML = htmlCode;
  };
});

Ich habe noch etwas CSS hinzugefügt, damit schaut das ganze doch schon ganz brauchbar aus, oder?

See the Pen myoXgM by oliver (@5202) on CodePen.

Das könnten wir jetzt noch beliebig weiter ausbauen - darauf kommt es jetzt gar nicht an. Das Thema ist natürlich episch. Ich will an der Stelle nur mal den Eindruck vermitteln, wie simpel ihr damit alle möglichen Objekte aus eurem Blog darstellen könnt.