Miniaturas para sumarios más grandes. Blogger | Oloblogger Con este breve código solucionaremos una pega que tiene el uso de data:post.thubnailUrl , como fuent...

7 de marzo de 2012

Miniaturas para sumarios más grandes. Blogger

Con este breve código solucionaremos una pega que tiene el uso de data:post.thubnailUrl, como fuente para conseguir la imagen en miniatura en un sistema de sumarios: su pequeño tamaño.

Si alguien lo leyó y se acuerda, en Sumarios automáticos sin JavaScript vimos un sistema muy ligero y práctico para crear esos resúmenes en la página de inicio, basado sólo en etiquetas data. Recordamos que las que utilizábamos eran:

  • data:post.snippet ► un pequeño resumen del texto
  • data:post.jumpText ► el salto "More"
  • data:post.thumbnailUrl ► una miniatura de 72x72 px extraída del post



La principal ventaja de usar este sistema es que no había que cargar todo el contenido del post, leer y recortar el texto, leer y recortar la imagen y sustituir todo. Eso es lo que normalmente hacen los scripts que generan este tipo de resúmenes.

Y si me pareció (y me parece) mucho mejor este otro sistema con etiquetas data, es porque con él aprovechamos los datos que ya recopila Blogger de forma rutinaria y simplemente los mostramos, lo que supone una enorme ganancia en tiempo de carga.


Sin embargo, la miniatura era tan pequeña que nunca me terminó de agradar al 100% estéticamente hablando. En la portada de este blog podéis ver que ya las dejé cómo me gustaban -más grandes- y fue con el siguiente sistema.


Será mediante un pequeño script que, aprovechando la particularidad del sistema de archivo de imágenes de Blogger, busca la imagen que tiene la subcarpeta s72-c, que es precisamente la que tienen este tipo de miniaturas, y cambia esa carpeta por otra que nos muestra una imagen más grande (Ver: La ventaja de subir una sola imagen y disponer de cientos).


Este es el código que habrá que insertar antes de </head>:

<!-- Reemplazar miniaturas de 72px por otras de tamaño 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="Leer post completo" alt="'+title+'"/></a>';
if(imagen!="") return devolver; else return "";
}
//]]>
</script>

El funcionamiento es simple: se recibe la dirección del post, su título, la miniatura y el tamaño nuevo que deseamos y ese código monta un html consistente en una imagen con enlace a ese post y un title con el título de la entrada. Además, la carpeta de la miniatura la cambia para que sea del tamaño recibido, que es fundamentalmente para lo que montamos esto.

De esta manera, la imagen de la izquierda que es la que mostraría data:post.thubnailUrl (una s72-c, recorte cuadrado de 72px), se podría ver cómo la de la derecha, que es otro recorte de la misma imagen pero de 150px.


Nos falta un segundo y último paso que consiste en situar la llamada a este script justo dónde queremos mostrar la miniatura y desde allí pasar los datos necesarios. Este sería el código y lo normal es que vaya justo antes del texto-resumen. Si vais a utilizar data:post.snippet, pues justo antes de él.

<script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,150));</script>

El valor de 150 que veis marcado en verde, es el que marcará el tamaño de la nueva miniatura. Ahí podéis poner el que queráis, siempre teniendo en cuenta el tamaño original de la imagen.

¿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

124 comentarios :

  1. Un script muy bueno. :)

    Yo uso una versión similar pero con jQuery en la última plantilla que he creado y lo mejor que puede utilizarse en otras cosas como las Entradas populares. ;)

    Abrazo. :)

    ResponderEliminar
    Respuestas
    1. Bueno, como siempre, normalmente no hay una única solución. A fin de cuentas jQuery no es más que una librería JavaScript.

      Y efectivamente, las entradas populares también usan la imagen s72-c. Bien visto :)

      Eliminar
  2. Seria bueno poder elegir la longitud del resumen, espero que algun dia lo implementen
    o algo parecido. lo mismo para las miniaturas.

    ResponderEliminar
    Respuestas
    1. Sí. Esa es otra cosa que tengo pendiente de ver si puede arreglarse con alguna información (variable DATA) pre-existente de Blogger, pero me temo que no va a ser fácil encontrarla. Y eso suponiendo que exista...

      Eliminar
    2. Hola amigo olaman 9 meses despues de esta respuesta, has encontrado algun codigo que permita variar la longitud de los resumenes, espero ayas encontrado alguna y puedas compartirla.

      gracias y saludos.

      Eliminar
    3. No, Dori. No hay ninguno que se pueda usar con el sistema sin JavaScript. Te dejé un enlace en un anterior comentario que hiciste sobre este mismo tema, que te llevaba a un sistema en el que sí podías elegir la longitud de los resúmenes.

      Eliminar
  3. Oloman solicito tu ayuda yo se que no es el post adecuado para pedir apoyo pero aunque sea espero lo leas.
    Mi blog es http://winboox.blogspot.com/ todo funciona adecuadamente, y cuando entro a algunos hipervinculos entra bien y todo pero en algunos manda un mensaje diciendo algo como:

    Advertencia: bla bla bla winboox.blogspot.com incluye contenido de usuarios.lycos.es.
    ¿A que se debe? o ¿Como podria solucionarlo? Mi blog tiene un poco mas de 2 años y no quisiera perderlo o que empezara a caer. Espero me contestes aqui o en mi correo si no quieres mantener el comentario. Espero me puedas ayudar.
    Miguel20105@gmail.com

    PORFAVOR SALUDOS

    ResponderEliminar
    Respuestas
    1. No sé qué puede ser Mike, pero el mensaje parece indicar que tienes algún widget o incluso algún material (imagen, vídeo, etc.) que pudiera tener derechos de autor. Eso explicaría por qué en unos enlaces te sale y en otros no. Tendrías que analizar qué tienen en común aquellos en los que salta.

      Eliminar
    2. Gracias Oloman, ya analice mi plantilla y busque en el código HTML el link que me mandaba de donde, era la imagen que tenia agregada en el cuadro de comentarios, por eso solo me aparecía al abrir un post y no en la pagina principal, pero muchas gracias!

      Eliminar
  4. Pues una vez visto esto, he hecho un mix en mi resumen de portada. El texto lo sigo truncando con java, pero la imagen la tomo de esta forma en vez de redimensionando la original. Aunque se siguen cargando los posts enteros, el tiempo de carga es menor porque no se redimensionan imágenes. Puede parecer una tontería, pero San Google me lo ha premiado con 3 puntos en el Page speed Test.

    El resumen de texto no lo cambio de momento, porque el snippet me parece demasiado corto. Si se pudiera modificar su longitud... Otra opción sería hacer como tú, y mostrar un resumen largo en el post más reciente y el snippet en el resto... queda bastante bien...

    ResponderEliminar
    Respuestas
    1. A mí tampoco me gusta el escaso contenido del snippet de Blogger, pero por ahora no se me ocurre otra manera distinta de hacerlo que con JavaScript, tal y cómo tú lo haces ahora.

      Muy observador con lo de mi portada ;) De todas formas te comento que yo ya no uso el recorte de texto (script), porque directamente he eliminado el texto de las páginas de navegación (las que no son la de Inicio) y ahora sólo muestro títulos. Esa es la parte más pesada del script.

      Cuando sí mostraba texto, no tenía más remedio que usarlo si no quería ir añadiendo MORE a todas mis entradas antiguas, pero ahora sólo tengo que hacerlo en las nuevas publicaciones. Ya comenté que con la nueva plantilla intentaba reducir el tiempo de carga.

      Eliminar
    2. Pues tal como lo has hecho debe ser la forma más ligera, y muy ingeniosa por cierto. Eres un crack :)

      Eliminar
  5. Si quiero implementar este sumario, supongo que primero debo borrar el que tengo ¿no?, es un buen trabajo sin duda.

    ResponderEliminar
    Respuestas
    1. No exactamente. Esto no es un sistema de sumarios, sino sólo una parte de él. Esto sólo se ocupa de sustituir imágenes pequeñas por otras más grandes. En tu caso, añádelo justo después de dónde tengas <data:post.snippet/>

      Eliminar
  6. Jamás le puse atención a la URL de las thumbnails, sin duda un script muy útil :)

    Un saludo Oloman.

    ResponderEliminar
    Respuestas
    1. Seguro, pero sólo mientras Blogger no vuelva a cambiar algo. En este caso, en el sistema de imágenes :(

      Eliminar
  7. No me funciona amigoo...
    dejame te explico y me ayudas porfavor..
    este metodo es unicamente para agrandar la imagen que muestra el sumario de esta entrada

    http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html

    ¿Verdad?

    pues bien hago lo que tu dices en mi blog de pruebas pero no me sustituye la imagen, sino que me pone otra, ocea que lo que hace es dejarme la imagen de 72px y me otra antes de dicha imagen....

    ¿que puedo hacer para que remplaze la imagen y no que me ponga 2?
    te lo agradeceria mucho :)

    ResponderEliminar
    Respuestas
    1. Seguramente es que dejas data:post.thubnailUrl. Realmente lo que hay que hacer es sustituir esa variable por el script, que ya se ocupa él de redimensionar e "imprimir" la grande.

      Eliminar
  8. Oloman esto es aplicable a un widget. Mira en mi blog tengo varios gadget de entradas recientes con su correspondiente miniatura. El tema que si aumentas el tamaño de dicha miniatura sale muy pixelada. Existiría alguna forma de que saliera nítida y aumentar por ejemplo a 150px como indicas?. Mi blog El antepenúl...bueno si ya me conoces!. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Con algunas modificaciones sí. Te he mandado a tu correo una prueba. Dime que tal te va y la publico si es eficaz.

      Eliminar
  9. Otra pregunta aunque es off-topic, es como has hecho para que el botón de compartir de twitter quede alineado correctamente. En mi caso deja un espacio muy grande con el botón siguiente. Uso tu sistema. Un abrazo....cuanto trabajo te doy.

    ResponderEliminar
    Respuestas
    1. Lo tengo metido dentro de un DIV con este estilo:
      style="float:right;text-align:center;width:96px; padding:2px 0 0 0;margin:0;"

      Eliminar
  10. Y otra duda!jaja, también off-topic. Me gustaría poner un cartelito eventual en el blog en cualquier lugar de este, cabecera por ejemplo. Sería un texto con un fondo de color. Como hacerlo?

    ResponderEliminar
    Respuestas
    1. Crea un div con las propiedades que quieras y entre ellas incluye estas:
      position:fixed;
      top: 10px;
      left: 10px;

      Cambia los valores top y left al gusto e inserta el código antes de </body>

      Eliminar
  11. Hola olaman primero agradecerte por los post q publicas ya q me ha sido de mucha utilidad. El problema q tengo ahora es q no consigo extraer un contenido especifico de un post desde el home, es decir un texto que se encuentra dentro de un div en mi post. Tengo entendido q el data:post.snippet nos proporciona un resumen pero en este caso quiero personalizar para que me muestre el texto que yo quiero. Espero puedas ayudarme gracias.

    ResponderEliminar
    Respuestas
    1. No sabría cómo hacer eso automáticamente de manera eficiente. Se me ocurre que podrías indicar que en página Home todo el texto del post fuera con display:none excepto ese div que tendrías que marcar con una clase o ID específica, pero no veo claro que fuera un sistema rápido.

      Eliminar
  12. hola oloman comente en un post mi problema pero con este script lo consegui solucionar pero me surgio una duda saber si se podria modificar el data:post.snippet para poner mas caracteres con javascript

    ResponderEliminar
    Respuestas
    1. Hasta la fecha no he encontrado ningún sistema para obtener más caracteres del resumen de serie de Blogge (data:post.snippet). Sin embargo hay métodos en JavaScript para generar un resumen de los caracteres que quieras: sumarios javascript.

      Eliminar
  13. Hola, Oloman. Me gustaría aplicar este truco en el widget de Entradas Populares. Ya lo he intentado pero no aparecen las miniaturas. Me podrías explicar dónde poner el segundo código y si debo cambiar algo? Gracias

    ResponderEliminar
    Respuestas
    1. Mejor utiliza lo que se explica en esta otra entrada:
      Agrandar las miniaturas de los gadgets.

      Eliminar
    2. Genial Oloman. Gracias, esto me servirá. Saludos

      Eliminar
  14. Hola Oloman, podrias subir un tutorial referente a tablas usadas en este formato

    class="tabs
    a href="#tab1">Opcion 0
    a href="#tab2">Opción 1
    a href="#tab3">Opción 2

    div class="tab_container"
    div id="tab1" class="tab_content"
    1
    /div
    div id="tab2" class="tab_content"
    2
    /div
    div id="tab3" class="tab_content"
    3
    /div
    /div

    tube q eliminar ul, li y los cierres
    eso se coloca en en la entrada pero para que funcione tiene que llevar codigos en la plantilla y quisiera que me puedas responder o alguna pagina que me recomiendes Muchas Gracias

    ResponderEliminar
    Respuestas
    1. Eso no tiene pinta de tabla. Esto es una tabla y seguramente lo que hace ese código es crear un menú o más bien un sistema de pestañas ¿es algo de eso?

      Eliminar
    2. Muy interesante la funcion delo planteado, exactamente no era lo que deseaba pero me gusta, me ayudo mucho gracias Oloman, siempre con muy buenos datos, un 10+

      Eliminar
  15. Oloman ia encontre la pagina en donde encontre la tabla de contenidos, quisiera usar la misma tabla, y lo e buscado por todo internet, crees que puedas subir un tutorial referente a esto o algo que me puedas recomendar, porfavor dime que hacer. Muchas Gracias Oloman

    http://pelis-tube.blogspot.com/2012/07/entidad-sobrenatural-oculta-eso-2010.html

    ResponderEliminar
    Respuestas
    1. Le he echado un vistazo y eso está hecho con jQuery. No parece complicado, así que sólo es cuestión de que tenga un rato de esos de los que ando escaso :(

      Eliminar
    2. ok Oloman, estare esperando ese tiempo :D muchos exitos!

      Eliminar
  16. hola ^^ sera que se puede hacer que la imagen no sea cuadrada sino rectangutar pero más alta que ancha, y tambien si las publicaciones pueden estar dividas en dos, osea como el actual sumario que tengo en el blog .:: ✩ Nightmare Scans ✩ ::. quiero cambiarlo, ya que me trae un poco de problemas eso de que no coinsida el numero de entradas a mostrar ^^ gracias

    ResponderEliminar
    Respuestas
    1. Hola, con este sistema sólo puedes hacer los recortes que permite Blogger y que están relacionados en esta otra entrada. Cuando lo veas comprobarás que la única forma es redimensionando la original, si esta también es más alta que ancha y eso te dará el problema de que el ancho será variable. Todas las originales tendrían que tener el mismo tamaño (o la misma proporción) para que funcionara bien del todo.

      Con respecto a que las publicaciones estén divididaa en dos, este sistema no afecta a eso. Sólo se ocupa de recortar la imagen. Y no sé que quieres decir exactamente con lo del número de entradas a mostrar...

      Eliminar
  17. Hola Oloman, me pasa lo mismo que a Mynar García. Me aparece el thumbnail de 150px junto con el de 72px. Puedo borrar el de 72px eliminando el codigo que escribe post.thumbnailUrl pero después es como si no reconociera el thumbnail de 150px porque no cambia de posición al probar float:right y float:left como lo hacía el de 72px. Un ayudita please? Muchas gracias y enhorabuena por el blog, lo he descubierto al ser el blog del mes y me vino como caído del cielo!

    ResponderEliminar
    Respuestas
    1. Buenas. El problema es que tú haces los sumarios no con el truco que no usaba JavaScript, sino con él.

      En ese caso tienes que cambiar el código de esa rutina que crea los sumarios. En concreto esta línea:
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_thumb_height+'px"/></span>';

      Ahí podrás cambiar el lado de flotación el padding.

      Eliminar
  18. Buenas tardes Oloman.
    A ver si me puedes echar un cable...
    Lo que quiero, y que me trae de cabeza, es poder cambiar en mi blog el tamaño de mis miniaturas. Veo que todas salen del famoso "s72-c" y la cuestión es dejarlas e "s128" osea SIN RECORTAR ya que es un blog de fotografía.
    Los famosos "thumbail" tanto para enviar enlaces a facebook, las miniaturas de entradas populares, listas de blogs, etc todas van con miniaturas recortadas de 72 x 72 y lo que me gustaría es que queden sin recortar a s128.

    No se si me puedes ayudar a implementar algún código en mi plantilla o ver que se puede hacer. Soy un poco novato en estos temas...
    Te dejo el enlace a mi blog:
    http://fotografiajuanjomediavilla.blogspot.com

    Un saludo y muchas gracias de antemano.

    ResponderEliminar
  19. Eso es fácil si conoces cómo maneja Blogger el almacenamiento de imágenes. Echa un vistazo al enlace del post titulado "La ventaja de subir una sola imagen y disponer de cientos".

    Sólo tienes que cambiar esta parte
    ('/s72-c/','/s'+size+'-c/')
    ...por esto otro
    ('/s72-c/','/s'+size)

    ResponderEliminar
    Respuestas
    1. Oloman, Estoy buscando esto hace rato específicamente para facebook... Quiero corregir la imagen "s72-c" que toma Facebook, y por ejemplo forzar que tome "s200-c". Entonces:
      1) El primer código queda incambiado y va antes de /head?
      2) Donde coloco el segundo código?
      3) Este segundo código quedaría así?
      -script type='text/javascript'-document.write(redimthumb("-data:post.url/-","-data:post.title/-","-data:post.thumbnailUrl/-",200));-/script-

      Eliminar
    2. No. Para Facebook habría que hacer bastantes más florituras. Lo que no entiendo es por qué no te sirve esa. Yo tengo puesto esta etiqueta META que saca la miniatura de 72px y me va bien:
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

      Eliminar
    3. Gracias por tu respuesta. Sucede que con o sin esa linea que me dices, Facebook da el mensaje "Provided og:image is not big enough. Please use an image that's at least 200x200 px."
      En lugar de la miniatura de la entrada, Facebook utiliza la foto del banner del sitio, que es casi 1000 de ancho.
      Por eso es que pensé que si podía forzar a la miniatura a 200 Facebook no usaría el banner.
      Se te ocurre como hacerlo?

      Eliminar
    4. A ver si en tu plantilla tienes "post hentry". Si es así prueba con schema
      haciendo que antes de <a expr:name='data:post.id'/> se quede esto:

      <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
      <b:if cond='data:post.thumbnailUrl'>
      <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
      </b:if>
      <meta expr:content='data:blog.blogId' itemprop='blogId'/>
      <meta expr:content='data:post.id' itemprop='postId'/>

      Eliminar
    5. Facebook sigue tomando la imagen recortada de 72px.

      Coloque estos códigos:
      1- la etiqueta meta
      2- el código antes de -a expr:name='data:post.id'/-
      3- el código para reemplazar miniaturas de 72px por otras de tamaño X antes de /head.

      El tema es que no se donde colocar esto:
      -script type='text/javascript'-document.write(redimthumb("","","",300));-/script-

      Eliminar
    6. Tienes razón y no sé por qué pero a mí me pita eso de las miniaturas. Esto de Facebook es algo que me lleva un poco loco porque es sistema ABS (aveses va, aveses no va).

      Voy a ver si preparo una chapuza...

      Eliminar
    7. ¿No tendrá que ver que aún no he puesto la última parte del código?
      En el post dice "Nos falta un segundo y último paso que consiste en..."
      Ese código no se donde colocarlo, ¿qué me sugieres?

      Eliminar
    8. Evidentemente, sin ese segundo paso no te va a funcionar nada porque es lo que hace que la función se ejecute.

      De todas formas ayer estuve toda la tarde intentando hacer algo para que en las META saliera una imagen de más de 72px, pero no lo logré, ni con este ni con otros tres sistemas que probé. Pienso que no debe ser fácil modificar las META al vuelo, pero quizás a alguien se le ocurra una idea feliz... algún día.

      Eliminar
    9. Aquí hay una solución para la descripción que viaja a Facebook y también para la imagen.
      Sin embargo entiendo que la imagen es redimensiado a partir de la de 72px a una de 200 para que Facebook tome la del post y no otra, lo cual hace que la imagen que va a Facebook sea correcta pero de muy baja calidad....
      http://www.bloggerplugins.org/2012/01/wrong-description-image-facebook.html

      Eliminar
    10. Así es, la redimensión hace que sea de poca calidad, pero más vale eso que nada. Gracias

      Eliminar
    11. Hola. Como pone en el enlace de "Administrador" la descripción se consigue colocándola entre <"p"><"/p">. Pero ocurre que el "snippet" de blogger tiene tan pocos caracteres que, creo, no lo coge Facebook. Poniendo en algún punto del "post-content· algo así como :

      <"p style='display: none'><"data:post.snippet/"> (Publicado por <"data:post.author/"> el <"data:post.dateHeader/"> a las <"data:post.timestamp/"> para el blog «<"data:blog.title/">»)<"/p">

      He logrado que aparezca. (antes hay que pasar por el debugger de Facebook para que actualice la caché).

      Saludos y gracias.

      NOTA: he puesto las comillas para que no interprete el código como html

      Eliminar
    12. OK. Aunque pienso que todavía no es la solución ideal, gracias por la aportación.

      Eliminar
  20. Una pregunta, ojala me puedas echar una mano.. yo quisiera hacer lo mismo que haces con tu imagen pero cojer la imagen de incio y no del post..
    Tengo una template de galeria de videos, que automaticamente coje la imagen del video de la ebtrada y la pone en inicio.. yo quisiera cojer la imagen de inicia y ponerla en la entrada.. eso se puede?

    Te paso el blog que monto para que se vea mejor el ejemlo: http://videosvide.blogspot.com/

    Seria de enorme ayuda!

    Muchas Gracias anticipadas!

    ResponderEliminar
    Respuestas
    1. Hola. Lo que entiendo es que quieres poner una imagen en la página de Inicio y que esa imagen se cargue luego en el post ¿es así? Si es así tendrías que hacerlo al revés. Cuando crees un post coloca una imagen y luego el vídeo. De esa manera en el post tendrás tu imagen y el sistema de sumarios la tomará para que se muestre en la página principal del blog.

      Eliminar
    2. Muchas gracias por tu respuesta, el problema que tengo es que si pongo "Entradas mas visitadas" no sale la imagen, por que el sistema busca la imagen en el post y no la encuentra.. pero la template que tengo, nose como se lo hace pero coje y le hace una captura al video, y la pone en el inicio en cada entrada.. y era haber si había alguna manera de mostrar la misma imagen en la entrada, para que el sistema detecte.. y muestra en el widget "entradas mas visitados" lo que intento buscar es algo automatico.. para no tener que hacer la foto cada vez que pongo 1 video.. no hay ninguna solución? o alguna chapusa xD que muestre la misma imagen que en el inicio pero en el post..

      Muchas gracias por tu interes de ayudar! :) Se agradece y mucho!

      Éxitos!

      Eliminar
    3. Los gadgets de Blogger sólo reconocen como miniaturas las propias imágenes subidas a Blogger y esa que te sale a tí sale de YouTube, por tanto te vale para los sumarios, pero no para Posts Populares, Entradas Recientes, etc.

      Comprueba la dirección de esa miniatura y la de otra imagen subida por tí y verás la diferencia en el formato de la URL. Automático si quieres que te sirva para ambas cosas, va a ser que no...

      Eliminar
  21. y con respecto a la parte del texto, como podría hacer para que el resumen sea un poco mas extenso y no tan corto.

    ResponderEliminar
    Respuestas
    1. Para resúmenes de texto a medida, tendrías que recurrir a algo como esto: Sumarios automáticos

      Eliminar
  22. Hola Oloman entonces para poner una imagen de 130x 90 px como deberia hacerlo? Gracias

    ResponderEliminar
    Respuestas
    1. Hola podrías hacerlo de esta misma manera pero sacando un cuadrado de 130x130.

      Luego tienes dos opciones, la fácil que es forzar el tamaño de la miniatura en cuanto a altura a 90px, lo cual la deformaría, o bien ponerle ese tamaño (130x90) al contenedor de la miniatura y añadirle un overflow:hidden para que no se vea lo que "sobra"

      ¿Hablo en ruso o se entiende?

      Eliminar
  23. Respuestas
    1. Me faltó añadir... "sin ánimo de ofender". Es nunca sé a qué nivel tengo que bajar. En ocasiones explico de más y otras veces me dicen que soy demasiado técnico o_O

      Eliminar
  24. Una ultima cosita me ha funcionado perfecto, sin embargo cuando pongo una pagina no me sale el texto. Por que?
    Ejemplo:
    En esta pagina va bien http://www.motojuegos.org, pero en una pagina independiente no se ve nada http://www.motojuegos.org/p/juegos-friv.html

    ResponderEliminar
    Respuestas
    1. No sé qué quieres conseguir en la página estática pero es que son dos cosas distintas. En la página principal se cargan automáticamente las miniaturas de los posts y un pequeño resumen del texto de los mismoa, pero en la página estática ¿qué pusiste? Ahí sólo se verá lo que escribas.

      De todas formas sí que vi un texto, pero si lo tienes dentro del selector "pop-up" pues no se verá si no pasas el puntero por encima de algo... algo que no existe.

      Adivinando lo que intentas hacer, es posible que tengas que condicionar para que los resúmenes (miniatura más texto) sólo te salga en páginas tipo index. Así no se haraán resúmenes en las páginas estáticas.

      Eliminar
  25. Tengo claro como condicionar pero no exactamente lo que debo condicionar para que no me salga en las paginas estáticas

    ResponderEliminar
  26. Ya esta ya lo encontre http://www.motojuegos.org/p/juegos-friv.html gracias por tu ayuda

    ResponderEliminar
  27. No, necesitare tu ayuda porque debo condicionar el id main pero tengo puesto

    con lo que le estoy diciendo que si no es una pagina individual haga el thumb, pero no se como meter dos condicionales. Gracias

    ResponderEliminar
    Respuestas
    1. Se te quedó el mensaje a medias y no lo entendí. Para poner código HTML usa una herramienta que lo pasa a texto plano y que encontrarás a la izquierda (Herramientas online).

      De todas formas supongo que era la condición que tienes puesta así que te paso también este enlace.

      Eliminar
  28. Perfecto gracias al enlace de las condicionales. ya esta arreglado. Gracias Oloman

    ResponderEliminar
  29. Me gusta mucho la idea. Ya que implementé uno de los sumarios que pusiste en otra entrada y la foto queda muy pequeña. En concreto tengo
    Lo primero, Gracias por la explicación :)
    Despues de varios intentos con todos los data:post.snippet que encontraba y previsualizando despues los cambios.... Sólo en dos de ellos veo el aumento de la imagen pero el problema está en que me encuentro con las dos imagenes, la pequeña de antes y debajo de ésta la nueva mas grande. Si pongo el último código debajo de data:post.snippet me aparece la imagen pequeña , el resumen y debajo la grande....como puedo quitar la imagen pequeña?? Donde puede estar el fallo??

    ResponderEliminar
  30. ahora veo otro detalle. Tengo instalado SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON SNIPPET AUTOMATICO. Que antes no salió publicado porque puse la linea del código. Tambien veo que al final del primer post que no está cortado (se muestra completo) despues del final del cuerpo de la entrada sale las miniaturas, el resumen y el tipico leer mas... :S De momento creo que lo quitaré y lo dejaré tal cual. A que puede deberse?? no es compatible con los sumarios rapidos???

    ResponderEliminar
  31. Otra vez yo :) lo único que he conseguido es que no salga en la primera entrada y esa se quede como debe ser, pero la imagen pequeña en los resumenes no desaparece. He cambiado el segundo codigo de posicion dentro del codigo de sumario usando d referencvia data:post.snippet y lo único que consigo es cambiar el orden de aparicion dentro del cuerpo de la entrada: las dos imagenes seguidas, una arriba del resumen , otra debajo... así que no se

    Me encantaría dejar ese tamaño nuevo de la imagen en el sumario ya que el original es un pelin pequeño apra mi gusto. Y las dos juntas esteticamente no me gusta. Crees que habría alguna forma de eliminarla?? Gracias de nuevo y siento las molestias que pueda ocasionarte

    ResponderEliminar
    Respuestas
    1. Eché un vistazo a tu blog y creo que está ya como querías. Supongo que lo lograste arreglar en estos dos días de demora que llevo ¿no?

      Eliminar
  32. HOLA, tengo un problema que no se resolver, tengo un blog donde cuelgo cuentos narrados en videos por capitulos, el problema es que los videos se cargan como entradas y aparece la ultima en primer lugar, quedando los cuentos al revés, primero aparece el ultimo capitulo y en ultimo lugar el primero, ¿habría alguna forma de cambiar el orden de las entradas?.... gracias de antemano, un saludo

    ResponderEliminar
    Respuestas
    1. No, Pepa. Los blogs son así y siempre se ve en primer lugar lo último publicado.

      Sin embargo puedes editar las entradas y cambiar las fechas para que salgan en el orden que tú quieras.

      Eliminar
  33. Oloman, te dejo una consulta acá porque no se específicamente donde dejarla. Me gusta el truquillo que tenés en tu blog, en el cual el primer sumario tiene como el cuadrado caído. Creo que se ve muy bien y bueno, si querés compartir como lo hiciste, me gustaría aplicarlo en el blog de cine que cree (el cual figura en el enlace).
    Desde ya muchas gracias, un saludo.

    ResponderEliminar
    Respuestas
    1. En .contemini quita el overflow:hidden; y luego añade a .miniaturas unos
      -webkit-transform: rotate(-6deg);-moz-transform: rotate(-6deg);transform: rotate(-6deg);

      Sólo eso, aunque si lo quieres sólo para el primer sumario, eso último tendría que ser aplicado al selector .wrapfullpost:first-child .miniaturas {}

      Eliminar
  34. Oloman, muchas gracias.

    Te cuento, la primera parte sale a la perfección. Ahora, cuando intento que sólo se aplique al primer post no me sale. Hice varias pruebas y nada. Lo que no entiendo es exactamente donde tengo que poner .wrapfullpost:first-child.

    Por otro lado, cuando el cuadrado sale caído aparece negro de color de fondo, el espacio. ¿Cómo puedo hacer para ponerle otro color?

    Gracias nuevamente y espero no molestarte ;)

    ResponderEliminar
    Respuestas
    1. Eso de .wrapfullpost:first-child es un selector CSS y por tanto tienes que añadirlo en tu plantilla, en la parte de estilo dónde van el resto de selectores de tu blog. El fondo lo pones también en .contemini:

      .contemini {
      overflow: visible;
      background: white;
      }
      .wrapfullpost:first-child .miniaturas {
      overflow: visible;
      -webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);transform: rotate(-10deg);
      }

      Eliminar
    2. Oloman, te agradezco mucho la explicación. Sabés que cuando me respondiste lo volví a probar y no me funcionó. Recién volví a intentarlo y ahora si quedo perfecto. Me encanta como queda, un detalle que lo hace ver distinto :)
      ...
      Voy al post que escribiste sobre el perfil del autor debajo de las entradas :D

      Eliminar
    3. OK. Me alegro de que al final te saliera. Para otra vez suscríbete a los comentarios cuando dejes alguno y así Blogger te avisará cuando alguien conteste ¡pasó casi un mes que lo hice! :)

      Eliminar
  35. Hola Oloman,ante todo gracias y sabes que me funciona perfectamente, tus miniaturas, pero es que estoy obsesionado, siempre con quitar los máximos elementos en una plantilla. Pregunta ¿Se puede hacer sin utilizar javascript, solo con css? Gracias

    ResponderEliminar
    Respuestas
    1. Mientras no haya una DATA para imágenes distinta de data:post.thumbnailUrl, la respuesta es no. Esa que hay ahora y que utilizamos para los resúmenes (o sumarios) sin JavaScript, es de 72x72px y cualquier ampliación que hagas pixelaría demasiado. El asunto con este script es que la sustituímos por una más grande y ahí no tenemos problema con la calidad.

      De todas formas prueba con data:post.firstImageUrl y me dices, que yo no he tenido ocasión de probar a fondo y a veces me ha funcionado y a veces no.

      Eliminar
  36. Gracias Oloman por guiarme, pruebo y te comento. Un saludo

    ResponderEliminar
  37. Hola Oloman, necesito tu ayuda porfavor, pues veras le agrege el widget de "Noticias Relacionadas" a mi blog pero las miniaturas lanzan un Natural 72x72 y se me ve feo, llevo dias tratando con eso como puedo solucionarlo? Gracias...

    ResponderEliminar
  38. Hola Oloman,

    A mi me salen las miniaturas recortadas y estiradas, nose si es por este script, otro script, el CSS... ¡menudo lío!
    Te dejo la dirección del blog donde estoy probando este script, es un blog de pruebas así que a penas tiene nada: http://photonicaclientes3.blogspot.com.es/

    A ver si me podrías orientar un poquillo ¡saludos!

    ResponderEliminar
    Respuestas
    1. Hola. Te salen bien. Para que todas tengan el mismo tamaño y queden ajustadas a los rectángulos que forman el panel de la página principal, no queda más remedio que "recortarlas" para hacerlas iguales. No sé qué problema ves.

      Eliminar
    2. Quiero que salga la imagen tal cual, más chica no me importa, pero no recortada. Que cambie la proporción, pero que no se recorte ¿porqué pasa?

      Gracias por responder ¡saludos!

      Eliminar
    3. En ese caso se verán deformadas, pero si no te importa entonces te sobra todo este código. Será suficiente con buscar el selector (clase o ID) que contiene la imagen y ponerle un width y un height de las medidas que necesitas. Por ejemplo:
      #PopularPosts img { width: 160px; height: 80px;}

      Eliminar
  39. He conseguido aplicar este truco, pero el texto me queda debajo de la imagen. ¿Hay algún css que pueda utilizar para que el texto esté en la parte derecha de la imagen, estando esta a la izquierda?

    ResponderEliminar
    Respuestas
    1. Vuelvo a comentar para suscribirme al hilo... je je

      Eliminar
    2. Claro. Tienes que aplicar un float:left; al selector de la miniatura. No puedo ser más específico porque no sé qué estructura tienes (no sé en cual de tus blogs tienes esto)

      Eliminar
  40. Mil gracias por este post y por muchos otros que tienes. Tenía una suscripción mediante email hacia la página de mi protectora de animales. Hace poco cree el blog y no sabía cómo hacer para que la gente suscrita en mi base de datos le llegasen también las actualizaciones del blog. Me quedaba poder incluir la imagen sin que quedase muy mal. y gracias a tu post lo he conseguirdo.

    Mil gracias!!

    ResponderEliminar
    Respuestas
    1. De nada. Me alegro de que la información te haya servido.

      Eliminar
  41. Hola Oloman. El truco lo estoy aplicando en este blog http://goo.gl/DBPqJZ

    El problema como te dije es que no logro que el texto quede totalmente a la derecha de la imagen.
    Pruebo con algo así, pero nada: .Image.thumb {float: left; margin: 0 10px 5px 9;}
    ¿?

    ResponderEliminar
    Respuestas
    1. Tu script falla en eso, en que no mete ninguna clase especial para poder manejar las imágenes y no existe .Image:thumb, así que es imposible que así las configures.

      Si en tus entradas sólo hay vídeos y no hay imágenes, esto te funcionará:
      div[id^="aim"] img {
      float: left;
      padding-right: 20px;
      }

      Eliminar
    2. Ya lo logré. Al parecer había puesto mal el segundo script. Igualmente buen post.

      Eliminar
  42. Hola, me gustaría saber si esto se puede hacer pero en la versión movil, es decir, en las plantillas responsive, las thumbnails que colococa blogger son muy pequeñas me gustaria saber como ampliarlas, que se vean mas grandes, es casi lo mismo que explicas, pero quiero que sea los moviles. Gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Si realmente tuvieras una plantilla "responsive" no tendrías este problema, así que supongo que realmente usas una de las plantillas para móviles que Blogger facilita ¿es así?
      Si la respuesta es afirmativa, entonces no podrás modificar casi nada. Tampoco lo que comentas.

      Eliminar
  43. Saludos.

    Sé que este post es bastante antiguo y no conseguí que tuvieras otro más actualizado, pero a ver si me ayudas.

    Un blog que creé le subí 2 post de prueba. Las 2 imágenes hiper-pixeladas. Buscando y buscando dí con que la imagen se publicó a 72x72 de tamaño "natural" y no a 420x420 como debiera ser. El tema es que eso lo hizo blogger automáticamente.

    ¿Hay algo que hice mal?, ¿qué hacer?


    Gracias.

    ResponderEliminar
    Respuestas
    1. Reinaldo ¿dónde te ocurre eso que lo vea?

      Eliminar
    2. Saludos!

      En: http://www.ksbc.manrei.com/

      Eliminar
    3. Creo que Blogger no cambió nada. Simplemente es que la plantilla está mal diseñada en cuanto a eso.
      Si buscas seguramente hay alguna línea dónde se salga esto:
      <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

      Y eso siempre genera una imagen cuadrada de 72px. Es posible que haya más de una línea como esa.

      En su lugar usa esto otro:
      <img expr:src='resizeImage(data:postFirstImage,400,"1:1") />

      Eliminar
    4. Saludos Oloman!

      Las imágenes no aparecen sustituyendo la etiqueta. ¿Alguna otra idea? Gracias.

      Eliminar
    5. No veo que lo hayas cambiado...

      Eliminar
    6. Saludos!

      Después de varios intentos, di con que unificando tu idea con la etiqueta por defecto:

      img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,400,"1:1")'

      Dio resultado... Muchas gracias por el aporte!

      Eliminar
  44. Hola amigo tengo un problema espero puedas ayudarme ya que nadie lo ah hecho, tengo un blogger de tecnologia y al compartir mis post la imagen que se comparte con los post aparece recortada osea mas pequena.

    El detalle esque intente compartir el post por mi cuenta en google+ y me encontre con que si selecciono la imagen que quiero compartir del post aparece la original, pero me lanza la cortada como automatica, osea paracen dos una recortada y una bien, pero la recortada es la que se comparte automaticamente.

    Te dejo un ejemplo de las imagenes:
    recortada: https://2.bp.blogspot.com/-X3uc71u0YmA/VzepTBTmZAI/AAAAAAAAIm4/XjPGAYh7Ik8XveAow_66VJ-xR89nLT6zACLcB/w530-h278-p-rw/oppo-sign.jpg
    original:https://2.bp.blogspot.com/-X3uc71u0YmA/VzepTBTmZAI/AAAAAAAAIm4/XjPGAYh7Ik8XveAow_66VJ-xR89nLT6zACLcB/w530-h395-p-rw/oppo-sign.jpg

    La unica diferencia que encuentro entre ellas es esto : w530-h278-p-rw

    No se porque pase esto me podrias ayudar seria de gran ayuda gracias

    ResponderEliminar
    Respuestas
    1. Hola Jesús. Pues eso es simplemente porque Google+ hace eso y recorta la imagen para ajustarla a su formato de posts. Lo mismo hace Facebook y en ambos casos no tiene arreglo.

      El único arreglo posible es que tus imágenes sean directamente de la misma proporción que muestra G+ y así no las tendrá que recortar. Esto es, de 530x278 px o cualquier otro tamaño proporcional a ese. El problema es que por ejemplo en Facebook, la proporción es otra.

      Eliminar
    2. Si entiendo lo de google, pero este problema que te comento no me pasaba anteriormente, llevo dos anos y medio con mi blog y eh notado que solo sucede en estos meses abril mayoo junio, como te comento si le doy a seleccionar la imagen a google+ me aparece la imagen bien y no recortada y la que se corparte en twitter automaticamente tambien sale recortada como si la imagen que tomara del thumbnail del post fuera recortada alguna solucion ?

      Eliminar
    3. Pues si el problema no es ese, entonces no te sabría decir Jesús. Tienes que tener en cuenta que Google+ ha cambiado últimamente su diseño y por tanto, también la forma de presentar la información. He probado en el antiguo y no me corta las imágenes; sin embargo, en el nuevo efectivamente sí que las recorta.

      Eliminar
  45. tambien eh notado que en mi contador de visitas de blogger muestra arriba de 2500 visitas y en adsense nunca pasa de 200 no creo que tanta jente use bloqueador de anuncios es un bajon de diferencia grande

    ResponderEliminar
    Respuestas
    1. Tampoco te voy a poder ayudar con esto. Ni el SEO ni la publi son cosas que domine.

      Eliminar
  46. Ok amigo una cosa mas ya solucione lo de la imagen parece que era una meta mal situada, quisiera saber si me puedes ayudar cuando comparto mis post en google+ antes del titulo del tema se muestra el nombre de mi pagina sabes como lo quito?

    Ejemplo:
    OloBlogger: Como cambiar las minuauras de tu blog

    y yo quiero que me aparezca solo:
    Como cambiar las minuauras de tu blog

    como elimino el nombre de mi blog del principio

    ResponderEliminar
    Respuestas
    1. Si editas tu plantilla, al principio encontrarás algo así:
      <title><data:blog.pageName/>| <data:blog.title/></title>

      Si quieres eliminar el nombre de tu blog, que se quede en un simple:
      <title><data:blog.pageName/></title>

      Eliminar
  47. Hola! ¿Qué tal estás?
    En mi caso se trata del thumbnail para la versión móvil (que se ubica en el área llamada 'mobile-index-post'), tiene relación de aspecto automática de 1:1 y quisiera cambiarla para poner las imágenes con un width de 100% pero con menos height, no sé si me hago entender. Logré redimensionar las imágenes de las entradas populares gracias a un script que compartieron, pero con los thumbnails de los posts no he podido. ¿Podrías ayudarme, por favor? Te lo agradecería mucho.

    Esperaré tu respuesta :D
    Por cierto, por si acaso este es mi blog.
    Un saludo, que tengas un día espléndido.

    ResponderEliminar
    Respuestas
    1. Buenas Jisela
      Puedes usar este mismo script, pero como lo que quieres es recortar en rectángulo, en el primer trozo de código deberás cambiar:
      '/s'+size+'-c/'
      por
      '/w900-h750-c/'

      Eso sería para una proporción 6:5 que me pareció ver que era la que intentabas sacar. Si no, cambia los valores 900 y 750 al gusto.

      Eliminar