Search code examples
imageyoutubebloggerblurry

Main images ( large size ) display like blurry , when are shared with youtube video in same post (Blogger)

please I have a case very weird. My blog show blurry images ( these are high resolution or original size ) on "slide carusel' and "related posts" when are shared with a youtube video. These problems only happens when a main image is shared with an embebed youtube video.

For example, the post have a main pic ( for example 800x600) , below a second image, and down embebed a youtube video, so the first image will lost absolutely its quality ( like blurry) on "slider carusel' and "related post" section,

I was googling this issue but I dont found articles about it. I have a test blog where I show this problem, .. the blogger template is premium was purchased., is not free version.

Thanks in ADVANCE

YOU CAN see it here http://blurryimagesblurry.blogspot.com

Joan (Wendynow)

Solution

  • Locate the following code in the template -

    function getImage(sora,z){var n=sora[z].title.$t,p=sora[z].content.$t,u=$("<div>").html(p);if("media$thumbnail"in sora[z]){var w=sora[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s1600");if(p.indexOf("youtube.com/embed")>-1){w=sora[z].media$thumbnail.url.replace("/default.jpg","/mqdefault.jpg");}}else if(p.indexOf("<img")>-1){w=u.find("img:first").attr("src");}else{w=soraOptions.noThumbnail;}var code='<img class="sora-thumb" alt="'+n+'" src="'+w+'"/>';return code;}

    There are two instances of the getImage function in the template. Replace them both with the following code -

    function getImage(sora, z) {
var n = sora[z].title.$t,
    p = sora[z].content.$t,
    u = $("<div>").html(p);
if("media$thumbnail" in sora[z]) {
    var w = sora[z].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s1600");
    if(sora[z]["media$thumbnail"].url.indexOf("youtube.com") > -1 ) {
        w = sora[z].media$thumbnail.url.replace("/default.jpg", "/maxresdefault.jpg");
    }
} else if(p.indexOf("<img") > -1) {
    w = u.find("img:first").attr("src");
} else {
    w = soraOptions.noThumbnail;
}
var code = '<img class="sora-thumb" alt="' + n + '" src="' + w + '"/>';
return code;
}

    The problem was happening because of the wrong if condition being used. The if condition was applying YouTube specific image resolution changes when a YouTube video is present inside the post content (due to this, when a post contains a YouTube video and the media$thumbnail URL is not the YouTube thumbnail, it tries to apply YouTube specific image resolution changes to the Blogger hosted image, which fail to work, causing the default thumbnail of the size 72x72px being used instead). Whereas it should be applying the YouTube specific image resolution changes (aka resizing the YouTube Thumbnail to higher resolution) when the media$thumbnail URL is only a YouTube thumbnail.