Agrandar las miniaturas de los gadgets | Oloblogger Si queréis cambiar la apariencia de algún gadget tipo Entradas Populares o Lista de Blogs , no hay demasiado problema. Sólo tenemos que loc...

4 de abril de 2012

Agrandar las miniaturas de los gadgets

Si queréis cambiar la apariencia de algún gadget tipo Entradas Populares o Lista de Blogs, no hay demasiado problema. Sólo tenemos que localizar su ID y aplicar CSS. Sin embargo, si lo que pretendemos es que las imágenes en miniatura que los acompañan sean más grandes sin perder calidad, la cosa ya requiere de algo más.

Lo fácil en un principio sería atacar la ID que controla el artilugio correspondiente y cambiar con CSS el width y height de esas miniaturas. Pero eso no hace que cambie el tamaño de la imagen original (72x72 píxeles) y por tanto al hacerla más grande, la miniatura se verá con poca definición. O sea, mal. Este sería un ejemplo de opción chunga:

#PopularPosts1 img {width:150px; height:150px;}


Aumentar imágenes
Pero como ya hemos dicho en otras ocasiones, en Blogger tenemos la ventaja de que subimos una imagen y realmente disponemos de cientos. Y esto es lo que una vez más vamos a aprovechar.

Para ello os propongo este pequeño trozo de código que habrá que insertar antes de </body> (no funcionará antes del cierre de head) y que hace un par de cosas. La primera es recoger una ID y un tamaño de imagen -el que queremos- y sustituir en todas las direcciones de las imágenes bajo esa ID, el subdirectorio s72-c (el que tienen este tipo de miniaturas) por otro que contiene la imagen más grande y exactamente del tamaño indicado previamente.

Luego tomará esas mismas imágenes y les añadirá un width y un height igual al tamaño deseado. Esto último es necesario porque las miniaturas vienen de serie con esos atributos iguales a 72(px) y si no los reescribimos,  no se verán más grandes por mucho que utilicemos tamaños superiores en el subdirectorio:

<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&lt;imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height = size; }
}
redimin("PopularPosts1",200);
</script>


En la línea redimin("PopularPosts1",200); es dónde tenemos que indicar la id del artilugio que pretendemos modificar y el nuevo tamaño de las miniaturas (datos variables marcados en verde).

El que utilicé como ejemplo es el correspondiente a las Entradas Populares y hay que tener en cuenta que si hay sucesivos gadgets de ese mismo tipo, el último número irá cambiando: #PopularPosts2, #PopularPosts3, etc. Para la Lista de blogs, la ID será la de #BlogList1.

Este mismo truco sirve para cualquier gadget que lleve incorporada una ID. Si no os funciona, lo más seguro es que en vuestro CSS tengáis algún código extra puesto por vosotros, que fuerce el redimensionado de las miniaturas y en ese sentido anule el script.

¿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

