Miniaturas de gadgets más grandes... y con otras formas | Oloblogger Hace unos meses vimos cómo agrandar las miniaturas de los gadgets oficiales de Blogger tipo Entrada...

30 de agosto de 2012

Miniaturas de gadgets más grandes... y con otras formas

Hace unos meses vimos cómo agrandar las miniaturas de los gadgets oficiales de Blogger tipo Entradas Populares o Lista de Blogs.

Esto lo hacía un pequeño JavaScript que simplemente sustituía la miniatura por su equivalente cuadrado de mayor tamaño (sxxx-c), aprovechando las peculiaridades del sistema de almacenamiento de imágenes de esta nuestra estimada plataforma.

Pero cómo cada uno tiene un gusto, muchos son los que no se conformaban con una imagen cuadrada y requerían de una miniatura rectangular. Esto es lo que vamos a ver hoy, cómo cambiar esas miniaturas por unas más grandes con formato apaisado.

Para ilustrar esto y que comprobéis el resultado antes de tener que seguir leyendo, a la izquierda de este texto podéis ver una Lista de Blogs (Blogroll, gadget Blogger) tal y cómo sale si no cambiamos nada y a la derecha cómo se vería tras aplicar uno de los estilos que más adelante veremos.

En los siguientes enlaces también podéis ver una demo en directo funcionando con esa misma Lista de Blogs y con unas Entradas Populares.


Repitiendo lo que vimos en la entrada que mencionaba al principio, lo primero es insertar este código antes de </body>.

Las dos últimas líneas antes del cierre son las que hay que personalizar y hay que incluir una por cada gadget que queramos modificar. Entre los paréntesis (en verde), los datos con los que indicamos qué artilugio queremos modificar y qué ancho debe tener la miniatura. No olvidéis que para que quede más o menos bien, el ancho tiene que ser igual al de la columna dónde lo vayamos a poner, que en este caso es el de la sidebar de la plantilla que usé para las pruebas.

<script type='text/javascript'>
function redimin(id,size){
var artilugio = document.getElementById(id);
var sustitucion = artilugio.innerHTML;
artilugio.innerHTML = sustitucion.replace(/s72-c/g,"s"+size+"-c");
var imagenes = artilugio.getElementsByTagName("img");
for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height=size; }
}
redimin("PopularPosts1",220);
redimin("BlogList1",180);
</script>

El primer dato es el ID (identificador) con el que Blogger ha denominado el gadget al instalarlo. El segundo el ancho (medido en px) que queremos para la miniatura y que en un principio, si no hiciéramos nada más, será cuadrada.

Para encontrar el ID hay varias formas, pero quizás la más fácil es buscando en el código en nuestra plantilla (sin expandir artilugios) una parte en la que aparece un trozo cómo este:

<b:section-contents id='sidebar-right-1'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>

Las palabras mágicas son esos widget que veis y que son precisamente los gadgets que hemos ido añadiendo a nuestro blog desde el principio de los tiempos usando el apartado Diseño. Podéis ver como aparece id='HTML1', id='PopularPosts1', id='BlogArchive1', id='BlogList1'... Esos son los  ID  que necesitamos.



¿Y cómo transformamos esas miniaturas cuadradas en otras rectangulares, redondas u ovaladas? Pues con CSS, como no.

Si no hemos toqueteado el estilo de los gadgets bastará con añadir unas pocas propiedades a las ID que anteriormente hemos localizado. Estas propiedades son básicamente asignar un display:block;, limitar el alto de la clase que controla la miniatura (.item-thumbnail) y luego "subir" un poco la imagen en sí para que muestre la parte central. Esto último atacando directamente a la imagen:

<style type='text/css'>
.PopularPosts .item-thumbnail {
display:block;
margin: 0 5px 5px 0;
height: 100px;
overflow: hidden;
}
.PopularPosts .item-thumbnail img {
position:relative;
top:-80px;
}
</style>

Tal como he puesto el código (entre etiquetas style), está preparado para insertar justo antes del anterior script. Si queréis ponerlo en la parte CSS del blog sólo tendréis que quitarle la primera y última línea.

