Imágenes de marcos para el borde de los post

Hace unos días para responder a una pregunta estuve probando la forma de añadir un marco a todas las imágenes de los post. El marco es una imagen más o menos como el ejemplo que ilustra la entrada y lógicamente como se trata de una imagen es necesario que todas las imágenes de los post tenga la misma medida a no ser que en alguna ocasión prescindamos de ese marco utilizando html.

La idea, lo que se tenía muy claro era no tener que utilizar ningún código cada vez, ni tan siquiera añadiéndolo a la plantilla de entrada, la idea era subir la imagen en un post y que automáticamente se visualizara con el marco.

Y claro, una a veces piensa,  incluso piensa detenidamente como si en lugar de pensar estuviéramos descubriendo la rueda. Luego de pensar y probar hice lo de otras veces consultar  esferas superiores es decir Vagabundia porque allí además de pensar siempre dan buenos remedios como en este caso .

 Para empezar estaría bien saber que la parte que añade estilos a los bordes en las imágenes de los post viene representada en la plantilla más o menos así:

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

}

.tr-caption-container img {

border: none;

padding: 0;

}

 De todo eso se podría prescindir ya que con lo siguiente sería suficiente

.post-body img {

padding:4px;

border:1px solid $bordercolor;

}

Con lo anterior ya podemos añadir estilos a los bordes, y no sólo es suficiente sino que de esa forma el borde sólo se añade a las imágenes subidas a los pots, lógicamente en post.body img tendríamos que añadir nuestros estilos de borde pero no en este caso que le vamos a añadir una imagen.

En este caso dejamos esa parte así:

.post-body img {

padding:0;

}

Antes de seguir guardamos los cambios y nos situamos en el editor de entradas, subimos una imagen y en html nos da un código así:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_A6wRW1IXfYNHn-3-1Zc36i09SMmyLq77oK7ySUBRJcJ12mR074-kmPMIQzs8Z-Slqh8-m8GcpvyMyUTc_4daX0zvpy-yx7qy7NsVNj10UVGbyk8v9UdYnkNR5tTBiOdXtla6P3Y4CM/s320/27-6-2011+1.6.43+1.jpg" imageanchor="1" style=""><img border="0" height="300" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_A6wRW1IXfYNHn-3-1Zc36i09SMmyLq77oK7ySUBRJcJ12mR074-kmPMIQzs8Z-Slqh8-m8GcpvyMyUTc_4daX0zvpy-yx7qy7NsVNj10UVGbyk8v9UdYnkNR5tTBiOdXtla6P3Y4CM/s400/27-6-2011+1.6.43+1.jpg" /></a></div>

Si nos fijamos Blogger añade una clase "class="separator" aprovechamos esa clase y en la plantilla añadimos justo antes de ]]></b:skin>

.separator {

height: 300px;

margin: 0 auto !important;

position: relative;

width: 400px;

}

.separator:after {

content: url("url-imagen-del-marco-400x300");

left: 0;

position: absolute;

top: 0;

}

Para el ejemplo he creado unos marcos de 400px ancho x 300px alto, esa es la medida que añadimos en los estilos de separator. Si deseamos mostrar nuestras imágenes de distinto tamaño cuidaremos que también ese tamaño coincida con la anchura y altura en los estilos.

Si el marco fuera una imagen desigual es posible que tengamos que hacer ajustes hasta ubicar la imagen en el centro del marco.

En la entrada no tenemos que añadir nada, simplemente subimos la imagen y ajustamos la medida indicada en Edición de HTML y listo.
<imgborder="0"height="300"width="400"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg_A6wRW1IXfYNHn-3-1Zc36i09SMmyLq77oK7ySUBRJcJ12mR074-kmPMIQzs8Z-Slqh8-m8GcpvyMyUTc_4daX0zvpy-yx7qy7NsVNj10UVGbyk8v9UdYnkNR5tTBiOdXtla6P3Y4CM/s400/27-6-2011+1.6.43+1.jpg" />