Operador Blogger para redimensionar imágenes: resizeImage | Oloblogger Para construir imágenes cuadradas para sumarios , agrandar miniaturas y para todo aquello en lo que nos venía bien cambiar las dimensiones ...

28 de abril de 2016

Operador Blogger para redimensionar imágenes: resizeImage

Para construir imágenes cuadradas para sumarios, agrandar miniaturas y para todo aquello en lo que nos venía bien cambiar las dimensiones de una imagen automáticamente, hasta la fecha no teníamos más remedio que usar JavaScript aprovechando la ventaja del sistema de almacenamiento de imágenes de la plataforma (aquello de subir una imagen y disponer de cientos).

No sé desde cuando está operativa, pero hoy día tenemos una utilidad nativa que he comprobado que funciona y sirve para hacer todo eso. Que venga "de serie" es ya de por sí ventajoso con respecto a usar JavaScript añadido, pero también tiene alguna que otra cosa más que nos vendrá bien, como la posibilidad de recortar la imagen con una proporción concreta.


El nuevo operador se denomina resizeImage y además de explicar cómo se utiliza y mostrar unos cuantos casos, al final veremos un ejemplo de utilización para generar cabeceras dinámicas... una distinta para cada entrada.

Nuevo operador Blogger para redimensionar imágenes: resizeImage


Su sintaxis puede tener dos formas
y el resultado siempre es la dirección de una imagen:

url_imagen resizeImage ancho_imagen resizeImage ["ratio"]

resizeImage(url_imagen,ancho_imagen[,"ratio"])

  • url_imagen: Corresponde a la dirección de la imagen original. Puede usarse una variable data válida como por ejemplo data:blog.postImageUrl, data:blog.postImageThumbnailUrl, data:postFirstImage, data:posts[i].authorPhoto.url... o cualquier otra que contenga la dirección de una imagen. Si queremos indicar directamente la URL de una imagen concreta fija, entonces esta deberá ir entre comillas.

  • ancho_imagen: Este parámetro es simplemente un número entero que indicará el nuevo ancho de la imagen, es decir, el ancho de aquella que se verá en lugar de la original

  • ratio: Mientras que los otros dos son obligatorios, este es opcional. Representa la proporción (aspect ratio) que debe tener el ancho y alto de la nueva imagen, 4:3, 16:9... o el que queráis. Esto lo que producirá será un recorte de la imagen con la proporción indicada y por ejemplo, 1:1 servirá para conseguir un cuadrado. Sólo admite valores enteros y debe ir entrecomillado.


Como su misión es modificar imágenes, tendrá que estar unido a una etiqueta img y la formulación final según el tipo de sintaxis que elijamos será como en estos dos ejemplos:

<img expr:src='data:postFirstImage resizeImage 600 resizeImage "4:3"' />

<img expr:src='resizeImage(data:postFirstImage,600,"4:3") />



¿Lo probamos?
(Esto es una simulacion. En realidad el operador sólo funciona en la plantilla)

Supongamos esta imagen de 642x428 px cuya dirección abreviaré para los siguientes códigos de ejemplo como https://imagen.jpg.

Imagen original


Las imágenes que se verían en el blog según las siguientes combinaciones con el operador resizeImage, serían:

(he puesto las dos fórmulas que se admite, pero obviamente sólo es necesario usar una de ellas)
<img expr:src='resizeImage("https://imagen.jpg", 400)'/>
<img expr:src='"https://imagen.jpg" resizeImage 400'/>
Imagen reducida
Imagen de 400x267 (s400)
con igual proporción a la original

<img expr:src='resizeImage("https://imagen.jpg", 400,"2:1")'/>
<img expr:src='"https://imagen.jpg" resizeImage 400 resizeImage "2:1"'/>
Imagen reducida y recortada
Imagen de 400x200 (w400-h200-p)
recortada con proporción 2:1

<img expr:src='resizeImage("https://imagen.jpg", 300,"1:1")'/>
<img expr:src='"https://imagen.jpg" resizeImage 300 resizeImage "1:1"'/>
Imagen cuadrada
Imagen de 300x300 px (w300-h300-p)
cuadrada (también s300-c)


A destacar que esto sólo funcionará con imágenes "redimensionables de manera nativa", como son en principio todas las que subimos a Blogger y que terminan en Picasa o Google Fotos. No se trata de una función que agrande o reduzca esas imágenes visualmente como lo haría un simple width CSS, sino que este sistema lo que hace es cargar la imagen original del tamaño indicado. Para el que no conozca esto reitero el enlace del principio: Subir una imagen y disponer de cientos.

