Script Blogger: Ayudas para las imágenes en el editor

Después de crear mi primer post, enseguida empecé a sufrir un par de problemas que tiene el editor de Blogger. Uno de ellos es una función añadida, pero que resulta bastante molesta, y la otra es una función que falta añadir.

La función molesta es que cuando añades una imagen, Blogger automáticamente crea un enlace clickable que apunta a la misma. Está claro que está bien poder hacer click en una imagen y verla a pantalla completa, pero dos cosillas; primero, que esa es una opción que el usuario debería elegir cuando añade una imagen en vez de estar de serie, y segundo, que no hay peor forma de ver una imagen a pantalla completa que simplemente abrir el enlace en el navegador. Con lo famosa que es la plataforma Blogger, si van a forzar esa situación, ya podrían haberse currado un visualizador de fotos, en vez de esa cutrez.

Se puede solucionar simplemente haciendo click en la pestaña HTML y modificando el código para borrar el link, pero, de nuevo, no es una forma bonita de hacer las cosas.

Cawen la leche, Blogger...

Como no puede ser de otra forma, ya estoy solucionando a golpe de script esas cosillas que no me gustan. He creado un script de Greasemonkey (Tampermonkey en Chrome) que realiza 2 funciones:

• Eliminar los enlaces que se crean automáticamente cuando añades una imagen.
• Poder añadir y y quitar clases de estilos CSS con un sólo click.

Yo en el mismo momento de crear este script

Con este script escribir entradas se hace más cómodo. Simplemente tengo que definir las clases que quiera en el header de la plantilla y, después de configurar el script, puedo aplicarlas a mis imágenes con un simple click.

¿Cómo instalar y configurar el script?

Para instalar el script hay que tener la extensión Tampermonkey (Chrome) o Greasemonkey (Firefox) instalada, entrar en uno de los siguientes enlaces: Greasyfork o OpenuserJS y hacer click en el botón Instalar este script o install, dependiendo de la página.

Después de haber instalado el script, hay que ir al panel de control de la extensión que hayas instalado, abrir el script y buscar la línea que empieza por var config = {

La configuración de serie viene con removeAnchor activado (true para activar, false para desactivar) y con 2 clases configuradas, gif e img.

Si activas removeAnchor, automáticamente va a eliminar los molestos enlaces clickables cada vez que añades una nueva imagen.

Viendo las dos clases se puede ver que tienen un color configurado, red y blue en este caso. Es es color que se mostrará en el editor para, visualmente, saber qué clase has colocado a una imagen. También están configuradas como unique (de nuevo true para activar y false para desactivar), lo que indica que sólo se permite tener una de esas dos clases activa a la vez. Si desactivas unique, entonces puedes colocar las dos clases a una misma imagen.

Después de configurar el script, nos vamos al editor de Blogger, añadimos una nueva imagen y hacemos click sobre ella. En el menú que se muestra bajo la imagen al hacer click, se podrá observar a la izquierda unos botones con los nombres de las clases configuradas, SET img y SET gif:

Y que al hacer click en uno de ellos, se enmarca la imagen con el color que hemos configurado y cambia el texto a REMOVE:

Simplemente con un click ya hemos cambiado el atributo class de nuestro <img>. Ahora sólo falta ir a la plantilla, editar el HTML y añadir en el header el código CSS que más nos guste. En mi caso:

Este CSS simplemente redondea el borde. Aunque el código sea el mismo para las dos clases, los diferencio porque así puedo ejecutar la librería Gifffer bajo todos los elementos que contengan la clase gif. Ya hablaré en otro post sobre ella.

Se acabó.

¿Eh? ¿Qué? ¿Ya? Me había dormido...