La razón de ponerlo seguido es para facilitar el borrado de estas modificaciones de una tacada si alguna vez nos aburrimos de este formato, pero lo correcto sería ponerlo en la parte de hoja de estilo.


Para conseguir las miniaturas redondeadas las propiedades son muy parecidas y lo principal es añadir un border-radius con un valor más grande que el ancho de la imagen. En este caso por la limitación de altura de .item-thumbnail, generaremos un semicírculo:

<style type='text/css'>
.BlogList .item-thumbnail {
display:block;
margin: 5px 5px 5px 0;
height: 100px;
overflow: hidden;
}
.BlogList .item-thumbnail img {
padding: 0;
position:relative;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
}
</style>

Por supuesto las clases son intercambiables y podéis aplicar el efecto redondo a las Entradas Populares o el rectangular a la Lista de Blogs. Por extensión se puede aplicar a cualquier gadget que tenga miniaturas con sólo localizar su ID y la capa contenedora para poder modificar el estilo.

¿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
Copy URL

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

follow us in feedly

41 comentarios :

  1. Se agradece el aporte. Pero te informo que con IE8 las miniaturas siguen viendose cuadradas. Aunque con Firefox sí las veo rectangulares.

    ResponderEliminar
    Respuestas
    1. (D)Efectos colaterales del puñetero Explorer. Voy a ver si tiene arreglo. Gracias

      Eliminar
    2. Esto funciona en todo espero les sirva de ayuda:
      Att. Axel Cardenas.

      <script type='text/javascript'>
      //<![CDATA[
      for(var a=document.getElementById("PopularPosts1").getElementsByTagName("img"),b=0;b<a.length;b++)a[b].src=a[b].src.replace(/\/s72\-c/,"/s300");
      //]]>
      </script>

      Eliminar
    3. Gracias Hitler. Es una forma abreviada de hacer lo mismo. Yo intentaba hacer un código genérico para que sirviera para distintos gadgets y tamaños de miniaturas.

      De todas formas el problema de bmistemplates04 era lo de las imágenes redondas y eso seguirá sin arreglarse pues depende de la versión de IE con la que se vean las páginas.

      Eliminar
    4. http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie

      también puede servir de ayuda

      Eliminar
    5. ¿Eso quiere decir que border-radius funciona en IE9 tal cual, pero sólo si se pone la META de compatibilidad?

      Eliminar
  2. ¡Hola qué tal Oloman!,

    Sería interesante aplicarlo a las miniaturas de los resúmenes en los posts, sobre todo la rectangular ya que la circular tendría sus limitaciones, ya sabes.

    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Karla, el truco es simplemente hacer un contenedor de imagen más pequeño, con dimensiones rectangulares y con un overflow:hidden. De esa manera encuadramos una parte de la imagen. Luego movemos esta con position, top, etc. y ya tenemos una porción más o menos centrada. El problema me acaban de decir que está en IE... como siempre.

      Eliminar
  3. Oloman esto aplica tambien para hacerlo mas pequeños.
    Saludos

    ResponderEliminar
    Respuestas
    1. Sólo tienes que probarlo y salvo que la miniatura lleve un ancho mínimo en el CSS (min-width), verás que te funcionará.

      Eliminar
  4. Recientemente estoy usando el gadget de entradas populares de Blogger, pero la primer letra del título y del resumen están sobre puestas a la imagen, puede ver en mi blog lo mal que queda jedicerocool.blogspot.com
    Yo lo único que quiero por el momento es arreglar ese pequeño problema, ¿podría hacerse?

    ResponderEliminar
    Respuestas
    1. Busca esto en tu plantilla:
      .sidebar li {
      text-indent: -15px;
      line-height: 1.5em;
      }
      Ese -15px es el culpable. Multiplícalo por cero y verás ;)

      Eliminar
    2. Gracias amigo Oloman, ya quedó de 10. Aunque me gusta el truco de esta entrada, recién lo voy a aplicar cuando termine de re-diseñar mi blog. Mientras me quedo con el gadget de entradas populares de Blogger "normal", pero por lo menos quería que se vea decente.

      Eliminar
  5. Hola, he aplicado este truco sin a los gadgets que emncionas, pero quería saber si se puede aplicar en este gadget que está en ciudad blogger

    http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html

    espero puedas ayudarme, porque lo he intentado y no he podido, ni el mismo potro :(

    ResponderEliminar
    Respuestas
    1. Si se usan imágenes alojadas en Blogger (Picasa) y ID que las pueda identificar, se pude aplicar exactamente igual. Sólo tendrías que localizar esa ID, pero no vi el artilugio en tu blog para comprobar si se genera alguna.

      Eliminar
    2. jajajaja si puedo compadre

      gracias creo que haré mi propio blog de tontos también jejeje gracias muchas gracias

      Eliminar
  6. Amigo oloman crees que esto tambien se podra hacer sin javascript solo usando condicionales como data:post.firstImageUrl ?

    ResponderEliminar
    Respuestas
    1. Pienso que no, porque esto es algo para gadgets y creo que data:post.firstImageUrl sólo funciona si está dentro de la plantilla dentro del artilugio que monta las entradas.

      Eliminar
  7. Hola Oloman, me da un error en el script al querer guardar la plantilla: Element type "imagenes.length" must be followed by either attribute specifications, ">" or "/>".

    es en esta parte
    for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height=size; }

    ya había comentado en otra entrada del blog por mi problema, es que quiero hacer más grandes las imágenes del slideshow y esta entrada me cayó perfecta

    ¿que puedo hacer? gracias :)

    ResponderEliminar
    Respuestas
    1. jejeje creo que ya lo arreglé añadiéndole el //[CDATA[ :D

      bueno, intenté realizarlo con éxito en las entradas populares pero en el slideshow de blogger no funciona :(

      qué puedo hacer? éste es el blog: milfrases.org

      Eliminar
    2. Acabo de remitirte aquí desde otro comentario que dejaste casi igual en otro post :)

      Prueba con redimin("Slideshow1_slideshow",180);

      Eliminar
    3. Gracias por tu respuesta Oloman, se me había olvidado poner que ya había intentado con eso y tampoco funcionó jeje xP

      Eliminar
    4. Ese slideshow es bastante patatero. Pienso que si con eso no se modifica, no merece la pena meterse más a fondo con él y mejor usas cualquiera de los cientos que hay disponibles por ahí.

      Eliminar
    5. jaja bueno pues toca! :)
      ¿me recomiendas uno igual de sencilo y que no pese mucho? ;)

      Eliminar
    6. Yo sólo he publicado uno, pero tiene la ventaja de que es el más sencillo de todos (probablemente) ;)

      Eliminar
    7. ¡ME ENCANTA! :D creo que es justo lo que buscaba! ;)

      y una última pregunta si se puede jeje :)

      ¿se lo podrá hacer de forma automática que lea el feed del blog para que se actualice de forma automática tal como lo hace el del problemon? jejeje

      Por que la verdad me encanta ese slider tuyo :D pero quisiera que sea automatizado tal como que lea un feed y se actualice solito

      Eliminar
    8. Estoy en ello, pero apenas tengo tiempo libre para publicar la explicación de cómo implantarlo. Suscríbete a las entradas (abajo de esta página) y te enterarás tan pronto lo haga.

      Eliminar
    9. ¡Genial! :D

      Ya estoy suscrito desde hace fuu! jejeje me voy a suscribir tambien en la otra página del slider :)

      Esperaré con ansias ;)

      Eliminar
  8. En mis post, comunmente tengo imagenes alargadas (rectangulares) de manera que en la vista miniatura de las entradas populares siempre se ven cortadas de los lados debido a que dicha vista es escuadrada, si aplico lo que expones acá lo que logro es estirar dicho cuadrado en hancho (o tal vez es que estoy aplicando mal tu codigo) Si lo ultimo no es el caso, ¿existe alguna forma de hacer una replica de proporciones exactas de la imagen rectangular original pero a una escala mas pequeña?

    Saludos y excelente Blog!

    ResponderEliminar
    Respuestas
    1. El problema de las imágenes no cuadradas es que todas las que uses deberían tener la misma proporción ancho/alto. De lo contrario, para igual ancho, los altos serían distintos y no quedaría bien estéticamente hablando.

      Como solución fácil prueba con el último código CSS pero sin el border-radius.

      Eliminar
  9. no pude... :( nunca he usado eso... no me salio. No sabes alguna pagina donde sea para super principiantes, estoy perdida...

    ResponderEliminar
  10. ayyy y una preguntita, sabes como elegir las entradas, de la lista de las entradas populares? gracias :)

    ResponderEliminar
    Respuestas
    1. Sólo tienes que leer las instrucciones que se dan y seguirlas al pie de la letra. Si tienes alguna duda o problema concreto, pregúntalo aquí mismo. Y sobre la elección de las entradas que muestra el gadget, no puedes. Automáticamente salen las más visitadas y esa es la gracia. Para hacer otro tipo de relación, mejor usa una lista de enlaces o blogroll y tú misma añades las direcciones que te interesen a mano.

      Eliminar
  11. ¿Y se puede aplicar este estilo a entradas recientes?
    Saluditos!!

    ResponderEliminar
    Respuestas
    1. Hay una parte del blog que lo explica. Sólo tienes que localizar la ID que Blogger le pone a ese gadget y cambiarla en el código.

      Eliminar
  12. Hola Oloman!!! Precisamente buscaba algo así para el blog, de hecho ya he puesto los códigos en el blog y funciona, no tengo idea de CSS ni de HTML, pero esto de toquetear me encanta, cualquier día se me va el blog al garete, jajajaj.... En fin, pero tengo un problema, soy demasiado perfeccionista, yo uso Chrome y veo las imágenes rectangulares pero...me he dado cuenta que en Explorer se siguen viendo cuadradas y encima descuajaringa el gadget de entradas populares, ni siquiera se ve el título de la entrada. He comparado con otros blogs de referencia que también tiene las imágenes rectangulares y al verlos en Explorer respeta el formato rectangular y se ve perfecto. Podrías ayudarme con esto??? Hay algún código mágico que lo arregle?
    Gracias por explicarlo todo tan clarito!
    Saludos
    Mami
    Cose y Calla

    ResponderEliminar
  13. Lo primero de todo, para evitar que un día se te vaya todo al garete, no olvides hacer copias de seguridad de tu plantilla de cuando en cuando.

    Lo segundo, tal y como lo tienes prueba con esto en .PopularPosts .item-thumbnail
    overflow: hidden;
    height: 49px;
    width: 72px;

    Luego agranda las miniaturas y ajusta esas medidas, pero ya me dijo alguien que en ocasiones esto no funciona bien en Explorer.

    ResponderEliminar
  14. Hola, Oloman.
    Aterricé en este post buscando si se puede poner los post populares y/o últimos post, de manera horizontal, en una página estática (no en la sidebar). ¿Es confuso, no? Para darte una mejor idea, lo que quiero es algo como lo que se ve en esta página: http://www.epubgratis.net/ (no es spam, puedes borrar este mensaje no bien lo hayas visto)
    Si es posible hacerlo y tienes algún post donde hayas puesto algo semejante o que me sirva de base, envíame la dirección por favor.
    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Se pueden poner en horizontal sólo con configurarlo así mediante CSS. El problema es que ese gadget no se puede poner en cualquier sitio. Debe ir siempre como gadget y precisamente por eso no podrás ponerlo en una página estática. Para simular lo que se ve en el enlace que me remites quizás se pueda añadir y luego mover el gadget al bloque encima de las entradas.

      Eliminar
    2. ¡Hola, Oloman, muchas gracias por tu respuesta!
      Intentaré hacerlo como dices.
      Pero... ¿cuál sería el código CSS que permite la alineación horizontal?
      ¡Saludos!

      Eliminar
    3. Ya he encontrado la forma gracias a un post tuyo.
      Muchas gracias por todo.
      ¡Saludos!

      Eliminar