Caso de que la imagen no sea redimensionable Blogger presentará la imagen original sin tratar, esto es, tal cual con sus dimensiones originales.



La utilidad principal de resizeImage es mejorar y facilitar ciertos efectos con las imágenes para la plantilla.

Por ejemplo supongamos que queremos personalizar la cabecera de cada post incluyendo en ella la primera imagen del mismo en lugar de la cabecera fija. Para ello podemos usar resizeImage con la variable data:post.firstImageUrl de esta manera, incorporándola con una condición al gadget Cabecera.

<!--Show the image only-->
<div id='header-inner'>
  <a expr:href='data:blog.homepageUrl' style='display: block'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <img expr:src='data:blog.postImageUrl'/>
    <b:else/>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </b:if>
  </a>
</div>


Presupongo que la cabecera será bastante más grande que el ancho de un post y en ese caso, si por ejemplo la imagen del post es de 640px, al llevarla a una cabecera de 1200px claramente pixelaría. La alternativa sería subirlas todas al post con 1200px directamente y marcar tamaño original, pero eso aumentaría el peso de la página innecesariamente.

Pero también podemos usar esta utilidad para recuperar la imagen s1200 a partir de la que usemos para el post, independientemente de su tamaño y que en cabecera no pixele. Siguiendo con el anterior código y usando resizeImage, este debería quedar así:

<!--Show the image only-->
<div id='header-inner'>
  <a expr:href='data:blog.homepageUrl' style='display: block'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <img expr:src='resizeImage(data:blog.postImageUrl, 1200,"4:1")'/>
    <b:else/>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
    </b:if>
  </a>
</div>

De esa manera, el gadget cabecera cargaría en páginas de entradas una imagen igual que la primera de la entrada, pero con ancho 1200px y proporción 4:1, es decir, de 1200x300 px.


Una chulada esta herramienta, oiga. Un montón de cosas se pueden hacer con ella.

¿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