84 comentarios :

  1. Según yo entiendo: ¿Por más pequeña que sea una imagen, la puedes agrandar sin que pierda calidad?

    ResponderEliminar
  2. No exactamente. Si entendiste eso no lo expliqué bien.
    Cuando redimensionas una imagen forzando un mayor ancho (o alto), siempre se verá con peor calidad. Lo que ocurre en ESTE CASO es que Blogger toma la imagen original y la hace más pequeña (esto si consigue la misma calidad). Con este script lo que hacemos es recuperar la imagen original y por tanto, conseguir la máxima calidad posible. ¿Me lié o está más claro? :D

    ResponderEliminar
  3. que hace un par de cosas. La primera es recoger una ID y un tamaño de imagen -el que queremos- y sustituir en todas las direcciones de las imágenes bajo esa ID, el subdirectorio s72-c (el que tienen este tipo de miniaturas) por otro que contiene la imagen más grande y exactamente del tamaño indicado previamente.

    Quiere decir eso que no basta con pegar el codigo que pusiste, donde puedo encontrar los id que dices, por favor es urgente saber eso.

    ResponderEliminar
  4. Cambie el tamaño a s-200-c y cambie en hight y el withg pero las imagenes pierden mucha resolucion aunque aumentan el tamaño, ayuda por favor

    ResponderEliminar
    Respuestas
    1. Contesto a los dos comentarios aquí. El primer código es sobre lo que NO da buen resultado, por tanto, no tienes que cambiar el height y el width en ninguna parte. Sólo necesitas el segundo código.

      Sobre el ID, esto sirve para miniaturas que Blogger crea automáticamente a partir de otras imágenes más grandes, como ocurre en los dos ejemplos que se citan: Entradas populares y Lista de Blogs. En la entrada se comentan las ID que corresponden a cada uno de esos dos, pero si quieres usar este truco con otro gadget, me tendrías que decir cual es.

      Por ejemplo, en tu blog, "Lo+vito del mes" está bajo la ID PopularPosts3

      Eliminar
  5. Muy buenas, yo tengo una pregunta relacionada con la lista de blogs y las miniaturas. Resulta que cuando uno tiene una larga lista de blogs amigos, para mostrarlos todos se necesita muchísimo espacio en vertical. He probado a poner la lista en movimiento y funciona bien, pero la gente quiere verse, encontrarse (no esperar que pasen decenas de miniaturas), entonces...

    La pregunta es ¿cómo se puede hacer para que ese gadget de lista de blogs, muestre sus miniaturas de fotos en horizontal, una al lado de la otra en vez de ocupar el espacio en vertical que es interminable !!?
    Es decir, que saliera algo como el gadget que muestra a los que participan del sitio, donde las miniaturas de sus fotos van compactas en un cuadro horizontal, dependiendo del ancho que se le asigne (¿se entiende?)
    Saludos y muchas gracias desde yá.
    Vittese

    ResponderEliminar
    Respuestas
    1. Se entiende. Sin embargo, si pones la lista en horizontal ¿dónde encuentras tanto espacio para ponerla? Por otra parte, podrías hacer algo como lo que tengo ahora en el pie de la página con las Entradas Populares, es decir, sólo las miniaturas, que verás que las tengo como dices. Pero en este último caso ¿cómo se sabe a qué blog corresponden esas imágenes?

      O sea que la respuesta es que sí se puede hacer pero que no veo claro que sea práctico, a menos que tengas otra cosa en la cabeza y yo no haya captado bien la idea.

      Eliminar
  6. ¿Se pueden poner en el mismo Script diferentes ID?

    ResponderEliminar
    Respuestas
    1. Otra cosa más ¿se podría hacer esto pero por class?

      Eliminar
    2. En el script exactamente no, pero se pueden añadir más "llamadas" al script. Sólo tendrías que hacerlo debajo de
      redimin("PopularPosts1",200);
      ...usando la misma estructura y las ID que quieras, incluso cambiando el tamaño para cada una. Ejemplo:

      ...
      imagenes[i].height = size; }
      }
      redimin("PopularPosts1",200);
      redimin("BlogList3",150);
      redimin("BlogList2",250);
      redimin("PopularPosts2",300);
      </script>

      Y sobre hacerlo para class, a bote pronto creo que no habría problema. Sería algo más complicado el código pero creo que sí. Si pudieras especificar más, quizás hasta sacaría un rato para probar.

      Eliminar
    3. Muchas gracias, actualmente esto me ha resuelto un montón de problemas además de que lo he mezclado perfectamente con los sumarios sin java script que publicaste hace tiempo.
      Por ejemplo en uno de mis sitios me ha dado maravillosos resultados: matiusboom.blogspot.mx

      El problema que tengo es al usarlo con un blog con el truco de first post pues no puedo separar ese post del resto que están en el id "blog-posts", por lo que pensaba usar clases pero no encontré ninguna función que me diera ese mismo resultado para una clase.

      ¿Se puede excluir por id algún elemento? Pues existe el id first que podría servir para unos casos específicos.

      Como sea muchas gracias, realmente las plantillas que he diseñado en blogger ahora, realmente me han dado geniales resultados.

      Eliminar
    4. ¿Viste mi página de inicio? El primer sumario tiene más texto y una imagen más grande. Para eso tienes que crear una condición previa al sistema de sumarios sin javascript con esta condición:
      <b:if cond='data:post.isFirstPost'>

      Si se cumple, lo que quieras poner para ese primer post y luego con un ELSE el mismo procedimiento que estés usando ahora para el resto.

      Eliminar
  7. Muy bueno Oloman, eres el Cristiano Ronaldo de los blogs XD

    Saludos.

    ResponderEliminar
    Respuestas
    1. Seguro que no. No tengo yo el sueldo de él ;)

      Eliminar
  8. O sí, gracias, se me ocurrió eso precisamente cuando estaba checando la estructura de los loops, solo me falta probarlo.

    Gracias por el dato.

    ResponderEliminar
  9. hola oloman pues yo lo quiero implementar en la home pero con mis entradas pero solo funciona con la ultima entrada que publique y no las demas me podrias ayudar de dejo el nombre del link

    kronosanime.com es solo la plantilla no tiene nada de videos espero tu ayuda

    ResponderEliminar
    Respuestas
    1. "Sólo lectores invitados". No puedo verlo :S

      Eliminar
    2. Vale. Acabo de ver otro comentario en otra entrada diciendo que esto lo has solucionado. Ya sigo por allí.

      Eliminar
  10. ¿Cómo podrían modificarse estas miniaturas para que no fuesen cuadradas pero que no se deformaran?
    ¿Hay alguna forma de hacerlo?

    ResponderEliminar
    Respuestas
    1. Sí. He estado haciendo pruebas y creo que sólo habría que añadir un poco de CSS para logralo. En un post futuro lo explico con más detalles.

      Eliminar
  11. Que son las ID? Soy nueva en todo esto y me gustaria poner las imagenes mas grandes de los gadgets, pero no entiendo ni papa de esto, ayuda porfavor.

    ResponderEliminar
    Respuestas
    1. Los ID son los identificadores que algunos elementos de una página web llevan asociados. Sería como su nombre.

      En el caso de los posts populares, Blogger les pone siempre la ID PopularPostsX, siendo X un número que asigna secuencialmente. Si sólo tienes instalado uno de estos gadgets, pues será un 1. En el ejemplo está hecho con ese número porque es lo más habitual.

      Y siguiendo con ejemplos, el de Lista de Blogs es #BlogListX. Sólo cambiando esa ID y el tamaño, manejas las miniaturas de todos los gadgets con el código de este post.

      Eliminar
  12. Permitame una consulta. Le agradecería una respuesta. Tengo un problema cuando inserto ciertos vídeos o películas en mi blog. Los pongo con HTML/Javascript y los de youtube van bien, pero con los de otros sitios tengo problema. El tema es que los ubico en una columna al lado de la parte central del blog, en un ancho de 250 y un alto de 140. Es decir, bien pequeños los vídeos. No me interesa porque los de youtube haces click en agrandar la pantalla y listo. Pero los de otros sitios, al ponerlos tan pequeños, me ocultan la opción de agrandarlo. Estos son vídeos del servidor VK Video Player 4.0 que muchos sitios utilizan para las películas, series, etc..
    Un saludo y gracias anticipadas.
    barqa

    ResponderEliminar
    Respuestas
    1. Pues va a tener una respuesta pero supongo que nada satisfactoria, ya que no conozco de nada ese tipo de vídeos. De todas formas sospecho que si lo que quiere es mostrar en ellos el botón para poder verlos a pantalla completa, va a ser una tarea espartana ;)

      Eliminar
  13. Graciass Oloman !! Me sirvió de mucho el script! En mi caso queria reducirlas y me lo hizo sin ningun problema!! un saludo.!

    ResponderEliminar
    Respuestas
    1. Una miniatura por definición es pequeña y por tanto es inusual que quieras hacerla más menuda :)
      Pero realmente este código redimensiona así que, efectivamente, sirve tanto para agrandar como para reducir.

      Eliminar
  14. Buenas Oloman:
    Utilize el script de la otra entrada que tienes de las miniaturas en los sumarios, quedo de cine, ademas hice una modificacion para que la nueva miniatura redimensionada no fuese cuadrada, quitandole el -c.
    Ahora me queda este script, que me gustaria hacer lo mismo, redimensionar las miniaturas de los post populares, pero que las redimensionadas no seas cuadradas.
    ¿Alguna idea?
    Gracias por todo.
    Saludos...

    ResponderEliminar
    Respuestas
    1. Pues en un principio sería igual, quitándoles el -c, pero también puedes utilizar algo de CSS como se explica aquí

      Eliminar
    2. Al final he estado trasteando el java y lo he logrado quitando de nuevo el -c, pero con tanta comilla, ya no sabia ni lo que veia.
      Gracias de nuevo por estar ahi.
      Saludos...

      Eliminar
  15. Como hago para ver la lista completa de los lectores invitados a mi blog? Solo me muestra 4 y, por tanto, no puedo quitar permisos o editar los que no salen. Gracias.

    ResponderEliminar
    Respuestas
    1. No te puedo ayudar porque eso no me ha pasado nunca (no tengo invitados) y no sé ni como sale ¿Quizás puedas poner aquí la dirección de una captura?

      Eliminar
  16. Increible!!! y no se distorciona, pero si tengo activado el favicon en el gadget de lista de blogs, el mismo favicon aumenta jajaja

    no se si haya un remedio para que éste no cresca, o mejor lo desactivo

    gracias

    ResponderEliminar
    Respuestas
    1. Hola. Supongo que te refieres al icono de edición rápida, el de las herramientas. Al ser una imagen de ese mismo gadget, efectivamente, también la amplia. Lo más rápido es lo segundo, quitar el código de la plantilla que lo genera.

      Eliminar
  17. Excelente Oloman, una pregunta, ¿se puede utilizar este procedimiento con las metatags de facebook? ya he buscado en la web pero no doy como solucionar el problema de las miniaturas en facebook, por ejemplo aquí se ve como salen con la resolución por defecto de blogger

    http://k39.kn3.net/6F80B1B03.png

    Segun el debugger de facebook dice que necesita una imagen de mínimo 200x200, por ejemplo en mi blog milchistes.net yo solo uso imagenes grandes, ¿hay alguna etiqueta que en vez de mostrar el data:post.thumbnailUrl pueda ingresar la primera imagen de la entrada?

    Muchas gracias

    ResponderEliminar
  18. Pero ¿eso es para que se puedan compartir entradas y que salga una miniatura junto al enlace y el texto? Es que si es así no te hace falta agrandar nada...

    ResponderEliminar
    Respuestas
    1. no, eso es para cuando alguien le da like, cuando alguien le da compartir si sale en miniatura como debería ser normalmente, el problema está en los likes, que cuando alguien le da (en este caso yo) se ve todo borrosa la miniatura en el facebook como la imagen que puse en el comentario anterior (http://k39.kn3.net/6F80B1B03.png).

      Lo que sucede es que tengo esta meta tag para facebook cuando hay alguna imagen en la entrada para la propiedad og:image

      <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      </b:if>

      y las miniaturas salen a 72x72 y al pasar a facebook con los likes las agranda perdiendo calidad, ¿hay alguna otra etiqueta que en vez de buscar la miniatura de la primera imagen, pueda obtener la dirección de esta mismo sin necesidad de un thumb para que no pierda calidad?

      ejemplo (si es que existe jeje)

      <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      </b:if>

      Eliminar
    2. Se me había ocurrido una manera, pero tras probarla me di cuenta de que no servía. El problema es que los cambios hechos con JavaScript no son tenidos en cuenta por los buscadores, ya que no forman parte del código fuente de la página y se añaden después de cargarla.

      Eliminar
  19. Hola, yo usaba este truco y siempre me funcionó pero ahora tengo una plantilla nueva en la cual no me funciona, que código tendría que modificar en la plantilla para que me funcione este script?? como puedo saber que es lo que anula el script??

    ResponderEliminar
  20. Otra cosa, hay alguna forma de poner el titulo de las entradas populares arriba de la imagen y el resumen? Gracias

    ResponderEliminar
    Respuestas
    1. En un principio no tendrías que cambiar nada, sino añadir lo que aquí se explica. Al cambiar la plantilla perdiste todo lo que tenías en ella anteriormente por lo que tienes que empezar de cero.

      Y sobre los títulos de las entradas populares, prueba a añadir este CSS

      .PopularPosts .item-content {
      position: relative;
      margin-top:20px;
      }
      .PopularPosts .item-thumbnail {
      float: right;
      margin: 0 0 5px 5px;
      }
      .PopularPosts .item-title {
      float: none;
      position: absolute;
      margin-top: -20px;
      }

      Eliminar
    2. MUCHAS GRACIAS!! En serio!! con ese CSS quedó como queria :) Gracias x la ayuda :)

      Besos!

      Eliminar
  21. Hola. He tratado de aplicar tu tutorial para modificar el tamaño de una imagen de gadget. Lo que sucede es lo siguiente: Eliminé la cabecera. Luego añadí un gadget de imagen al que le puse una imgen mas o menos grande con el logo de mi blog. Pero cuando agrego la imagen en el gadget me aparece esta frase "La imagen se reducira a 760 pixeles". Cuando eso sucede la imagen me queda chica para mi gusto. Cuando le destildo en esa opcion la imagen queda muy grande. ¿Como puedo hacer para modificar esa restricción de 760 pixeles a un tamaño que yo quiera (uno intermedio, por ejemplo)?

    ResponderEliminar
  22. Ya lo solucioné. Gracias de todos modos. :)

    ResponderEliminar
    Respuestas
    1. Jajaja... Aquí es pertinente un gran "de nada" ;)

      Eliminar
  23. Hola. Me pregunto si se podría sólo modificar el height a las imágenes, por ejemplo que queden: 72px de ancho / 105px de alto. ¿Me hago entender?

    ResponderEliminar
    Respuestas
    1. ¡AH! No, ya lo he conseguido. :D
      Mira "Destacados", a eso me refería: https://estanteriapoetica.blogspot.com

      ¡Gracias! Sin este post no lo hubiera conseguido.

      Eliminar
    2. yo no lo he conseguido averiguar por mi misma. Como lo has hecho Vagabundo Poético?

      Eliminar
  24. Eres grande!! yo soy diseñador y no sabes el dolor de cabeza que me dio este asunto pero gracias a ti ya e solucionado y puedo continuar con mi diseños, gracias! :D

    ResponderEliminar
  25. Perfectirijillo!!!! <--- Como ned flanders. y yo volviendome loco cambiando las dimensiones en la plantilla.

    ResponderEliminar
  26. Hola de nuevo tengo un problema con las imagenes, a mi me funciono muy bien es script pero el gadget no muestra la imagen completa (le da como un zoom), he estado cambiando el css en mi plantilla y no logro mostrar la imagen completa. Ayudame porfa con este gadget de entradas populares. Aqui el blog http://pelisday.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Eso es porque el código que sale en esta entrada está preparado para sacar una sección cuadrada de la imagen original. Si quieres mostrar la proporción original, simplemente cambia esta parte:
      "s"+size+"-c"
      ...por...
      "s"`+size
      ...quitando ese -c.

      Eliminar
    2. Oloman no funciono, cuando hice eso, la imagen se quedo con el mismo zoom y perdio la calidad. No se que hacer :(

      Eliminar
    3. Jajajaja por fin!!!! he usado el Scritp del comentario 1.2 de esta entrada tuya http://www.oloblogger.com/2012/08/miniaturas-blogger-grandes-redondas.html y funciono perfectamente el zoom ya se ha quitado, mira como se ve ahora el gadget popularpost http://pelisday.blogspot.com/

      Eliminar
    4. Vale, usaste un sistema simplificado del script, pero la clave estaba en quitar esa -c que te dije. Me alegro de que solucionaras tu problema.

      Eliminar
    5. Yo quite esa -c y no me funciono, como te lo dije en el comentario 27.2.

      Eliminar
    6. Quitar la -c era para quitar el zoom, puesto que las que llevan el -c son cuadradas. Para la resolución habría que elevar el valor de SIZE. Echa un vistazo a esto, por si no lo conoces.

      Eliminar
    7. Oloman ya resolví el problema, cuando me dijiste que quitara la -c en realidad lo que debí de quitar era +"-c" del código, entonces quedaría así: "s"+size.

      Eliminar
  27. jajajaja me fije lo que pusiste en el comentario 27.1 que pusiste eso mismo que dije, pero tenias que decir que quitara +"-c" .

    ResponderEliminar
  28. estoy usando miniaturas en los resumenes de entradas en el index, pero no me agranda las imagenes con el segundo codigo, solo con el primero pero pierdo calidad... uso el id Image thumb, esta bien???

    ResponderEliminar
    Respuestas
    1. Antes de ver otras cosas ¿puedes probar con lo que se explica en esta entrada que es específica para sumarios?

      Eliminar
  29. hola! he intentado colocando este codigo pero no me funciona, lo que pasa es que estoy usando un script para generar random de entradas de mi blog.

    Pero no me funciona, como puedes ver Acá en esta entradas he creado un div con imagenes, mientras que en el otro de abajo es el Random de entradas aleatoria el cual se ve con una mala calidad las imagenes este es elCodigo que he colocado para generar ese Random de entradas.

    Lo que necesito es que esas imagenes del codigo random se vean con buena calidad.

    ¿Como puedo hacerlo? mira buien el codigo que te he dejado! gracias! un saludo desde Republica Dominicana.

    ResponderEliminar
    Respuestas
    1. Otra Aclaración! el tamaño de las imagenes los agrandé yo.

      Eliminar
    2. Hola Enmanuel. Tendrías que editar el script ese localizando el momento en que se saca la imagen del feed y a continuación añadir una llamada para que la imagen antes de "imprimirse" se mande al código que yo propongo y vuelva ya de la dimensión deseada.

      La variable que guarda la dirección de la imagen es c y está en esta parte:
      {var c=l.media$thumbnail.url}else{c="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}

      Eliminar
  30. Realmente no soy bueno en esto de javascript, me podrias colocar el codigo para de esa manera probarlo? de como hacerlo.

    ResponderEliminar
    Respuestas
    1. Lo siento Emmanuel, pero ando fatal de tiempo y eso sería construir casi totalmente algo particular tuyo. Las indicaciones que te di son bastante, pero efectivamente si no sabes nada (o muy poco) de JavaScript...

      Eliminar
  31. Muy buenas.

    Quisiera utilizar este código para agrandar las imágenes de los post resumidos (sumarios).

    Supongo que tendría que modificar esta parte: redimin("PopularPosts1",200);

    Sin embargo ya he probado todo y llevo 2 horas y no lo consigo con cosas como: data:post.snippet, data:post.thumbnailUrl, data:post.snippet, item-thumbnail img, etc.

    ¿Qué debería poner? Un saludo.

    ResponderEliminar
  32. Esto es sólo para gadgets, pero ya vi que hiciste la pregunta por otra entrada que hablaba específicamente sobre los sumarios. Ya lo veo por allí (http://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html)

    ResponderEliminar
  33. Perfecto, lo utilicé para un script de related posts que saqué de no se que blog en inglés, y ha funcionado a la primera. Se ven las imágenes perfectamente nítidas. Gracias.

    ResponderEliminar
  34. Hola! Llegaste a resolverlo para class? Lo nombraste en el comentario 6.2

    ResponderEliminar
    Respuestas
    1. Hola Martina
      En concreto ¿dónde quieres agrandar las miniaturas?

      Eliminar
  35. Saludos, muy bueno tu blog, necesito ayuda en algo, mi post tiene los gadget mas mas populares y al final de cada entrada los articulos relacionados y ambos tiene una imagen en miniatura que no sale completa, algo asi como que hace zoom en medio de la imagen, y yo quisiera quitar eso y que salga la imagen normal, no haga zoom en medio, porque si el personaje esta en la derecha o izquierda de la imagen de portada de cada articulo, en la miniatura no sale porque hace el zoom al centro, busco los gadget en los codigos, pero no se que tocar, o que quitar en los codigos css de cada gadget, para que deje la imagen normal :S aver si me puedes ayudar

    ResponderEliminar
    Respuestas
    1. Hola

      Al ser las miniaturas cuadradas y las originales rectangulares, la única manera de que salgan bien las imágenes (sin deformar), lógicamente es haciendo un recorte cuadrado.

      Otra cosa distinta es si el recorte se hace bien (del centro) o mal (de una esquina). Esto segundo es lo que creo que te pasa a tí.

      Sólo me fijé en el gadget de las entradas relacionadas, pero en las imágenes que ví que no sale un recorte centrado, da la casualidad de que la dirección no es la directa que te da Blogger, sino otra, por lo que supongo que son posts en los que subes a Picasa (Google Fotos) y luego pones la imagen.

      Creo que se solucionaría el problema si subieras directamente las imágenes de tus posts desde el editor de Blogger.

      Eliminar
  36. Amigo, primero que nada para agradecerte, pero he aplciado el código en un blog y las imagenes crecen pero siguen con baja calidad.lo he usadoen otros y ha funcionado perfecto. a que se debe? gracias! Este es el blog en el que aparecen mal hasta el momento! http://www.donlengua.com/2016/09/tiroteo-en-colegio-de-mariperez-termina.html

    ResponderEliminar
    Respuestas
    1. Hola Lucas. Supongo que te refieres a tu gadget de Posts Populares de ese blog. Si es así, actualmente yo veo imágenes de 300x300 píxeles con ese mismo tamaño y por tanto, no es posible sacarlas con mayor resolución. Quizás las originales de los correspondientes posts son pequeñas.

      Eliminar
  37. Gracias por tu respuesta Oloman. No he logrado hacer que funcione tu código ene ste blog debido a que algún código que tengo impide su funcionamiento, pero lo he resuelto con este truco :
    primero busqué la linea " post.featuredImage, 72, " y cambié el 72 por 300 (que es el tamaño en el que quiero las miniaturas), luego agregué el siguiente código antes de /b:skin y con eso solucioné todo.

    .popular-posts ul {
    padding: 0px;
    margin: 0px;
    text-align: center;
    }

    .popular-posts a {
    font-size: 10pt;
    text-transform: uppercase;
    }

    .PopularPosts .widget-content ul li {
    padding: 0px;
    list-style: none;
    margin-bottom: 10px;
    }

    .PopularPosts .widget-content ul li:hover {
    opacity: 0.7;
    }

    ResponderEliminar
    Respuestas
    1. Pues para mí que se veían ya bien cuando le eché un vistazo a tu blog, pero en fin, si lo tienes solucionado mejor.

      Tu pregunta me ha dado la idea para un post dónde explicar cómo hacer esto mismo pero con el nuevo código de los Posts Populares que básicamente consiste en lo que has comentado de cambiar el tamaño en el código.

      Eliminar
    2. En realidad tenía otro código que por algún motivo no dejaba que tu código funcionara bien. Pero me fue muy útil tu información, de hecho la tengo en varios blogs. Por cierto, tienes algún código que acelere la página en la carga? he reducido imágenes y todo pero me sigue saliendo lenta. Gracias y saludos!

      Eliminar
    3. ¿Quieres magia? XD

      Supongo que cuando dices que te sigue saliendo lenta te refieres a alguna utilidad de esas que califican tu blog, porque a "ojímetro", a mí no me parece demasiado lenta.

      Además, casi seguro que la mayor parte del peso se lo llevan los vídeos tanto en portada como en la barra lateral, ya que se cargan unos cuantos de golpe y supongo que no quieres prescindir de ellos.

      Si quieres probar, quizás te resulte aplicar algo parecido a lo que publiqué en esta entrada.

      Eliminar
  38. Hola Oloman, lo quisiera aplicar en la pagina de resultados de busqueda por etiquetas para agrandar las imagenes, cual seria el id ?

    ResponderEliminar
    Respuestas
    1. Tendría que ver tu página para decirlo a ciencia cierta, pero pienso que con que uses #Blog1 puede valer. De todas formas, en tu caso, para que no se agranden las imágenes también en los posts normales, el código JavaScript lo deberías meter con una condición para que sólo se ejecutara cuando estás en ese tipo de páginas (página de resultados de búsqueda).

      Eliminar
  39. Me Funciona! pero ahora no se como hacer para modificar la altura.

    ResponderEliminar
    Respuestas
    1. Hola Ana. Si lo conseguiste, esta parte del código ("-c") lo que hace es sacar un cuadrado y en ese caso la altura será siempre igual al ancho.

      Eliminar