mayo 08, 2013

Control de PopularPosts

control de PopularPosts
Hay ciertas áreas de Blogger que no son fáciles de configurar o manipular. Me encontré con un caso como este al incluir el gadget de "popularPosts". Si se usa como viene de fábrica, no hay problema, pero la complicación viene cuando deseamos manipularlo un poco mas allá.
Mi necesidad inmediata era tener control sobre los thumbnails que mostraba. La forma que viene de fábrica son imágenes de 72 x 72 pixeles recortadas en el centro. Las ideas que encontré en linea manejaban la idea de ajustar el css, pero ninguna daba un control real sobre el gadget.

Pensé que gadget me permitiría sacar alguna información adicional pero de momento veo que solamente se cuenta con titulo, imagen thumbnail y resumen.
Al momento de escribir esto ignoro si existe manera de extraerle más información a este gadget. De las opciones a mi disposición tratare de usar el titulo como punto de partida.
Mi idea es usar el titulo del post + sufijo y darle formato de texto de manera que no contenga caracteres latinos ni espacios  De esta manera si mi post tiene como titulo: Una mejor manera de dar información, después de ser tratado debe quedar en unamejormaneradedarinformacion_thumb.jpg. De esta manera tendré control para crear mis thumbnails de la imagen que desee al tamaño que desee. En la plantilla, dentro del bloque de código que escribe la imagen originalmente tenia esto:

<b:if cond='data:post.thumbnail'>
 <div class='item-thumbnail'>
  <a expr:href='data:post.href' target='_blank'>
   <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
  </a>
 </div>
</b:if>
Mi versión lo cambia a:

<div class='item-thumbnail'>
 <script type='text/javascript'>postThumbFixer( '<data:post.title/>' );</script>
</div>
postThumbFixer es donde se realiza todo el ajuste:

/* ----------------------------------------------------------------------------------- */
/* This remove any latin character from the thumbs strings */  
/* ----------------------------------------------------------------------------------- */  
String.prototype.removeAccents = function () {
 var __r = {
   'À':'A','Á':'A','Â':'A','Ã':'A','Ä':'A','Å':'A','Æ':'E',
   'È':'E','É':'E','Ê':'E','Ë':'E',
   'Ì':'I','Í':'I','Î':'I',
   'Ò':'O','Ó':'O','Ô':'O','Ö':'O',
   'Ù':'U','Ú':'U','Û':'U','Ü':'U',
   'Ñ':'N'};    
 return this.replace(/[ÀÁÂÃÄÅÆÈÉÊËÌÍÎÒÓÔÖÙÚÛÜÑ]/gi, function(m){
  var ret = __r[m.toUpperCase()];
     
  if (m === m.toLowerCase())
   ret = ret.toLowerCase();
   
  return ret;
 });
};

/* ----------------------------------------------------------------------------------- */
/* This remove any space in the names from the thumbs strings */  
/* ----------------------------------------------------------------------------------- */ 

function removeChar( text, busca, reemplaza ){
 while (text.toString().indexOf(busca) != -1)
 text = text.toString().replace(busca,reemplaza);
 return text;
}

function postThumbFixer( post_title ) {   
 var _anglotitle = (removeChar( post_title.removeAccents(), " ", "" )).replace(/[^a-z0-9\s]/gi, '').toLowerCase();

 var _thumbnailUpdate = '\"http://SERVERNAME.com/images/post_thumb/' + _anglotitle + '_thumb.jpg\" class=\"img-polaroid\"';
 var _imageTag = '<img src='+ _thumbnailUpdate + '/>';

 console.log( _imageTag );
 document.write( _imageTag );
}
Con esto ahora tengo control sobre los thumbnails del gadget PopularPosts. Probablemente no sea una opción elegante, pero para fines prácticos hace lo que necesito. Seria agradable que la configuración del gadget tuviera más opciones para ajustar como en el gadget de entradas recientes. Tal vez cuando conozca más del API de blogger me anime a crear una versión mejorada del gadget.

0 comentarios:

Publicar un comentario