Wenn man Tumblr benutzt bekommt man leicht das Gefühl, dass die Macher von Tumblr lieber kleinere, schlankere Designs mögen. Am besten mit einer maximalen Breite von 500px. Denn alles wird auf 500px reduziert. Bilder, Videos, etc.
Aber ich wollte es lieber etwas größer. 800px um genau zu sein. Und deshalb habe ich viel probiert und recherchiert, wie sich diese Einschränkung umgehen lässt. Hier eine Zusammenfassung meiner Ergebnisse.
Bilder
Ich fange einfach mal mit der leichtesten Lösung an: den Bildern. Hochgeladene Bilder werden von Tumblr in sechs verschiedenen Größen zur Verfügung gestellt:
{PhotoURL-75sq} URL for a square version the photo of this post. 75-pixels by 75-pixels.
{PhotoURL-100} URL for the photo of this post. No wider than 100-pixels.
{PhotoURL-250} URL for the photo of this post. No wider than 250-pixels.
{PhotoURL-400} URL for the photo of this post. No wider than 400-pixels.
{PhotoURL-500} URL for the photo of this post. No wider than 500-pixels.
{PhotoURL-HighRes} URL for the high-res photo of this post.
Häufig wird in den Designs nur {PhotoURL-500} verwendet. Also Bilder mit einer Breite von 500px. Wenn man jetzt aber größere Bilder haben will kann man {PhotoURL-500} einfach durch {PhotoURL-HighRes} ersetzen. Dann wird immer die größte, verfügbare Breite genutzt. Die Breite, mit der Bilder aber dan schlussendlich angezeigt werden lässt sich aber natürlich noch immer via CSS regulieren.
Videos
Videos haben in meinem Blog standardmäßig eine Breite von 800px, das heißt - bei einem Bildverhältnis von 16:9 -, dass die dazugehörige Höhe 450px wären. Tumblr hat es aber lieber wenn alles 500px breit ist. Deshalb werden Videoeinbettungcodes beim Anzeigen einfach so umgeformt, dass sie eine Breite von 500px und eine Höhe von 281px haben.
Jetzt kann ich natürlich einfach alle iframes via CSS auf eine Breite von 800px und eine Höhe von 450px setzen.
iframe {
width:800px;
height:450px;
}
Aber nicht alle iframes die ich einbette sollen auch eine Höhe von 450px haben. Zum Beispiel der Spotify-Player soll eher eine Höhe von 80px haben. Also geht es nicht ganz so einfach. Aber viel komplizierter ist es auch nicht. Denn via CSS3 kann ich einzelne Attribute prüfen. Das heißt ich kann prüfen, ob in der URL “youtube” oder “spotify” vorkommt und für diese jeweils eigen Formate festlegen.
iframe[src*=youtube], iframe[src*=vimeo] {
height:450px !important;
}
iframe[src*=spotify] {
height:80px !important;
}
Bildergalerien
Mit Tumblr lassen sich ganz einfach wunderschöne Bildergalerien generieren. Leider haben diese wieder nur eine Breite von 500px und werden in einem iframe angezeigt, so dass der Bilder-CSS-Teil des eigenen Design nicht greifen kann.
Natürlich könnte ich jetzt wie oben eine feste Höhe und Breite festlegen. Aber problematischerweise ändert sich, je nachdem wie viele Bilder man in ihr hat, das Format der Bildergalerie. So, dass das mit der festen Höhe eher nicht hinhaut. Aber was dann?
Bei meiner Recherche bin ich auf eine Antwort in einem anderen Tumblr-Blog gestoßen. Bei der dort genutzten Variante wird erstmal das iframe auf eine Breite von 800px gebracht und anschließend flexibel die Höhe des iframes angepasst. (Bei Videos funktioniert diese Variante nicht).
Der Code sieht wie folgt aus (jQuery wird benötigt):
$(function(){
$(".photoset").each(function() {
var newSrc = $(this).attr("src").replace('500','800');
$(this).attr("src", newSrc);
});
var iFrames = $('.photoset');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
Ich hoffe diese Codebruchstücke können euch helfen, falls ihr auch mal lieber ein etwas breiteres Design nutzen wollt. Bei Fragen steht euch natürlich der Kommentarbereich zur Verfügung.
P.S.: Das war nur ein Spaß (hahaha). Bei Tumblr gibt es bekanntlich keinen integrierten Kommentarbereich. Wie genau das mit den Kommentaren hier funktioniert weiß ich aber auch noch nicht.
