Blogger. Gadget de entradas populares orientado a imágenes

Hace unos días hice unos arreglillos en un blog (Blogger) de fotografía, que incluía en el pie de todas sus páginas el gadget Entradas populares. Supongo que los de esta plataforma ya sabéis que es ese que relaciona las entradas más visitadas del blog -dentro de un determinado periodo temporal que podéis determinar- mostrando el título de cada uno de esos posts y, opcionalmente, una pequeña miniatura y un sumario.

Pero para un sitio que principalmente vive de la imagen no molaba mucho ese formato con miniaturas de 72px y lo que se me ocurrió fue darle más relevancia a esas imágenes usando un par de cosas que ya habíamos visto aquí con anterioridad.

Como de imágenes va la cosa y estas valen más que muchas palabras juntas, a continuación una captura de como quedó el asunto. Los que lo quieran verlo en vivo tendrán que acudir al sitio de Juan Carlos MarinIb y mirar abajo del todo.

¿Y cómo podéis hacer esto mismo para vosotros? Pues en primer lugar contando con el gadget "normal" en vuestro blog. Si no lo tenéis, desde la opción Diseño del escritorio Blogger lo podréis añadir fácilmente.


Lo demás ya lo haremos editando la plantilla, comenzando por añadir a vuestro CSS (antes de ]]></b:skin>) todo esto:

/* Entradas populares */
.PopularPosts ul {
text-align: center;
font-size: 0;
}
.PopularPosts li {
width: 25%;
display: inline-block;
vertical-align: top;
padding: 10px !important;
box-sizing: border-box;
font-size: 14px;
font-family: arial;
}
.PopularPosts li:hover {
background: #fff; /* Color de fondo al pasar el puntero sobre la imagen */
}
.PopularPosts .item-content,
.PopularPosts .item-thumbnail-only {
position: relative;
}
.PopularPosts a {
display: block;
box-sizing: border-box;
color: white;
}
.PopularPosts .item-thumbnail {
float: none;
margin: 0;
line-height: 0;
}
.PopularPosts img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.PopularPosts .item-snippet {
display: none;
}
.PopularPosts .item-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px;
box-sizing: border-box;
background: rgba(0,0,0,.6);
/* Opcional para mostrar título en vertical */
transform: rotate(90deg);
transform-origin: 21px 21px;
}

Eso básicamente pondrá las entradas a mostrar en filas de a cuatro (25%). También colocará el título de la entrada sobre la imagen de manera absoluta y ocultará el posible sumario de texto, como cambios más relevantes.

Hay algunas reglas que son necesarias para anular el estilo por defecto, pero las que hacen referencia a colores, por ejemplo, se pueden cambiar al gusto. También podéis eliminar dos declaraciones que hacen que el título de la entrada rote 90º para que salga en vertical. Están comentadas y al final del anterior CSS.


Seguimos editando la plantilla y nos vamos algo más abajo, antes del </head>, dónde añadiremos este pequeño JavaScript con una función que recoge los datos de URL, título del post, imagen y una medida en píxeles. Gracias a aquello de subir una imagen y disponer de cientos, ese código convertirá las miniaturas de 72px que habitualmente salen, en una de mayor tamaño (y calidad). Luego veremos cómo fijamos ese ancho.

<!-- Reemplazar miniaturas de 72px por otras de X -->
<script type='text/javascript'>//<![CDATA[
function redimthumb(url,title,image,size){
var imagen=image;
var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Ver post completo" alt="'+title+'"/></a>';
if(imagen!='') return devolver; else return '';
}
//]]></script>

Este código ya lo he facilitado más de una vez, así que si ya lo tenéis, este paso habrá que saltarlo. El que necesite profundizar en él sólo tiene que ir a Miniaturas para sumarios más grandes, dónde se explicó con más detalle.


Continuamos sin salir de la plantilla para localizar ahora el gadget Entradas populares y modificarlo. Para ello usamos el buscador interno y con la palabra clave "popularposts" encontraréis su inicio. Por su extensión no lo he copiado entero y sólo he puesto las líneas que interesa para localizar dónde hacer los cambios.

Como podréis comprobar, hay dos partes que incluyen una imagen (img) y por eso hay que repetir la maniobra otras tantas veces. Lo que he hecho ha sido incluir justo antes de ellas una llamada al script anterior enviándole los datos necesarios a través de etiquetas data.

Del código original, lo que es la imagen y el enlace que la rodea, hay que borrarlo para evitar que salgan duplicados.

Dicho todo esto brevemente, hay que añadir lo marcado en verde y borrar lo marcado en rojo.

<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>
<b:includable id='main'>
(...)
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<script type='text/javascript'>
document.write(redimthumb(&quot;<data:post.href/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnail/>&quot;,300));</script>
<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>
(...)
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<script type='text/javascript'>
document.write(redimthumb(&quot;<data:post.href/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnail/>&quot;,300));</script>
<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:includable>
</b:widget>

Ese 300 que veis por ahí (dos veces) hace que las miniaturas pasen de 72px a 300px, así que es lo que habría que cambiar si deseáis imágenes más o menos grandes que ese tamaño.

Ya podéis guardar los cambios y listo. A disfrutarlo.

Agosto 2016

Blogger ha cambiado el código del gadget "Posts populares" aprovechando su nuevo operador resizeImage (ver detalles), por lo que ahora es mucho más fácil modificar el código que indico en el tercer paso de este tutorial (el propio del gadget).

Esta sería la parte de código tal y como aparece ahora al añadir el gadget:

<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
  <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
    <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
        <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
          <img alt='' border='0' expr:src='data:image'/>
        </b:with>
      </a>
    </div>
  </b:if>
  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <b:if cond='data:showSnippets'>
    <div class='item-snippet'><data:post.snippet/></div>
  </b:if>
</div>

Pues bien, ahí lo único que habría cambiar sería el número 72 por un 300.

Los dos primeros pasos referentes a añadir el CSS y el JavaScript, los tenéis que hacer igualmente, de la misma manera.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter