Modificar el diseño de las imágenes de Blogger

Para modificar la forma en la que Blogger presenta las imágenes dentro del blog tenemos dos grandes vías, hacerlo desde las Variables Definitions, que nos permiten cambiar los colores de fondos, bordes y los textos de la leyenda, e incluso el grosor de los márgenes, o bien hacerlo directamente desde el código CSS básico que es donde podrás hacer todo tipo de cambios. Para hacer estas pruebas didácticas usaré como es habitual la plantilla Sencilla.

Parte 1. Variables Definitions A. Lo primero que hago, es echar un vistazo al Grupo de las Variable Definitions y allí vemos que podemos cambiar tres valores: el color del fondo de las imágenes, el color del margen y el color del texto. Manos a la obra.

<group description="Images" selector=".main-inner"> <variable default="#ffffff" description="Background Color" name="image.background.color" type="color" value="#ffff00">
  <variable default="#eeeeee" description="Border Color" name="image.border.color" type="color" value="#00ffff">  
   <variable default="$(body.text.color)" description="Caption Text Color" name="image.text.color" type="color" value="#0000ff">
</variable></variable></variable></group>  

El color del fondo por defecto es blanco (#ffffff), para que se vea bien lo que es este fondo lo cambio a amarillo (#ffff00) para este ejemplo. Hay que aclarar que de normal el fondo de la imagen está tapado y sólo se observa en el caso en que la imagen tenga alguna parte transparente.

El color del borde por defecto es #eeeeee un tono gris claro, que lo paso a #00ffff, un tono verde, tal y como puede verse en la siguiente imagen.

El color del texto de la leyenda por defecto tiene el valor $(body.text.color), es decir el mismo color que el texto habitual del post. En el ejemplo lo he cambiado por el valor #0000ff, es decir un

Parte 2. Variables Definition B. Fuera del grupo hay otras 2 variables que se aplican a las imágenes, que son dos Paddings, es decir distancias interiores respecto al margen. Ambas hacen lo mismo y la diferencia es que la primera se aplica a las imágenes pequeñas como por ejemplo aquellas que aparecen en el gadget de los posts más vistos. La segunda se aplica a las imágenes "grandes", como por ejemplo aquellas que se sitúan en las entradas, permitiendo que para unas imágenes el fondo sea más amplio o menos.

  <Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="0px"/>

   <Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="100px"/>

En este ejemplo he quitado los 2px que tienen las imágenes pequeñas y he aumentado a 100px las imágenes del interior de las entradas. Y a diferencia de las anteriores no puedes hacer los cambio a través del Editor. En el valor default no debes tocar nada, ya que es el original que te servirá para restablecer el diseño inicial en el caso de que haya un error.

Parte 3. Código CSS Sombras.
Por último vamos a ver alguna de las muchas cosas que tenemos que cambiar directamente en la plantilla como por ejemplo las propiedades de CSS3: bordes redondeados, gradientes, transiciones... y nos centramos en una de ellas, las sombras.

Lo primero, quitamos las modificaciones anteriores en las variables y vamos al código CSS, allí encontramos estas líneas.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

He marcado en azul, las variables que están vinculadas arriba y en color rosa la parte del CSS que hace referencia a las sombras de las imágenes que es la que vamos a modificar. Como verás el código CSS3 está repetido tres veces, es para que todo los navegadores lo lean igual. Así que las modificaciones que realicemos en una línea las tenemos que repetir en las otras líneas.

• Lo primero que tenemos es la propiedad box-shadow, esto no hay que tocarlo.
• Luego vienen 3 valores importantes expresados en píxeles.

• Desplazamiento horizontal de la sombra. 1px quiere decir que está desplazada 1 poc a la derecha. Lo cambiamos a -4px para llevar la sombra a la izquierda del dibujo.
• Desplazamiento vertical de la sombra. Esta en 1px, desplazada hacia abajo, para incrementar ese desplazamiento lo subimos a 3px. Si quisiéramos la sombra arriba tendría que ser con -3.
• Difuminado, cuando más grande más dispersa será la sombra. Vamos a asignar 30px.
• Por último aparece el código del color, que en este caso es RGBA (0, 0, 0, 0.1); los tres primeros números marcan el color y van de 0 a 255, son Red, Green, Blue. Lo cambiamos a 120, 0, 30, En cambio el último es un valor del 0 al 1 que marca la intensidad que tendrá el color. Lo subimos de 0.1 a 0.5 para que sea una sombra más tenue.

box-shadow: -4px 5px 30px rgba(120, 0, 30, 0.1);
-moz-box-shadow: -4px 5px 30px rgba(120, 0, 30, 0.1);
-webkit-box-shadow: -4px 5px 30px rgba(120, 0, 30, 0.1);

Como puedes ver en la captura de pantalla anterior si aplicamos una sombra muy difusa, los desplazamientos de 3 o 4 px no se notan, y se observa un halo de color violeta alrededor de todo el margen. Ahora ya has visto algunas formas en las que puedes modificar el diseño de las imágenes en Blogger para modificar tu plantilla o crear una plantilla nueva.

Imagenes: la primera es una imagen sin copyright, las otras tres son capturas de pantalla.