Sonntag, 24. Mai 2015

Blogspot Recent Post-Widget mit Bild-Thumbnail

Widgets für Blogger/Blogspot mit "recent posts", die auf json-Feed-Abfragen basieren und mit Javascript die letzten Einträge anzeigen, gibt es einige im Internet. Einige bieten nur Textlinks, andere suchen auch eventuell vorhandene Bild-Thumbnails, also Bildvorschauen des ersten Bildes im verlinkten Post.

Alle leiden aber darunter, dass der Javascript-Code extrem aufgebläht ist und daher Zeit frisst.  Das ist vor allem dann schade, wenn man  nur den letzten Post anzeigen will - die komplizierte Schleifenbildung für die Abarbeitung der Posts ist dann unnötig. Ebenso zeitfressend ist die Extrahierung des Textes, der nicht immer gewünscht ist.





Nach langer vergeblicher Suche habe ich jetzt selbst ein Javascript-Widget programmiert, das schlank ist und nur den Titel und das Bild des letzten Eintrags anzeigt.

Die generierte Box ist blitzschnell aufgebaut. Der Code ist völlig autark, Ihr könnt ihn hier kopieren und einfügen, ohne dass ihr  eine im Internet hinterlegte JS-Datei einbinden müsst. Damit könnt ihr ihn auch leicht abändern.

Das Javascript bietet außerdem den Vorteil, dass das standardmäßig in blogspot vorrätige 72px-Thumbnail durch eine breitere Version ersetzt wird, in meinem Fall sind es 190 px.

Dabei geht es um eine Daily-Picture-Seite, die abgefragt werden soll, und die natürlich auch gut geeignet ist für eine Darstellung auf anderen Webseiten.









Das Widget oder Gadget holt über den RSS-Feed den letzten Eintrag aus der Seite regensburg-365.blogspot.de, holt die Bildvorschau dazu, die blogspot automatisch anlegt und bereithält, und verlinkt das Thumbnail mit dem Titel.



 
Dass hier immer ein Artikel mit Bild erscheint ist liegt daran, dass für 12 Monate im voraus für jeden Tag ein Post vorprogrammiert ist, der je ein Bild mit kurzem Text enthält.


Das folgende Skript  muss in ein HTML/Javascript-Gadget eingebunden werden.

Beginn Script

<script type="text/javaScript">
function last_post_thumbnail(json) {

        var entry = json.feed.entry[0];
        var posttitle = entry.title.$t;

        var posturl;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }

        var thumburl;
        try {
            thumburl = entry.media$thumbnail.url;
             thumburl=thumburl.replace("s72-c","s170");
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                thumburl = d;
            } else thumburl = 'http://3.bp.blogspot.com/-O-vjxP03hYo/UXVtH90_iQI/AAAAAAAAAG4/60hz9Rn5FWA/s1600/No+Image+1.gif';
        }

  document.write('<a href="' + posturl + '" target ="_blank"><img  src="' + thumburl + '"/></a>');

}
</script>
<div style="text-align:center">
<script type="text/javascript" src="http://regensburg-365.blogspot.de/feeds/posts/default?orderby=published&alt=json-in-script&max-results=1&callback=last_post_thumbnail"></script><br /><a href="http://regensburg-365.blogspot.de" target="_blank" style="font-size:9px">Das heutige Bild aus Regensburg-365</a>
</div>

Ende Script



Zu Beachten

1. Bei der Einbindung über ein HTML/JAVASCRIPT-Widget muss man darauf achten, dass man nicht auf den Wysiwyg-Modus (Rich-Text) umschaltet, sondern im Quelltextmodus bleibt, weil sonst der Quellcode verändert wird - ein Dauerproblem bei allen Javascript-Widgets.

