Estilos para las imágenes de una entrada en Wordpress
Wordpress permite a través de su editor de entradas y páginas insertar imágenes en el contenido y alinearlas según sea nuestro deseo, pero al mostrarlas al usuario final es responsabilidad del desarrollador del tema tener en cuenta las clases y alineaciones dadas por el editor de la entrada.
Vamos a exponer los estilos básicos que debemos colocar en nuestro tema para que las imágenes se muestre de forma correcta.
Primero
img {
border: 0 none;
}
No queremos que ninguna de nuestra imágenes tenga un borde que no esperabamos dado porque algunos navegadores colacan un borde a las imágenes con enlaces, si queremos una imagen con borde ya la definiremos nosotros.
.entry-content img, .widget img {
max-width: 100%;
height: auto;
}
Esta regla nos garantizará que si la persona que está editando la entrada coloca una imágen más ancha que nuestra área de contenido la imágen no se desborde, ni sea recortada, si no que se ajuste, en este caso el área de contenido esta definida con la clase entry-content, pudiera ser cualquier otra clase que definamos para esta área en nuestro tema.
.alignleft {
float: left;
text-align: left;
}
.alignright {
float: right;
text-align: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Bueno las clases hablan por si solas, imagen alineada a la izquierda, a la derecha y centradas, en el caso de las imágenes alineadas a la izquierda y a la derecha el texto de la nota se "acomodará" al otro lado si tiene espacio para hacerlo, en el caso de las imágenes centradas el texto continuará en la línea siguiente a la imagen.
.wp-caption {
max-width: 100%;
padding:5px 0;
}
Esta clase es correspondiente a un div que engloba aquellas imágenes que tienen leyenda o pie de foto, en un buen sitio o blog TODAS las imágenes deberian cumplir con esta característica pero no es algo estrictamente necesario. El ancho máximo una vez mas garantiza que si nuestro contenedor intenta exceder el área de contenido entonces se ajuste, el padding es para separar la imágen del contenido anterior y del siguiente, a los lados no es obligatorio definir una separacion ya que Wordpress hace nuestro contenedor de imágenes 10px más ancho que la imagen.
.wp-caption .wp-caption-text {
color: #757575;
font-size: 0.85em;
font-style: italic;
line-height: 2;
text-align: center;
}
Un poco de estilo para el pie de foto, a mí me gusta centrado, otros lo prefieren a la izquierda, ya esto es a gusto del consumidor.
Hasta ahora hemos colocado estilos que sirven tanto para la imágenes con pie de foto (que tienen un contendor extra con la clase wp-caption), como para aquellas que no lo tienen, el problema con esto es que al no tener el contendor extra las imágenes sin pie de foto no lograrían ni la separacion que dimos con el padding, ni aquella dada por los 10px que coloca wordpress al contenedor.
img.alignleft {
margin: 5px 10px 5px 0;
}
img.alignright {
margin: 5px 0 5px 10px;
}
img.aligncenter {
margin-top: 5px;
margin-bottom: 5px;
}
Siendo este nuestro toque final, los estilos pueden variar en dependencia de los gustos, pueden tener mas separación, los pie de foto pueden tener otra fuente, otro color, etc. pero la base es esta, pongámolos todo junto.
Basado en:
Vamos a exponer los estilos básicos que debemos colocar en nuestro tema para que las imágenes se muestre de forma correcta.
Primero
img {
border: 0 none;
}
No queremos que ninguna de nuestra imágenes tenga un borde que no esperabamos dado porque algunos navegadores colacan un borde a las imágenes con enlaces, si queremos una imagen con borde ya la definiremos nosotros.
.entry-content img, .widget img {
max-width: 100%;
height: auto;
}
Esta regla nos garantizará que si la persona que está editando la entrada coloca una imágen más ancha que nuestra área de contenido la imágen no se desborde, ni sea recortada, si no que se ajuste, en este caso el área de contenido esta definida con la clase entry-content, pudiera ser cualquier otra clase que definamos para esta área en nuestro tema.
.alignleft {
float: left;
text-align: left;
}
.alignright {
float: right;
text-align: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Bueno las clases hablan por si solas, imagen alineada a la izquierda, a la derecha y centradas, en el caso de las imágenes alineadas a la izquierda y a la derecha el texto de la nota se "acomodará" al otro lado si tiene espacio para hacerlo, en el caso de las imágenes centradas el texto continuará en la línea siguiente a la imagen.
.wp-caption {
max-width: 100%;
padding:5px 0;
}
Esta clase es correspondiente a un div que engloba aquellas imágenes que tienen leyenda o pie de foto, en un buen sitio o blog TODAS las imágenes deberian cumplir con esta característica pero no es algo estrictamente necesario. El ancho máximo una vez mas garantiza que si nuestro contenedor intenta exceder el área de contenido entonces se ajuste, el padding es para separar la imágen del contenido anterior y del siguiente, a los lados no es obligatorio definir una separacion ya que Wordpress hace nuestro contenedor de imágenes 10px más ancho que la imagen.
.wp-caption .wp-caption-text {
color: #757575;
font-size: 0.85em;
font-style: italic;
line-height: 2;
text-align: center;
}
Un poco de estilo para el pie de foto, a mí me gusta centrado, otros lo prefieren a la izquierda, ya esto es a gusto del consumidor.
Hasta ahora hemos colocado estilos que sirven tanto para la imágenes con pie de foto (que tienen un contendor extra con la clase wp-caption), como para aquellas que no lo tienen, el problema con esto es que al no tener el contendor extra las imágenes sin pie de foto no lograrían ni la separacion que dimos con el padding, ni aquella dada por los 10px que coloca wordpress al contenedor.
img.alignleft {
margin: 5px 10px 5px 0;
}
img.alignright {
margin: 5px 0 5px 10px;
}
img.aligncenter {
margin-top: 5px;
margin-bottom: 5px;
}
Siendo este nuestro toque final, los estilos pueden variar en dependencia de los gustos, pueden tener mas separación, los pie de foto pueden tener otra fuente, otro color, etc. pero la base es esta, pongámolos todo junto.
Basado en:
Comentarios