33 comentarios :

  1. Woww, que útil me parece para muchos de los problemas que se nos plantean a la hora de subir imágenes redimensionadas para widgets, cabeceras y demás, no?? Tengo que leerlo con más tranquilidad, porque aunque parece sencillo, hoy no tengo yo la cabeza pa ruidos¡¡ jeje... Por cierto, parece que el problema de post populares era algo puntual de blogger y hoy como por arte de magia, se ha solucionado solo... Imagino que has estado muy liado y me has dejado por pesada¡¡ Gracias y un saludo.. ;)

    ResponderEliminar
    Respuestas
    1. No, no te he dejado por pesada. Es que no he podido contestar a nadie en 20 días. Como 70 comentarios tengo pendientes ;)

      Y sí, eso fue un fallo temporal de Blogger, ya solucionado. Saludos

      Eliminar
  2. Pues, además han introducido el operador sourceSet para generar lista de imágenes (scrset) para el navegador elija la más apropiada a la resolución.

    https://productforums.google.com/forum/m/#!topic/blogger/4R_sAkgZH9I

    Interesante. Voy a hacer algunas pruebas sobre esto

    ResponderEliminar
    Respuestas
    1. Pues sí. Ese otro me lo estaba reservando para el siguiente post ;)

      Eliminar
  3. Hola..
    Muy interesante pero aun esta en chino para mi jajaja
    disculpa...!
    En mi blog utilizo imágenes en hd en buena calidad..
    Pero me gustaría utilizar esta técnica, si es posible..
    para que modifique las dimensiones a un valor determinado..
    Quisiera unas dimensiones que al compartir en facebook la imagen quede bien,
    es decir, entera.. y que esta no se achique..
    tengo entendido que para ello debe ser la imagen de 600 x 500 como mínimo.
    Entonces me gustaría que me modificara las imágenes de cada post a esta dimensión o superior a esta,
    esto por lo ya explicado..

    Podrías ayudarme por favor???
    Es que no se cual es la variable que debo utilizar para que modifique la imagen de cada post.. (lógico, la primera imagen).
    Perdona que no entendí bien los términos que utilizas.. por eso ando un poco perdida o confundida..

    Y sobre todo y lo mas importante, donde se coloca este código???
    Mil gracias por tu ayuda!!!

    ResponderEliminar
    Respuestas
    1. este es mi blog: www.philosophymujerradiante.com

      Eliminar
    2. He visto unos cuantos posts de tus blogs y en todos la primera imagen tenía una medida superior a 600px. La verdad es que no entiendo muy bien qué quieres hacer, pero si es redimensionar automáticamente todas las imágenes que publicas a una dimensión mínima... no lo necesitas porque ya la tienen.

      Simplemente preocúpate de seguir haciéndolo así. El tamaño Extra Grande (640px) es para mí el más recomendable.

      Eliminar
  4. Hola Oloman!

    Te hago una consulta, como puedo modificar dentro de la siguiente plantilla la palabra "Latest" ubicada en el menu horizontal superior? la busco en el código y no la encuentro, supongo que debe ser porque el autor original incorporó a ese elemento el valor "== $0"

    http://utnlabs.blogspot.com.ar/

    Saludos.

    ResponderEliminar
    Respuestas
    1. Cristian, ese gadget para mostrar titulares aparece en tu blog gracias a un JavaScript. El problema es que se trata de un código comprimido y codificado y por tanto no lo podrás modificar.

      Si no te importa cambiar algo de estilo, quizás te sirva este otro que publiqué hace un tiempo.

      Eliminar
  5. Una pregunta al respecto de las imágenes, ahora las subo a 1000px y uso el tamaño grande, incluso luego en html pongo "s000" que supuestamente da el máximo tamaño, aun así no consigo que el texto cuadre 100% con ellas, el texto es mayor que estas siempre... ¿Que hago mal?

    ResponderEliminar
    Respuestas
    1. Ike te pido que busques un poco más y preguntes después, pues últimamente eres una ametralladora soltando preguntas...

      No entiendo como relacionas texto e imagen en la misma pregunta. Dime al menos dónde te ocurre eso (URL)

      Eliminar
    2. Tienes razón, tengo demasiadas dudas y asalto tú blog por todas partes, también es cierto que actualmente eres la única persona con conocimientos avanzados e idioma español que resuelves nuestras dudas.

      Lo que preguntaba es relacionado con los post, cualquiera que escriba; me sucede que la imagen siempre es ligeramente menor que el texto que aparece debajo de ella, público imagen y debajo el post y nunca consigo que texto debajo e imagen encima sean iguales, siempre el texto sobresale independientemente de como lo alineo... cualquier post de http://www.somossindicalista.es/ te permite observarlo...

      (De todos modos, gracias por el tiempo que pierdes con nosotros)

      Eliminar
    3. Me respondo, solucionado. Un saludo.

      Eliminar
  6. Hola
    En realidad mi comentario no es sobre esta entrada, sino sobre la plantilla Blogger Store, ya se que es muy antigua y que se ha hablado muchisimo sobre ella, pero yo la he descubierto hace un par de dias y debo decirte que me descubro ante ti por el fenomenal trabajo realizado con ella.
    Te dire que me he leido todos los comentarios que hay y no he encontrado solucion a mis problemas con dicha plantilla.
    Mis problemas son los siguientes:

    1.- No soy capaz de poner mas de 9 entradas en la pagina principal, si pongo 12 entradas en la pagina principal y en varpagecount solo me muestra 9, si pongo 8 en ambos casos no hay ningun problema.

    2.- Si añado un producto al carro y voy a pagar todo funciona de maravilla, si añado 2 productos me sale el siguiente error "Service Unavailable - Zero size object", si añado 3 o mas productos sale el siguiente error "Bad Request".

    Entiendo que quizas no estes dispuesto a reabrir de nuevo este tema, aunque te estaria muy agradecido si pudieras echarle un vistazo al blog, sino pues tendre que conformarme con 8 entradas en la pagina principal e intentare deshabilitar el boton de pagar y dejar solo en de Pedido por Email. La direccion del blog es "maqueta-tren.blogspot.com.es".

    Ggracias por anticipado.

    ResponderEliminar
    Respuestas
    1. Hola Roberto. Pues sí, estoy muy cansado ya de esa plantilla. De todas formas te contesto a parte.

      Lo de que sólo se muestren una parte de las entradas que tienes programadas seguramente se debe al control que Blogger aplica para que las páginas no sean demasiado pesadas. En este enlace tienes más información sobre el tema: Auto-paginación en Blogger.

      Una posible solución sería meter justo antes del contenido más pesado de cada entrada un corte (salto). En el anterior enlace puedes ver en qué consiste y cómo añadirlo a tus posts.

      Eliminar
    2. Gracias por la respuesta. Lo de las paginas ya me habia informado por ahi y ya se que google ha puetso esa limitacion, la verdad es que eso no me importa, mi mayor problema es lo del carrito de la compra, pero bueno, como ya te comente deshabilitare las compras y dejare solo los pedidos por email.

      Eliminar
    3. Prueba a borrar cookies y datos de navegación por si fuera un problema local tuyo.

      Sólo te puedo añadir que eches un vistazo al simplecart.js que uso en la plantilla modificada por mí y que no da errores.

      Eliminar
    4. Ya he borrado los cookies y datos de navegacion y sigue igual. De momento lo dejare para que se puedan hacer pedidos por email, si mas adelante aparece otra plantilla que de menos problemas la cambiare.
      Gracias por tus respuestas.

      Eliminar
  7. Buenas, se ve muy interesante esta herramienta,pero algo no me quedo claro. Si quisieramos usarla para agrandar las miniaturas cual seria el codigo a usar?

    Gracias por tomarte eltiempo en leer!

    ResponderEliminar
    Respuestas
    1. Justo el que ves antes de la frase "¿Lo probamos?". Ahí indico cómo usarlo dentro de una plantilla, Ainoa.

      Eliminar
    2. mmmm ya eso lo entendí, lo que quería hacer era colocar ese código para el widget de "popularpost" pero cada vez que lo añado se corrompe y no sale nada, por eso quería saber si se tiene que sustituir algo o solo añadirlo. O si directamente no se puede.

      Gracias por responder de todas formas

      Eliminar
    3. El gadget de Posts Populares ya lleva desde hace unos meses ese operador. Lo más fácil si te está dando problemas es que lo elimines y lo vuelvas a poner. Así ya te aparecerá con el nuevo código si es que no lo tienes ya. Luego sólo es cuestión de cambiar el número correspondiente al tamaño de imágenes que deseas.

      Eliminar
    4. Ese era el problema, ya pude resolverlo. Muchas gracias!

      Eliminar
  8. Hola! Muchisimas gracias por el post, realmente útil! Pero tengo una pregunta. Yo he instalado en mi blog un gadget HTML/JAVASCRIPT y le he puesto un código para que me muestre entradas de una etiqueta concreta, pero no se como hacer para dimensionar la imagen ya que en ninguna parte me sale una etiqueta img. La pregunta es como hago para redimensionar la imagen desde el CSS.

    ResponderEliminar
  9. Hola Ana. Para decirte algo tendría que ver ese gadget ¿cuál es tu blog y dónde lo tienes puesto exactamente?

    ResponderEliminar
  10. Hola Oloman, tengo un pequeño problema, yo he puesto un css en las entradas para que las imágenes se colocaran en un tamaño especifico y que fuese estético a la hora de mirar el blog, pero ese código me afecta las paginas estáticas en las cuales quiero colocar imágenes pequeñas o con ciertas medidas pero no me sirve de nada ya que se activan como en las entradas y por lo tanto se ven pixeleadas, en este caso que debo hacer? solo quería que el efecto de css estuviera en las entradas no en las paginas estáticas, necesito poner banners de afiliación con sus tamaños originales. te agradezco tu pronta ayuda!

    ResponderEliminar
    Respuestas
    1. mi blog es frases-kare.blogspot.com.co

      Eliminar
    2. Hola. No sé qué CSS es el que has puesto, pero sea el que sea, si quieres que sólo afecte a las entradas y no a otro tipo de páginas, entonces lo tendrás que poner en la plantilla entre el cierre del SKIN y el cierre /HEAD, pero situado entre etiquetas STYLE y todo dentro de una condición. Algo así:

      <b:if cond='data:blog.pageType == "item"'>
      <style>
      AQUI TU CSS
      </style>
      </b:if>

      Puesto ahí y de esa manera, ese estilo CSS sólo afecta a las entradas.
      Más info:
      Condiciones - Añadir CSS a plantilla

      Eliminar
    3. Gracias por responder, :) tomaré tu concejo a ver como me va.

      Eliminar
    4. Hola Oloman, hice lo que me dijiste y no me funcionó :( el código que yo utilizo para redimencionar la imagen en los post es: ( .post-body img { width:715px; height:auto;
      padding: -10px; ) mis imágenes por lo general tienen una dimención de 1577 x 900, pero es obvio que es muy grande para visualizarse en la entrada, así qué, opté por este css, pero también afecta a las paginas estáticas, lo cual no quería que sucediera y no se que más hacer.

      Eliminar
    5. Si ese es el problema, prueba a cambiar eso por:
      .post-body img {
      height: auto;
      width: 100% !important;
      padding: 1em 2em 1em 1em;
      box-sizing: border-box;
      }

      Eliminar
  11. hola mi consulta es la siguiente.añadi el GADGET DE INSTAGRAM pero las imagenes aparecen en distintos tamaños y se ve feo.
    se podra utilixar este metodo para escalar automaticamente las imagenes de #instafeed

    ResponderEliminar