En entradas precedentes con similar título al de esta, hemos visto cómo aprovechar las propiedades CSSborder,padding ybox-shadow para quelas 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 etiquetastyle que aparece al principio tiene como objeto eliminar cualquierfloat precedente o posterior que pudiera modificar la posición de la imagen, así como alinear al centro la misma, la claseseparator y el posteriorimageanchor del enlace son todo un misterio.Podéis probar aquitar esos dos elementos en cualquier imagen subida y comprobaréis queno 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 esaprovechar 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 ponerpadding,background, sombras y todo eso en todos los enlaces. Un desastre.Peroahora tenemos eseseparator que nos puede ayudar. Por ejemplo de esta manera, para hacer un marco conborder a todas las imágenes y otro exterior conpadding, sólo tendremos que añadir en nuestro CSS:.post .separator a {display: inline-block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTOtUR7Aj1kgCyadJXIXN0XsTL9A26igHAlAfoqP1rtK5KuCpHB2BXxFIV6c_SvU1E6J3lE57U6qLnz50IuzYBqUzHDilQVUbCRzbn6CKD7ZOKhvnDf1EBp5ZOqRfuLkcb1ifCZatTGkQ/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 deahora 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 unaleyenda a la imagen? Pues queBlogger 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;"tbodytrtd 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/trtrtd class="tr-caption" style="text-align: center;"Leyenda/td/tr/tbody/table
Pues también a a esa tabla y a la clasetr-caption-container que incluye le podemos sacar también provecho de una manera similar. Ahora incorporaremos también un gran padding, un borde superior condashed, otro interior con unpadding 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 ynth-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 desdeseparator otr-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.
