Anoche una twittera amiga tenía el típico problema de la alineación de imágenes al actualizar a WordPress 2.6.x, este problema lo tuvimos todos ya que se utiliza una nueva forma de alineación, es decir, con otros atributos que no estarán en el CSS de nuestro theme, salvo por el que trae WordPress por defecto.
Básicamente el problema es que al alinear las imágenes en el editor del post quedan alineadas correctamente, pero al publicar la entrada la imagen queda a la izquierda. Pero ese problema tiene una simple solución, y se las voy a citar acá.
Para solucionar el problema de alineación de las imágenes tenemos que agregar el siguiente estilo al CSS de nuestro blog:
[CSS]img.alignleft, div.alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter
{
text-align:center;
margin:0 auto;
}[/CSS]
Otro truco de yapa es el de los CAPTIONS, que son una descripción que se agrega a la imagen, además de un marco con bordes redondeados que le da un efecto muy elegante, lo pueden ver en cada imagen de los posts de Punto Geek. Para usarlos correctamente tenemos que agregar el siguiente código a nuestro CSS:
[CSS].aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}[/CSS]
Luego para agregar el CAPTION tenemos que pinchar en el botón de edición de la imagen, al pasar seleccionar la foto aparecen dos botoncitos, el primero es para editar, y el segundo para eliminarla. Con el primer botón podemos agregar el CAPTION a la imagen, al aceptar ya aparecerá en el editor del post.