Formato a imágenes con CSS. Particularidades Blogger.

En entradas precedentes con similar título al de esta, hemos visto cómo aprovechar las propiedades CSS border, padding y box-shadow para que las imágenes de nuestras entradas luzcan un poco mejor y ahora vamos a ver la manera de usar en nuestro beneficio, todo ese código extraño que Blogger se empeña en meter automáticamente en todas las imágenes que subimos.

El código que se genera al cargar una imagen desde el editor es este:

<div class="separator" style="clear: both; text-align: center;">
<a href="URL_IMAGEN_TAMAÑO_ORIGINAL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="141" src="URL_IMAGEN_REDIMENSIONADA" width="400" />
</a></div>

Si bien la etiqueta style que aparece al principio tiene como objeto eliminar cualquier float precedente o posterior que pudiera modificar la posición de la imagen, así como alinear al centro la misma, la clase separator y el posterior imageanchor del enlace son todo un misterio.

Podéis probar a quitar esos dos elementos en cualquier imagen subida y comprobaréis que no se altera nada el resultado. Aquí un ejemplo sin ellos:

Pero en fin, estas son las cosas que tiene esta plataforma y mientras sean de sobra y no de falta, supongo que alguna razón tendrá Blogger para incluirlas. No podemos hacer nada por remediarlo más que quejarnos, así que ¿para qué vivir amargados?


Sin embargo, lo que sí podemos hacer es aprovechar este código sobrante para distinguir estilos distintos para la capa del enlace y la de la imagen, de manera que tengamos dos elementos con los que poder jugar.

Si por ejemplo intentamos hacer eso sin ninguna capa adicional, tendríamos que atacar con CSS la clase .post a y la .post img. Si lo hacemos así, con .post img las modificaciones afectarán efectivamente a las imágenes de los posts (sólo de los posts), pero con la primera, se cambiarán TODOS los enlaces de cada entrada y no sólo  los correspondientes a imágenes. Podéis imaginar el resultado de poner padding, background, sombras y todo eso en todos los enlaces. Un desastre.

Pero ahora tenemos ese separator que nos puede ayudar. Por ejemplo de esta manera, para hacer un marco con border a todas las imágenes y otro exterior con padding, sólo tendremos que añadir en nuestro CSS:

.post .separator a {
display: inline-block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOvBp84rvpTL_iyyHo1WNHCkj57OK1S4HS9ghnNGvcoiVzMSI19XFtb1NrEjLDujVHqwdA17lXGar5DmBIpvTaLzSTBFH-890xcCbZylq6A2yYffu_5JZnV4secP0k57AOskhjATvYBY/s1600/pergamino.jpg);
padding: 30px;
border: 1px solid #333333;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}
.post img {
padding: 10px;
background: #000000;
-webkit-box-shadow: 1px 1px 2px #000000;
-moz-box-shadow: 1px 1px 2px #333333;
box-shadow: 1px 1px 2px #333333;
}

Lo de ahora lo marqué en negrita con toda la intención porque tengo que recordaros que si vuestro blog no es nuevo, anteriormente las imágenes se insertaban sin este tipo de código extra y por tanto, en posts antiguos no funcionará el truco. En los nuevos, sin problema.


¿Y qué ocurre cuando aplicamos una leyenda a la imagen? Pues que Blogger nos monta una tabla de dos filas y una columna (dos huecos), en la que la primera celda es para la imagen y la de abajo para la leyenda. Todo estiradito para que se vea mejor, sería esto:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="URL_IMAGEN_TAMAÑO_ORIGINAL" imageanchor="1" style="margin-left: auto; margin-right: auto;">
<img border="0" height="141" src="URL_IMAGEN_REDIMENSIONADA" width="400" />
</a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Leyenda
</td></tr>
</tbody>
</table>

Pues también a a esa tabla y a la clase tr-caption-container que incluye le podemos sacar también provecho de una manera similar. Ahora incorporaremos también un gran padding, un borde superior con dashed, otro interior con un padding y un par de esquinas redondas:

Imagen: Nosabemosquién

.tr-caption-container {
border-top: 2px dashed #cccccc;
padding: 40px 40px 30px 40px;
background: #ffffff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 0px 0px 40px 40px;
-moz-border-radius: 0px 0px 40px 40px;
border-radius: 0px 0px 40px 40px;
}
.tr-caption-container1 img {
padding: 4px;
border:2px groove #ffffff;
}

Evidentemente podemos simultanear en nuestra plantilla ambos estilos, usando uno (.separator) para las imágenes normales y el otro (.tr-caption-container) para las que incluyan una leyenda. Y no será necesario que esa leyenda tenga necesariamente texto.


Y para terminar un pequeño experimento combinando varias cosas y en especial esta última clase (tr-caption-container), algunas rotaciones y nth-of-type, una interesante pseudo-clase que en otra ocasión veremos con más detalle:

Un poquito más

Calma

La caída de las hojas

Pies para que os quiero

Contemplando el paisaje

Manzana de otoño

La chispa de la vida

¿Qué miras?

.tr-caption-container {
display: inline-block;
text-align:center;
padding: 10px;
background: #ffffff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
}
.tr-caption-container:nth-of-type(4n-3) {
float:left;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.tr-caption-container:nth-of-type(4n-2) {
float:right;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
.tr-caption-container:nth-of-type(4n-1) {
float:left;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.tr-caption-container:nth-of-type(4n) {
float:right;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.tr-caption-container:last-child {
clear:right; 
}

Si algo de esto no os funciona, es muy posible que alguna definición en vuestra plantilla anule o interfiera en alguna de estas. Por ejemplo, si tenéis definido un .post img { border: 0; }, por más que intentéis hacer que desde separator o tr-caption-container se muestre un borde, img afecta desde "mas cerca" y por tanto tendrá prioridad. La forma de saltar esto es añadiendo un !important a las propiedades nuevas que no funcionen.

¿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

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter