JMiur [E]

Hay muchísimos scripts que usan Json para leer información de alguno de los feeds de Blogger y luego mostrarlos.

Generalmente, esos scripts nos permiten leer datos como el título, la URL de las entradas, hacer un resumen de estas y extraer una imagen asociada; los usamos para mostrar las últimas entradas, los posts relacionados, las etiquetas, etc.

En todos esos casos, lo que más dudas provoca es el tema de las imágenes.

Dependiendo del script que se use, esa imagen es extraída usando dos métodos distintos; en un caso, lo que se hace es leer el HTML de la entrada y buscar dentro de este una etiqueta IMG; generalmente, la primera que haya; de este modo, la imagen a mostrar será la imagen real que hayamos incluido y bastará re-dimensionarla con CSS o con atributos width y height para mostrar una miniatura.

Otra forma de hacer lo mismo es leer un dato del feed que es el que contiene esa miniatura creada automáticamente por Blogger:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = "URL_imagen_por_defecto";
}
Este método es el que suele generar dudas por varios motivos; primero, porque Blogger puede no generar esa imagen, tal vez porque el post fue editado, tal vez porque ... quien sabe. Es algo bastante común y son muchos los que se quejan de ello. Nada puede hacerse para resolverlo, no tenemos ninguna herramienta disponible para establecer cuál será esa miniatura. Quien tenga problemas constantes con eso, deberá usar el método alternativo.

Una segunda duda es el tamaño de esa imagen y allí sí tenemos algunas posibilidades ya que esas imágenes tienen el formato clásico de todas las que subimos a Blogger o Picasa donde todo lo que importa es saber que el tamaño de la imagen a ser mostrada, está definido por uno de los parámetros de esa URL; el que vemos justo antes del nombre; por ejemplo:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s320/demoIMGs_01.jpg

es una miniatura de 320 pixeles de ancho (o de alto si no es apaisada) y en el caso de las miniaturas de los feeds, ese dato dice: s72-c:

http://xxxxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/xxxxxxx/s72-c/demoimg.jpg

Todas estas son miniaturas de 72x72 y cuadradas que es lo que indica ese dato 72 y la letra c


Así que, dada cualquier imagen subida a Blogger o Picasa, basta cambiar ese parámetro para cargar una miniatura de otro tamaño o hacerla cuadrada agregándole -c:

Esta imagen original mide 680x935 y tiene esta dirección:
http://........../s000/demoimg.jpg



La miniatura que teóricamente usará Blogger será:
http://........../s72-c/demoimg.jpg


si no quisiera que fuera cuadrada, le quitaría el -c y como la imagen es más alta que ancha, tendrá 128 pixeles de alto:
http://........../s72/demoimg.jpg




si quisiera mostrar una cuadrada más grande, por ejemplo de 128x128:
http://........../s128-c/demoimg.jpg



por último, si quisiera mostrar una de 128 sin que se deformara:
http://........../s128/demoimg.jpg

Pero, el dato del feed me envia la cuadrada de 72x72 ¿es posible hacer que el script la cambie por otra?

Sí; bastaría agregar una línea extra en el código; por ejemplo, asi la reemplazamos por una de 128 que no sea cuadrada:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
  postimg = postimg.replace('s72-c','s128');
} else {
  postimg = "URL_imagen_por_defecto";
}

40 comentarios:

Gem@  

Gran descubrimiento, una pena no verlo hace tres días pero nunca es tarde de aprender algo :)

Responder
Beben Koben  

so unique we learning about it
image on blogger and picasa different size and order call id size
btw...that plus value for alternative ;)

Responder
Dek  

a partir de hoy no me perderé ninguna clase,

excelente aunque no entendí muy bien, hay q agregar el script a la plantilla? y cuando subamos imágenes cambiamos el s6000 por 27-c, wow, una cosa mas en este caso agregando estos nuevos valores como puedo hacer para que las entradas expansibles tengan este nuevo formato, por q solo muestran la parte superior izquierda de una imagen y si subes una imagen con fondo negro un poco grande... amm se ve negro jaaja...

Responder
Dek  

a por cierto el de la imagen es charlie brown jaja exelente, se me olvidaba gracias por lo de los comentarios borre el duplicado del face y quedo exelente.

Responder
JMiur  

No. No hay que agregar ningún script; la URL de la imagen puede cambiarse siempre salvo que ya se esté utilizando un script que lea ese dato; en ese caso, puede cambiarse.

En el caso de las entradas expandidas; depende del script que uses; tal como lo describes, no parece usar miniaturas sino la imagen completa.

Responder
jmggv  

una pregunta (he buscado y no encuentro respuesta):

es posible cambiar algo en la propia plantilla, html, para que cada uno de los enlaces del blog aparezca con un fondo de color "x", por ejemplo: o rojo, o verde, etc.? (es decir, que al escribir un post, y sleccionar por ejemplo una palabra y enchufarle un enlace, una vez publicado el post, esa palabra aparezca automáticamente con un fondo de color, o rojo, o verde etc.?

que igualmente los enlaces en la barra lateral, etc. aparezcan de una vez por todas con el fondo ese del color que se elija... ??

y que luego directamente en el diseño avanzado, o directamente en la plantilla html se pueda cambiar según se quira el color del propio texto del enlace???

me imagino que será añadir directamente un código o algo en la plantilla en html, pero he intentado con varias opciones, mezclando distintas propuestas que había para otras cosas y no he podido...

es tal cosa posible???

muchas gracias de antemano!!!

Responder
€MPREGODINHEIRO  

Muito útil o seu artigo vou tentar implementar.

Responder
JMiur  

jmggv:
No entiendo la idea pero si se trata de que los enlaces se vena con distintos estilos, puedes indicarles una clase CSS y definir la regla de esa clase.

<a class="C1" href="#"> ........ </a>
<a class="C2" href="#"> ........ </a>
<a class="C3" href="#"> ........ </a>

.C1 {background-color:red;}
.C2 {background-color:green;}
.C3 {background-color:blue;}

Responder
Artemisa  

Hola JMiur, he intentado hacer esto con el gadget de entradas populares pero no consigo que la imagen se vea mayor de 72x72 sin que se deforme.
Mi idea era forzar la imagen a un tamaño menor como el que tengo ahora y que al pasar el raton por encima se agrande mediante una transicion hasta ocupar el espacio completo en ancho del gadget, por ejemplo 270x270.

El efecto lo he conseguido y queda muy bien pero claro, la imagen se ve fatal al hacerse tan grande.

¿Hay alguna manera de que en este gadget las miniaturas por defecto tengan un tamaño diferente?

Responder
JMiur  

El problema con ese tipo de gadget de Blogger es que el código HTML es generado por el sistema y el dato con la URL de la imagen es un dato interno; algo así como esto:

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

Para cambiar data:post.thumbnail y toda la etiqueta IMG, habría que usar JavaScript. En principio, me parece que sería posible hacerlo pero habría que pensar el método.

Responder
Artemisa  

Me pareció curioso intentar hacerlo en mi blog.
Ya que el contenido de este es para mostrar imagenes, me hubiese gustado que los lectores vean en un simple vistazo, por qué esas entradas son las mas visitadas, pero ya imaginaba que siendo un gadget de blogger no sería sencillo.

De todas maneras muchas gracias por responder. un saludo.

Responder
JMiur  

Lo estuve viendo por curiosidad pero, no encuentro que tenga una solución sencilla ... ni compleja :-)

Esos gadgets de Blogger son bastante limitados a la hora de intentar manipularlos. Igual, seguiré destruyendo plantillas a ver si algo funciona porque me parece una idea interesante.

Responder
Artemisa  

Si tu gran ingenio da con alguna solución a esto, aquí estaré yo para ponerlo en practica. :D

Responder
Víctor Alfonso González González  

Saludos JMiur, me gustaría preguntarte algo, hace ya bastante tiempo apliqué en mi blog el sistema de Leer más con imágenes en miniatura mejorado (1) que El Potro explica en su blog. La cuestión es la siguiente, la miniatura que se genera con el resumen cuando la imagen original es muy ancha se distorsiona demasiado, quisiera saber si se puede conseguir que la miniatura se muestre usando el parámetro s120-c. De ser posible me lo podrías explicar. Gracias.

JMiur  

EL script, tal como ese ve ahí en esa entrada, no deformaría las imágenes ya que sólo les establece un ancho fijo sin embargo, en tu blog, las imágenes tienen un ancho y también un alto que es justamente lo que las deforma y ese es un agregado que debes haber hecho y deberías quitar:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="120" /></a></span>';

Víctor Alfonso González González  

Si elimino lo que me dices la miniatura del resumen desaparece.

JMiur  

Eso no puede ocuurir. Si la la imagen le quitas el valor de height, se seguira viendo. Es más, si le quitas el valor de width tambien aunque se verá del tamaño normal.

Revisa que hayas borrado correstcamente y que quede esto:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" /></a></span>';

o copia el script tal y como lo muestra El Potro en su entrada, sin agregados.

Víctor Alfonso González González  

Si elimino height="120" la miniatura ya no se mostrará 120 px x 120 px, ahora su altura será variable y dependerá del tamaño de la imagen.

JMiur  

Definiendo width la altura es variable, definiendo height, lo que es variable es el acho; usando ambos, siempre se podrá deformar asalvo que sean cuadradas.

Puedes usar s120-c pero, el resultado dependerá de lo que Blogger genere y allí, deberás modificar el script de tal modo que todas las imágenes tengan el mismo tipo de URL. Poer ejemplo, si todas las imágenes originales de los posts tienen este tipo:

http://........../s400/demoimg.jpg

puedes cambiarlas anteponiendo lo siguiente a la línea de código de la que hablamos:

var imagen = img[0].src.replace('s400','s120-c');

y cambiando la variable:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+imagen+'" /></a></span>';

Responder
eidioma  

JAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA


LO PUDE MALDITA SEAAAAAAAAAAAA

jejeje gracias por el articulo!, al fin pude hacer que mis miniaturas de imagenes rectangulares no salgan deformadas a 72x72
jjejejeje

quedo mi blog asi: portadas
sorry por el spancito :)

Responder
Manolo M. Muñoz  

Hola JMiur, antes que nada excelente articulo, veraz, tengo un blog el cual en las entradas muestra la imagen descriptiva del aurticulo y un poco de contenido, muestra las imagenes con un ancho y alto de : 620x200; la cuestion es que hay veces cuando el articulo contiene una imagen muy grande en dimenciones, las entradas transformando la imagen en las dimenciones dadas (620x200) la imagen se ve muy mal, veras te dejo una imagen para que veas el problema: http://3.bp.blogspot.com/-QBnyW7wHHfo/UDAFl-NpJGI/AAAAAAAAAQI/hPa32H3E_qw/s1600/imagenprueba.PNG

Ese es el problema que pasa en la portada del blog donde se muestran toda las entradas, quiciera que para que nos se viera asi tomar una parte de la imagen para que no se distorcionara, aqui le dejo el blog por si quiere checar scripts: http://maspruebass95.blogspot.mx/

Espero su respuesta, gracias.

JMiur  

Sí, se entiende el tema. El problema básico es que las imágenes colocadas en una etiqueta IMG pueden re-dimensionarse pero, si esta re-dimensión no respeta la proporción del original, se deformarán, sobre todo, cuando las que estás utilizando, son tan disímiles.

La primera pregunta sería ¿por qué mostrarlas de 670x200 si son más pequeñas? por lo menos, al mayoría de las que veo son mucho más chicas así que no sólo se deforman sin oque se pixelan.

Sea como sea, vas a tener que modificar el script para poder manejar eso o intentar cambios. Esta línea:

imgtag = '<span style="float:left;padding:0px;margin:0px 0px 0px 0px ;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

colocar una clase CSS y eliminar los estilos de ahí para poder probar más fácilmente. Por ejemplo:

imgtag = '<span class="ejemplo"><img src="'+img[0].src+'" /></span>';

luego en el CSS dos reglas:

.ejemplo {float:left;padding:0;margin:0;}
.ejemplo img {width:670px;height:200px;}

Hecho eso, verías lo mismo y es más fácil de editar.

Una alternativa:

.ejemplo {display:block;padding:0;margin:0;height: 200px;overflow: hidden;width:width:670px}
.ejemplo img {width:670px;height:auto;}

Otra, colocar la imagen como fondo del SPAN:

imgtag = '<span class="ejemplo" style="background-image:url('+img[0].src+'"></span>';

y el CSS que no funcionará en IE:

.ejemplo {display:block;padding:0;margin:0;height: 200px;width:width:670px
background-image: url();
background-repeat: no-repeat;
background-size: cover;
}

La mejor solución tal vez es la más compleja pero la única segura: que la primera imagen del post sea de ese tamaño exacto o proporcional.

Manolo M. Muñoz  

Muchas gracias JMiur!, eso era exactamente lo que queria!, quedo perfecto!

Responder
Juanjo Mediavilla  

Hola JMiur.
Llevo tiempo intentando poner las miniaturas de mis entradas populares sin recortar, ya que es un blog de fotografía, y me gusta la idea de cambiar el s72-c por el s128, como tienes en tu ejemplo. Es un tema que llevo dándole muchas vueltas
Podrías indicarme, sino es molestia, que tengo que cambiar, agregar, ... a mi plantilla para poder hacerlo?
Te dejo el enlace para que lo veas...
http://fotografiajuanjomediavilla.blogspot.com

Un saludo y muchisimas gracias de antemano.

JMiur  

La única manera de hacer eso sería mediante JavaScript ya que en la plantilla, ese dato no existe o, mejor dicho, no podemos cambiarlo.

El script, debería estar al final de la plantilla o después de ese widget porque sino, provocaría un error ya que lo que hará, será cambiar el html de la página.

<script type='text/javascript'>
//<![CDATA[
var obj = document.getElementById('PopularPosts1');
var t = obj.innerHTML;
obj.innerHTML = t.replace(/s72-c/g,"s128-c");
//]]>
</script>

Al margen, conviene que revises la forma en que está insertado el reproductor de scmplayer.net ya que todo tu blog se encuentra dentro de un iframe que es el que crea ese reproductor; o hay algo erróneo en ese código o no sirve en Blogger porque no es la primera vez que veo eso y te va a provocar muchos dolores de cabeza.

Juanjo Mediavilla  

Hola JMiur. Muchas gracias de antemano por contestar tan rápido.
No consigo ponerlo bien o yo lo hago mal.
Te explico:
Lo estoy poniendo al final de la plantilla, debajo de esta línea:



Dime debajo de que línea lo pongo haber si por fin me sale.

Con el tema del scm tienes toda la razón... en su pagina dice que hay que ponerlo dentro de la plantilla y yo lo pongo en un gadget y quizá sea ese el problema. Lo hago así por la comodidad de ir cambiando las canciones cada vez que publico una nueva fotografía. Lo bueno de este reproductor es que no se corta al cambiar de página o entrar en cualquier entrada...
Bueno lo importante es el tema de las entradas populares que no consigo ponerlas en ese nuevo tamaño de 128px SIN RECORTAR osea cambiar el s72-c por s128 SIN "C".
Gracias de nuevo. Un saludo


JMiur  

Primero lo simple probé ese reproductor y no lo puse en un gadget sino directamente en la plantilla; el resultado fue el mismo. Ese detalle de que "no se corta" al cambiar de página es justamente, porque pone todo el sitio dentro de un iframe algo que, a mi entender me parece que es un error.

La ubicación del script está bien, está después del gadget que quieres modificar pero, lo que veo es que todo el código está en una sola línea y debe verse tal como lo puse en el comentario.

Eventualmente, como eso es algo que se ve que hace el editor cuando lo escribes, quita los CDATA a ver si no se debe hacer alguna otra corrección. Quedaría así:

<script type='text/javascript'>var obj = document.getElementById("PopularPosts1"); var t = obj.innerHTML; obj.innerHTML = t.replace(/s72-c/g,"s128-c"); </script>

Juanjo Mediavilla  

Muchas gracias Jmiur.
Veo que si actúa y deja la miniatura sin recortes, pero luego la deforma y adapta al 72 x 72.
Si abres la miniatura en una ventana aparte como imagen veras que se ve bien en su formato apaisado, pero en su ubicación en el gadget, la deforma a 72 x 72 sin recorte.
Seguramente le faltará alguna linea de codigo que la deje en su medida original.
Será como adaptar el espacio a la imagen, no la imagen al espacio.
Bueno tu lo ves y si puedes comentarme algo sera bien recibido.
Un saludo y gracias.

JMiur  

El formato original s72-c es una imagen cuadrada; s128-c también es cuadrada; si quieres que mantenga el aspecto ancho/alto deberia ser s128 sin el-c final.

Así tampoco va a funcionar ya que el código se ve cortado. Entiendo que debe ser un problema del editor o por la forma de copair y pegar.

Ese último ejemplo que se muestra en el comentario anterior, debe quedar escrito todo en una sola línea y no cortarse.

Responder
Juanjo Mediavilla  

Bueno JMiur...siento haber sido tan pesado pero al final me ha servido...
He hecho lo siguiente:
En la plantilla antes de body he incorporado el codigo sin la -c
y luego en el CSS:

.PopularPosts .item-thumbnail img {
width: 128px;
height: 79px;
}


Con ello solucionado y me imagino que esto se podrá aplicar también a la lista de blogs.

Muchas gracias...mira que ya me ha costado.

JMiur  

Para cambiar otro elemento debes hacer lo mismo y establecer su ID en:
var obj = document.getElementById("XXXXXXXXXXXXXXX")

Responder
Juan Garcia  

