Problema de alineación de imágenes en Wordpress 2.6.x
Publicado por Juanguis el dia 25 Ago 2008 - Guardado en Trucos, Wordpress
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:
-
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;
-
}
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:
-
.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;
-
}
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.
Anunciarse aquí
¿Quieres anunciarte en éste espacio y ser visto por más de 300.000 personas al mes? Para hacerlo sólo tienes que contactarte con nosotros.
Juan, muchas gracias por el dato. En mi blog me venía pasando y me parecía muy raro.
Saludos
[...] suerte, hoy encontré la solución a esto en PuntoGeek, y es tan sencilla que de verdad vale la pena. Es tan simple como añadir algunas lineas al [...]
[...] es que en vez de utilizar la propiedad align lo han hecho por medio de una clase de css. Por ello la solución es introducir el siguiente código en la hoja de estilo de nuestro theme: img.alignleft, [...]
Jajaja Que grande! Ahora puedo poner bien las imágenes
Saludos
[...] de nuevo (?): Juanguis nos soluciona el problema con las imágenes en Wordpress 2.6 Podés seguir los comentarios a través del feed RSS 2.0. También podés dejar tu respuesta, o [...]
amigo, muchas gracias me a servido.. pero el tema ahora es que el caption lo pone con alineacion izquierda y yo lo quiero centrado como esta aqui.. como de bo hacer ?
amigo me podrias responder? ya que me urge usar ese marco con las imagenes
Esd que no entiendo tu pregunta, centra la imagen y despues pone el caption. Entre en tu blog y no ve ni una cosa ni la otra, ni la imagen esta centrada ni el caption puesto.
claro mira, ahora te dejo una imagen… no estoy usando el caption por este mismo motivo mira como sale al publicar una imagen y poniendole caption el caption no sale centrado mira..
<img src=”http://img183.imageshack.us/img183/8932/dibujojt6.th.png”<a
Diego, ahi actualice el codigo, fijate de probar el que esta ahora, reemplazalo porque el que habias puesto (de los captions).
me sigue saliendo corrido hacia la derecha :(… sera problema de mi template? desde ya muchas gracias
Bendito sean estos grandiosos consejos…!!!!
Muchisimas gracias, me traía de cabeza y se ha arreglado en un momento.
Hola, a mi no me funciono este codigo, tengo instalado wordpress 2.6.3 y quiero insterar una imagen centrada y aparece en el margen izquierdo. Inclusive aparece la imagen y el texto a la derecha y queda MUY feo, para evitar eso tuve qeu usar el dreamW para hacerlo con tablas, pero la imagen queda sin centrar y aparece en el margen izquiero lo cual queda un poco feo.
Ahora instale la version 2.6.5 y sigue el problema, que no se dan cuenta de esto? inclusive tampoco me centra las imagenes que pongo en el sidebar, dios mio, aguante wordpress 1.0!!!!
Alguna ayuda extra?