Publicamos anteriormente este tutorial explicando como implantar este sistema no blogger. Mas percebi que as imagens que por padrão são estabelecidas pelo Picasa em 75px e ao ajustar o seu tamanho estas ficam muito distorcidas.


Devido a este problema procurei pesquisar algum método ou tutorial que resolvesse este problema de forma eficiente que não deixasse as imagens com uma resolução ruim. Encontrei dois tutorias que combinando-os cheguei ao resultado esperado.


Vou apresenta-los aqui, mas desde já todos os créditos ao Jmur(Vagabumdia) e ao Blog OCP de Portugal que gentilmente me ajudaram a resolver este problema.






Postagens Relacionadas com imagem ajustável (em boa resolução)




Primeiro Passo:  Ao expandir modelos de widgets, localize a tag  </head>


A seguir, copie todo este código e cole acima da tag </head>



<!-- ########## relacionados ########## -->
<script type='text/javascript'>
//<![CDATA[
var reltitulos = new Array();
var relurls = new Array();
var relresumen = new Array();
var relimagen = new Array();
var reltituloscantidad = 0;
var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 90; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "http://i708.photobucket.com/albums/ww86/blogdomijadinha/engracado52.gif"; // la imagen por defecto
function leerpostetiquetas(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    reltitulos[reltituloscantidad] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relresumen[reltituloscantidad] = eliminattags(postcontent,75);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relimagenpodefecto;
    }
    relimagen[reltituloscantidad] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relurls[reltituloscantidad] = entry.link[k].href;
        break;
      }
    }
    reltituloscantidad++;
  }
}
function mostrarrelacionados() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurls.length; i++) {
    if(!contains(tmp, relurls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumen[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i];
    }
  }
  reltitulos = tmp2; relurls = tmp; relresumen = tmp3; relimagen = tmp4;
  for(var i = 0; i < reltitulos.length; i++){
    var indice = Math.floor((reltitulos.length - 1) * Math.random());
    var tempTitle = reltitulos[i]; var tempUrls = relurls[i];
    var tempResumen = relresumen[i]; var tempImagen = relimagen[i];
    reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice];
    relresumen[i] = relresumen[indice]; relimagen[i] = relimagen[indice];
    reltitulos[indice] = tempTitle; relurls[indice] = tempUrls;
    relresumen[indice] = tempResumen; relimagen[indice] = tempImagen;
  }
  var cuantosPosts = 0;
  var r = Math.floor((reltitulos.length - 1) * Math.random()); // elegimos un post al azar
  var rini = r; // este es el primer post relacionado a mostrar
  var salida;
  var dirURL = document.URL;
  // hacemos un bucle hasta que encontramos la cantidad definida en relmaxamostrar
  while (cuantosPosts < relmaxamostrar) {
    if (relurls[r] != dirURL) {
      // si el post no es el que estamos viendo, lo mostramos
      salida = "<div class='relsposts'>";
      salida += "<a href='" + relurls[r] + "' rel='nofollow'  target='_blank' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>";
      salida += "<h6><a rel='nofollow' href='" + relurls[r] + "' target='_blank'>" + reltitulos[r] + "</a></h6>";
      salida += "<p>" + relresumen[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      // y vamos contando hasta llegar al total
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrar) { break; }
    }
    if (r < reltitulos.length - 1) {
      // habiamos empezado desde cualquier parte de la lista y este es el siguiente post
      r++;
    } else {
      // si es el último, empezamos desde el primero de la lista
      r = 0;
    }
    // si ya dimos toda la vuelta en al lista y no encontramos la cantidad, significa que no hay suficientes entradas y terminamos
    if(r==rini) { break; }
  }
}
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen = resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.relsposts {
  float: left;
  margin: 0 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
line-height: 0.8em;
  /* el tamaño dependerá de como diseñemos el contenido */
  width: 110px;
  height: 230px;
}

.relsposts :hover {
background:#b2b8ef;
-webkit-transition: margin-bottom 0.3s linear, background-color 0.3s ease 0.3s;
-moz-transition: margin- bottom 0.5s linear, background-color 0.5s ease 0.5s;
-o-transition: margin- bottom 0.5s linear, background-color 0.5s ease 0.5s;
-ms-transition: margin- bottom 0.5s linear, background-color 0.5s ease 0.5s;
transition: margin- bottom 0.5s linear, background-color 0.5s ease 0.5s;
}

.relsposts a {
  /* las propiedades de los textos, color, fuente, etc */
font-family: trebuchet;
  font-size: 14px;
color: #3a3939;
line-height: 1.0em;
  display: inline;
 
}
.relsposts img {
  /* las propiedades de las miniaturas */
  height: 98px;
  padding: 4px;
  width: 98px;
box-shadow: 2px 2px 4px #9c9dab;
}
.relsposts h6 {
  /* las propiedades del título */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
font-size: 11px;
color: #990000;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 110px;
}
.relsposts p {
  /* las propiedades de los resúmenes */
    font-size: 10px;
font-family: helvetica;
color: #4c4f4d;
  height: 4em;
  line-height: 1;
  margin: 6px 0 0;
  overflow: hidden;
background: url(http://i708.photobucket.com/albums/ww86/blogdomijadinha/f25.gif)repeat-x;
border-left: 2px ridge #d1d0c5;
  padding: 6px 1px ;
  text-align: left;
}
</style>
</b:if>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>




Embora este código tenha cara de grande, não é. Repare que nele já estão inseridos os estilos em css, e também a biblioteca jquery que será fundamental para nosso tutorial.
Além do css, você pode, e deverá ajustar a seu gosto estas linhas:


var relmaxamostrar = 4; // quantidade de posts a serem mostrados
var relmaxlen = 90; //quantidade de caracteres no resumo da postagem
var relimagenpodefecto = "http://i708.photobucket.com/albums/ww86/blogdomijadinha/engracado52.gif"; //
imagem para aqueles posts sem imagem alguma




Segundo Passo:



Localize a linha ou semelhante:    <div class='post-footer-line post-footer-line-1'>  



E adicione esla linha de códigos logo abaixo:


<span class='post-labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
</b:loop>
</span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>



Na linha callback=leerpostetiquetas&amp;max-results=50, serão pesquisadas todas as suas postagens. Recomendo que este não seja um número grande, pois pode prejudicar no tempo de carregamento do blog.



Visualize, se estiver tudo ok, salve.  O seu Postagens Relacionadas com Imagem, já estará funcionando, porém as imagens ainda não estarão com boa resolução.



Para resolver este problema, localize a tag </body>



E adicione esta linha de códigos acimadesta tag:


<script type='text/javascript'>
//<![CDATA[
$('.relsposts a>img').each(function(){
$(this).attr('src',$(this).attr('src').replace('/s72-c/','/s98-c/'));
});
//]]>
</script>




Detalhe importante:  para que a resolução da imagem fique boa, ajuste este trecho que está em vermelho, juntamente com a linha .relsposts img { (Se você definiu como 98 a sua relsposts deverá ser 98, e assim por diante.)



OBSERVAÇÕES:    Além de mostrar Postagens Relacionadas Com Imagem, este hack apresenta um pequeno resumo da postagem, aumentando a curiosidade de ler determinado post.


É muito importante que ao utilizar-se desta dica, faça um comentário, pois é nele que eu procuro resolver todos estes casos.  Ficarei no aguardo.

Escolatags: postagens relacionadas, imagens,picasa,thumbnails, artigos