Notfalls muss man den ersten Teil des Scripts auslagern (dropbox etc) oder fix in den Head einbinden (über Vorlagen-Änderung). Eine weitere (im Netz bisher nirgends diskutierte) Möglichkeit wäre die Stauchung des Skripts unter Entfernung aller Zeilenumbrüche. Das verhindert meiner Erfahrung bei HTML/JAVASCRIPT-Gagdets die versehentliche Zerstörung des Quellcodes. Bei einer Einbindung in echte Posts ist allerdings der Code nicht sicher. Hier manipuliert der Editor beim Umschalten doch einige Stellen im Code.

2. Wie man die Feedadresse ermittelt und wie man sie spezifizieren kann (z.B. nur bestimmte Kategorien) habe ich in früheren Artikeln bereits geschildert

3. Die Feed-URL im letzten Abschnitt muss natürlich abgeändert werden (hier:  http://regensburg-365.blogspot.de ...). Wenn aus irgendeinem Grund die eigene Webseite abgefragt werden soll (was bei dieser Einzelabfrage selten Sinn gibt), könnte man die Feedadresse auch so schreiben:

               scr="/feeds/posts/default...."



4. Das Ganze funktioniert  nicht, wenn die Bilder auf der verlinkten Webseite per Javascript oder Flash eingebunden ist. Darum ist es kaum geeignet für mandelbulb.user-archiv.de

4. Blogger und google-Picasa haben den netten Vorteil, dass es von jedem dort gespeicherten Bild mehrere Versionen auf Vorrat gibt. Ausführlicher Aufsatz hierzu: http://blog.user-archiv.de/2012/04/picasa-bilder-in-blog-einfugen.html

Beispiel:

http://1.bp.blogspot.com/...../s170/Regensburg-Spaziergang-Vorabend-Ironman-IMG_6351-MOTION.gif
Das ist eine 170 Pixel breite Version des hochgeladenen Originalbildes. Es gibt auch andere Größen, meiner Feststellung nach kann man jede beliebige Größe eingeben, obwohl offiziell nur eine Reihe vorgegebener Größen existieren.

Daher ist es für blogger(blogspot) auch einfach, eine  Thumbnail-URL vorrätig zu halten, die existiert nämlich schon. Ausgegeben wird dabei immer die 72-Pixel Version, und zwar auf ein Quadrat zugeschnitten (cropped).

http://1.bp.blogspot.com/...../s72-c/
Wenn man das -c (für cropped) entfernt, erscheint das Bild im Original-Seitenverhältnis, wird also nicht auf ein Quadrat zugeschnitten

Wenn man das s72 durch s150 oder s200 ersetzt, erhält man eine größere Version.

Das hier gezeigte Skript ersetzt in der Thumbnail-URL den Textteil "s72-c" durch "s-170", also eine 170px Version, nicht zugeschnitten.

Wenn Ihr das ändert, ändert bitte auch den Width-Wert bei der Ausgabe des Bildes

5. Wenn die Bilder auf dem verlinkten Post allesamt nicht auf dem selben Server liegen, sondern extern gespeicherte Bilder sind, dann gibt es ein anderes Problem: Blogger hält hier keine fertige thumbnail-URL parat.

Die Javascript-Routine enthält jedoch versuchsweise einen Abschnitt, in welchem der Content nach dem ersten eingebundenen Bild durchsucht wird und das Bild extrahiert wird. Da es hier keine s72-Version gibt, muss man das Bild über die width-Angabe verkleinert (es wird aber das große Bild geladen, benötigt also u.U. Zeit). Ich habe deshalb - nur für solche externen Bilder - zusätzlich eine width Angabe bei der Bild-Ausgabe mit eingebaut, die ansonsten nicht notwendig wäre.

Diese Fallback-Konstruktion habe ich nur ansatzweise getestet - zum Beispiel bei der Einbindung des letzten Bildes aus jwildfire.user-archiv.de (siehe rechte Spalte). Auf jwildfire.user-archiv lagern die Bilder nämlich teilweise extern.

6. Wenn Ihr das Originalskript verwenden wollt, also das tägliche Bild von regensburg-365 einbinden wollt, dürft Ihr das natürlich auch.



Ich selbst bin kein Javascript-Programmierer, kann deshalb keine technischen Anfragen beantworten.









  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP