Recently, images Uploaded in Blogger changed to blogger.googleusercontent.com instead of the old bp.blogspot.com.
First of all i would like to ask a big apologize that i am using this site to post what i did to solve this problem since is total irrelevant this subject with the character and the scope of my site, but this is the only personal site i have and this problem affected this site too and it's the only way to share the solutions!
In my last article about Gaming on Linux the URL of the image i uploaded wasn't the usual URL of the bp.blogspot.com domain but a new blogger.googleusercontent.com domain. This is not a problem for me since i found that the performance is not so bad (more at the end of the the post) but unfortunately the new domain changed the format of the names of the images and now they haven't the old format with the dimension ( /s[width] ) and the name+extension of the image in the source.
As result of these changes (so far and i don't know if we are in the middle of major changes and something change again in the future), the new domain created 3 problems to bloggers like me.
- Blurry Thumbnails.
- No Working Light-box plugin.
- SEO problems.
For the 3rd problem i can't do anything and i really don't care (i understand that for many people is major problem) but for me it isn't since it is my hobby and for the 1 and 2 problems i found the solutions that i will share right now.
Fixing Blurry Thumbnails.
To fix the blurry thumbnails we have 2 options depending what methods you are using to create thumbnails.
1) if you are using the blogger xml syntax you should change the code to responsive one, like this:
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 340, "1:1")' expr:srcset='sourceset(data:post.firstImageUrl,[32,72,144,288,340],"1:1")' expr:title='data:post.title'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdw2G5Pd7iV2qcYsSLYOxQkzmR3lt6pcOSB1ObUrTJ-wHJxFpUyT51mGdUtja7ax6qfPelJXdVqMDM-_UveMRDBFYeilOduPrJnD82E1KlCzqtmj04ejb0wXtc5SUsnymiefA5VwCgaEG/s515/BF3-RS-MISSION-HUNTING.webp", 340, "1:1")' expr:srcset='sourceset("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdw2G5Pd7iV2qcYsSLYOxQkzmR3lt6pcOSB1ObUrTJ-wHJxFpUyT51mGdUtja7ax6qfPelJXdVqMDM-_UveMRDBFYeilOduPrJnD82E1KlCzqtmj04ejb0wXtc5SUsnymiefA5VwCgaEG/s515/BF3-RS-MISSION-HUNTING.webp",[32,72,144,288,340],"1:1")' expr:title='data:post.title'/>
</a>
</b:if>
[explanation of the xml code]:
Logic: if we want to add the thumbnail image (1st line) . the link is this (2nd line) and the responsive image's src is this (3rd line)
else, use this static image url and if you compare the 2 img tags you will see that are same expect that on else is our default image. /end_of_Logic
i will explain now only the 3rd line since it is the only one that maybe you see responsive xml for 1st time.
a) (expr:alt='data:post.title' ) == the alt text if image link is dead.
b) (expr:src='resizeImage(data:post.firstImageUrl, 340, "1:1")' ) == main src that resizes with resizeImage method the URL of the 1st image of the post to 340px width (i am using this size for my 1st page, if you want different dimension use any width is suitable to your needs )
c) expr:srcset='sourceset(data:post.firstImageUrl,[32,72,144,288,340],"1:1")' == this is where the responsive magic happens in blogger and you can create srcset dimensions of the image with the desired responsive widths.1:1 is important parameter to not create blurry images
2) If you are using Javascript code to create your thumbnail images and your Javascript replace the /s72-c/ to a different dimension like /s244/ or any other /s[width]/, find the part of the code that this conversion is happening and after your function name (mine here is:ourThumbnailUrl ) change your string thumbnail argument with a regexp argument (i am sure it is different to you but your should find the "/s72-c/" . thumbnail that automated created from blogger with s72-c as name ):
src="'+$ourThumbnailUrl[x].replace("/s72-c/","/s244/")+'"
and use regexp to /s72-c instead of /s72-c/ (since the new format of images removes the second /).
src="'+$ourThumbnailUrl[x].replace(/s72-[\s\S]*?c/g,"s244")+'"
Or use any regexp is suitable for you (there are online sites to create regexp for JavaScript) but remember that you are dealing with xml that needs /g escape at the end and JavaScript that needs character escapes too. read more... here !
The trick here is to use regexp method that will affect both new and old image names and i hope blogger don't change it again to something that we can't match even with regexp.
Fixing LightBox Plugin now.
To fix the Lightbox is easier. You have to disable the embedded Lightbox plugin and use this code at the end of your xml theme template. With this LightBox plugin you can use webp images too!
Javascript Code (at the bottom of template and before </body>):
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.9,fixedNavigation:false,imageLoading:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtik4j1B6KODQlge68No0f90HXb1Swu4isFLi82SOw0jL5YPwr6VA4mxFdgc1wiKnG7ksXkmHEEd-oGsxisR_Dk4F62AAUR0ySUWvx9IXjt9MBhZspDKxuqe3CZfznUPBzqrcVVxjyaow/s1600/loading-black.gif",imageBtnPrev:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkrQ1hFJPMnk_uG6Sk667haFqqpaVTMlGFbhiR4gQFi2E-NAZioAnQINcZQInOP0g3nvX3w-5brxjcjAJ9xv-EIC0vYBbvFEJPPKuA4jdbcLHJTTx5BgnfBKM9e0L6n5xdou4Aw-D_OQ/s1600/prev-image-black.gif",imageBtnNext:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl51QD8XnuegeFkAdrGKX3swP-meJt6361kXeq347eoyeQaKl2woNMXa3EPTbZLdl15njOnAEwTnCQWzCTBMntDXud_aGP8fz_ljYc8aqoGSUKUzsl-RP9GNwXRwcuyKqi-yz8Ed-KGho/s1600/next-image-black.gif",imageBtnClose:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_nAWQArxoWziMFMyQlwPVfUPFseRJWMIHQ29Wx4pVFB1ihdspoeOBthNg2GvylzsrxwOwIWl9CeJtjhUKbG6S7xHpvq5qf4WRCv-dokqfrdxFBBbZ0gc28a24H2mH7A0l5mleGQHGSQ/s1600/close-image-black.gif",imageBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWQBjwx9F_k0SPL0A9NI1ZdDspx5zvDEV0B4oIt6D8ln0Nyrd7Wes_Pn_ltOlDN3-duuerSgX24vYwQUVGIw8_sB1AWZfP0F0_q4-sXLOwaqvBx0Rj_HUBZu-ofYFkisjWNmEb6S-kBs/s1600/blank.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a("embed, object, select").css({visibility:"hidden"});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute("href"),v.getAttribute("title")))}else{for(var t=0;t<u.length;t++){p.imageArray.push(new Array(u[t].getAttribute("href"),u[t].getAttribute("title")))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute("href")){p.activeImage++}l()}function c(){a("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+p.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+p.imageBtnClose+'"></a></div></div></div></div>');var t=f();a("#jquery-overlay").css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a("#jquery-lightbox").css({top:u[1]+(t[3]/10),left:u[0]}).show();a("#jquery-overlay,#jquery-lightbox").click(function(){b()});a("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){b();return false});a(window).resize(function(){var v=f();a("#jquery-overlay").css({width:v[0],height:v[1]});var w=h();a("#jquery-lightbox").css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a("#lightbox-loading").show();if(p.fixedNavigation){a("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}else{a("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}var t=new Image();t.onload=function(){a("#lightbox-image").attr("src",p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a("#lightbox-container-image-box").width();var y=a("#lightbox-container-image-box").height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a("#lightbox-container-image-box").animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&&(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a("#lightbox-container-image-data-box").css({width:w});a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:z+(p.containerBorderSize*2)})}function g(){a("#lightbox-loading").hide();a("#lightbox-image").fadeIn(function(){k();s()});q()}function k(){a("#lightbox-container-image-data-box").slideDown("fast");a("#lightbox-image-details-caption").hide();if(p.imageArray[p.activeImage][1]){a("#lightbox-image-details-caption").html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length>1){a("#lightbox-image-details-currentNumber").html(p.txtImage+" "+(p.activeImage+1)+" "+p.txtOf+" "+p.imageArray.length).show()}}function s(){a("#lightbox-nav").show();a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+p.imageBlank+") no-repeat"});if(p.activeImage!=0){if(p.fixedNavigation){a("#lightbox-nav-btnPrev").css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}else{a("#lightbox-nav-btnPrev").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a("#lightbox-nav-btnNext").css({background:"url("+p.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}else{a("#lightbox-nav-btnNext").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnNext+") right 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key=="x")||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)>p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage>0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a("#jquery-lightbox").remove();a("#jquery-overlay").fadeOut(function(){a("#jquery-overlay").remove()});a("embed, object, select").css({visibility:"visible"})}function f(){var v,t;if(window.innerHeight&&window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t<w){pageHeight=w}else{pageHeight=t}if(v<u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u<v)}return this.unbind("click").click(r)}})(jQuery);$(document).ready(function(){$('a[href$=jpg]:has(img)').lightBox();$('a[href$=jpeg]:has(img)').lightBox();$('a[href$=png]:has(img)').lightBox();$('a[href$=gif]:has(img)').lightBox();$('a[href$=bmp]:has(img)').lightBox();$('a[href$=webp]:has(img)').lightBox();$('a[href^="https://blogger.googleusercontent.com/img/a/"]:has(img)').lightBox()});
//]]>
</script>
CSS Code (inside <head> and before </b:skin>):
/* LightBox */
#jquery-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:110;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:20}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;position:relative;z-index:1000;}
#lightbox-container-image-data{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
The trick here is that we are looking for images with their extensions (like we are already have) and with their link name by using the has() method. So, if the link (a) starts with the new "https://blogger.googleusercontent.com/img/a/" domain name then use the LightBox plugin and it works like a charm as you can see:
here and to the images below since my site is still affetced by this blogger bug.
(if you have problem to copy paste from here so long code take is from the Source Code of this site. it's exactly the same but be careful the <b:if tag because i am not loading it to the 1st page)
For the end, i will post the results of the speed between the old images domain of bp.blogspot.com and the new blogger.googleusercontent.com that we can see from the network tab from devtools of our browsers.
 |
| Uploaded to blogger.googleusercontent.com network performance. |
 |
| Uploaded to bp.blogspot.com network performance. |
The 1st days the performance of blogger.googleusercontent.com was much better than blogspot. Now as you can see (the titles of the browsers in the images) there is some delay in server responses on this domain (TTFB). For the test i used the 1st image that uploaded to blogger.googleusercontent.com and one of my older images with almost equal widths and resolution (780px vs 781px ) but webp extension and it is 3 times smaller than the jpg image that is converted when i uploaded to my site .
After i uploaded the images of this post i saw that this mysterious bug continues affecting my site but i really don't care anymore!
If you want discuss with me this problem or ask me anything or even thank me use the link below that will send you to twitter post that i shared it !
RebelStreamers
Sunday, November 28, 2021
Related Streams