Osea coloco este codigo
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
postimg = postimg.replace('s72-c','s128');
} else {
postimg = "URL_imagen_por_defecto";
}
En un Gadget luego html/javascrip
Bueno hice eso, y al compartir me sigue saliendo la imagen cuadra
http://solopaandroid.blogspot.com/

JMiur  

Si estás usando los feeds para mostrar algo en tu blog con algún ese script que contenga ese código que estás mostrando, se verá una imagen distinta all´idonde lo estés aplciando pero eso nada tiene que ver con los botones de compartir en agún servicio.

Juan Garcia  

Uso el Twitterfeed, antes usaba el rssgrafitti pero dejo de actulizar los post.
Pero Ambos me ponen la imagen en un cuadro de 72. Y la imagen no cuadra, se ve recortada, es por eso que quiero que se vea rectangular para que entre toda la imagen
Hay Alguna solucion?

JMiur  

Eso depende de ellos, de qué dato utilicen para detectar las imágenes. En principio, supongo que usarán alguna etiqueta meta o link y allí, en Blogger, no puedes establecer ese dato y, cambiarlo con JavaScript no serviría de nada ya que ese tipo de motores de búsqueda, no leen JavaScript.

Responder
David Angeles  

Hola oloblogger!! He seguido varios de tus post sobre slides e imagenes y me han encantado! enhorabuena! Estoy insertando éste para crear un blog de moda, y el PROBLEMA es que quiero que en las miniaturas no se muestre sólo una porcion de la foto grande, si no la foto completa. No se si me explico; es decir, que en las miniaturas aparezcan las fotos completas pero en pequeño y una vez que pinchas se abra la grande...vamos, es ésta misma galería pero con las miniaturas mostrando las fotos enteras...me podrias ayudar por favor? que codigo debo poner para hacerlo?
Esta es la pagina donde quiero insertarlo:

http://mistikaweb-pantalones.blogspot.com.es/

Un millon de gracias!!

JMiur  

¿oloblogger? Bueh creo que haz marcado el número equivocado :D

De todo modos, aunque no conozco ese slider, si la imagen es un fondo (background) y quieres que se vea completa, deberías usar una miniatura y no la imagen total. Por ejemplo:

https://lh5.googleusercontent.com/-14neDUhiZV4/Uclo691wd2I/AAAAAAAAA8s/3ZHeEvw-U9A/s60/Mistika%2520%2528138%2529.jpg

es la misma que en tu ejemplo donde he cambiado /s800/ por /s60/

Otra forma es agregando propiedades al CSS por ejemplo:

#jgal li {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
.....
}

Responder
Ginsou  

Hola JMiur quisiera saber si este tema es referente a esto
digamos que yo subo una imagen a blogger o picasa
y por el modo ya sea HTML o REDACTAR use la opción INSERTAR IMAGEN.
y cada ves que inserte una imagen me salga la miniatura con un tamaño definido por defecto solo usando el width.
Está es la forma en la que lo uso de forma manual, ya que el tamaño por defecto que da blogger del width es 320 y yo quiero usar 231

<a href="http://3.bp.blogspot.com/-48p17NLIJ08/UbKfqczxcAI/AAAAAAAACmI/bQwNXtVfWR0/s1600/Get_Backers_ginsou_01.png" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-48p17NLIJ08/UbKfqczxcAI/AAAAAAAACmI/bQwNXtVfWR0/s320/Get_Backers_ginsou_01.png" width="231" /></a>

Espero me puedas ayudar ya que es un poco molesto hacerlo de forma manual.

JMiur  

Las opciones para subir una imagen son las definidas por Blogger. En ese ejemplo, hay dos datos.

Por un lado la imagen es una miniatura con un máximo de 320 pixeles y eso es lo que dice la url: /s320/
si quisieras que fuera exactamente de 231 debería cambiarse manualmente, /s320/ por /s231/

Por otro lado, el atributo width hace que, sin importar el tamaño de la imagen real, esta se muestre con un ancho de 231 pixeles. Ese dato, también debe ponerse de modo manual.

La tercera alternativa, si e que todas esas imágenes tendrán siempre ese valor, es definir una regla de estilo personal de tal modo de no tener que escribir nada manualmente pero, dependerá de la forma en que esté estructurado el post..

Por ejemplo, si la imagen es la primera de cada post:

.post-body img:first-child {
width: 231px;
}

eso, hará que la primera imagen siempre tenga un ancho de 231 pixeles, sin importar lo que diga la etiqueta HTML

Ginsou  

Gracias tal parece que no hay forma por ahora de programar solo determinadas imagenes, gracias igual por quitarme las dudas.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR