Show Recont Post Original Image From a Specific Label in Blogger

One of my client wanted to have a post image gallery from a specific Label (category) to showcase it in their portfolio site. I tried many recent post widget available on the net. But none suits me. Lastly I got hold of a widget from Helplogger, but unfortunately, the thumbnail image is cropped and it look awful for a portfolio image gallery. I tinker it a bit and found a solution. Here is the little piece you need to change:

media$thumbnail.url

to

media$image.url

Here is the whole code:

CSS:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{visibility: visible;margin-right:40px !important; height:380px;width:420px;border: 1px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);box-shadow: 0 1px 1px rgba(0, 0, 0, .4);}
ul.label_with_thumbs li {height: auto;width: auto;float: left;margin-left:-30px;}
.label_with_thumbs li {list-style: none ;padding-left:0px !important;}
.label_with_thumbs a { text-transform: uppercase; visibility: hidden; }
.label_with_thumbs strong {display: none; }

Script: Add it above

<script type='text/javascript'>

  //<![CDATA[

  function labelthumbs(json){

  document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];

  var posttitle=entry.title.$t;

  var posturl;if(i==json.feed.entry.length)break;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$image.url;}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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVu4TRWe4ZzCIw63lEJuCPboKGpO8bOrvZDn3JAcsXaq23ljS8B6ILaUVVq0YZaX1UngkLnDSQ3ZssnK_YhEbJpIyl9RhEyRju3aGnpYaLci4DQjJDCwGlAm6h5FBA1Y4DdyfY_qfr3fA/s1600/picture_not_available.png';}

  var postdate=entry.published.$t;

  var cdyear=postdate.substring(0,4);

  var cdmonth=postdate.substring(5,7);

  var cdday=postdate.substring(8,10);

  var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)

  document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br> <a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('');if("content"in entry){var postcontent=entry.content.$t;}
  else

  if("summary"in entry){var postcontent=entry.summary.$t;}

  else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");

  if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}

  else{document.write('');postcontent=postcontent.substring(0,numchars);

  var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}

  var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

  if(showcommentnum==true)

  {if(flag==1){towrite=towrite+' | ';}

  if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}

  if(displaymore==true)

  {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}

  document.write(towrite);document.write('</li>');if(displayseparator==true)

  if(i!=(numposts-1))

  document.write('');}document.write('</ul>');}

  //]]>

</script>

HTML: Add this where you want it to show up.

<script type='text/javascript'>

var numposts = 6;

var showpostthumbnails = true;

var displaymore = false;

var displayseparator = true;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = false;

var numchars = 0;

</script>

<script src='/feeds/posts/default/-/Blogger Template?published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/>