Problema de alineación de imágenes en WordPress 2.6.x

22

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.

Otros llegaron buscando:

Compartir

Comparte este post en redes sociales

Juanguis

Ex técnico de PC y redes, actualmente blogger fulltime desde hace 5 años. CEO y creador (?) de Punto Geek. Me encanta el buen café, hago Reiki, y estoy muy enamorado de mi novia Mar.

Suscríbete al feed

Si te gustó este post, no te olvides de suscribirte al feed RSS para que recibas las actualizaciones antes que nadie

únete a los 18578 seguidores

es gratis y toma menos de 2 minutos

19 Comentarios en este artículo

  1. Juan, muchas gracias por el dato. En mi blog me venía pasando y me parecía muy raro.
    Saludos

  2. Jajaja Que grande! Ahora puedo poner bien las imágenes :)

    Saludos

  3. 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 ?

  4. amigo me podrias responder? ya que me urge usar ese marco con las imagenes :(

  5. Juanguis   twitter  

    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.

  6. 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

  7. Juanguis   twitter  

    Diego, ahi actualice el codigo, fijate de probar el que esta ahora, reemplazalo porque el que habias puesto (de los captions).

  8. me sigue saliendo corrido hacia la derecha :(… sera problema de mi template? desde ya muchas gracias

  9. Bendito sean estos grandiosos consejos…!!!! :D

  10. Muchisimas gracias, me traía de cabeza y se ha arreglado en un momento.

  11. Kupito  

    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.

  12. Kupito  

    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?

  13. ¡¡Gracias por el truco!! Funciona perfectamente. Ya puestos, voy a probar el segundo (captions), a ver qué tal…

  14. Ronal Salvatierra  

    Bueno yo tenia ese problema, pero era debido al tema que tenia pero me cambie a otro y este si esta bien pero lo q no me gusta es la imagen cuando se postea sale con un enmarcado, si las imagenes fuesen planas no habria problema pero como estan en perspectiva pues no se ve nada agradable, espero me puedan ayudar.

  15. Gracias viejo! Estoy hace tiempo tratando de centrar las imágenes y no había forma. Te debo una cerveza! ;)

  16. Gracias por la ayuda. Veo que es frecuente que los temas no puedan alinear imágenes correctamente.

    Bueno, por fin pude adaptar el mio.

    Saludos.

  17. Muchas gracias por la respuesta, me guardo vuestro blog en favoritos pues vale la pena.

  18. a mi me funciono colocando esto en mi css:

    /*————————————————*/
    /*————[CAPTIONS AND ALIGNMENTS]———–*/
    /*————————————————*/

    div.post .new-post .aligncenter, .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-bottom: 10px; }
    .wp-caption.alignleft { margin: 0px 10px 10px 0px; }
    .wp-caption.alignright { margin: 0px 0px 10px 10px; }
    .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; }
    .alignright { float: right; }
    .alignleft { float: left }
    img.alignleft { display:inline; float:left; margin-right:15px; margin-bottom: 5px; }
    img.alignright { display:inline; float:right; margin-left:15px; }

  19. No me funcionó, continuo con el mismo problema de no poder alinear las imágenes con el texto.

3 Trackbacks en esta entrada

  1. [...] 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 [...]

  2. [...] 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, [...]

  3. [...] 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 [...]

Deja un comentario

(*) (*)

Tu E-Mail no será visible públicamente
Los campos marcados como (*) son obligatorios

Otras personas llegaron buscando:

  • wordpress centrar imagenes

  • problemas imagenes wordpress
  • fallo imagenes wordpress
  • wordpress imagen no queda con margen
  • imagenes a la derecha en wordpress
  • alinear imagen y texto wordpress
  • problemas con las imagenes en wordpress
  • como alinear imágenes en un post de wordpress
  • alineacion de texto e imagenes wordpress
  • problemas de aliniacion theme wordpress
  • plugin para alinear fotos en wordpress
  • alinear imagenes en wordpress

  • centrar imagen wordpress
  • alinear imagen izquierda wordpress
  • centrar una foto en un post wordpress
  • wordpress alinear imagen a la izquierda y texto a la derecha
  • error al alinear imagenes en wordpress
  • alinear imagen y texto post wordpress
  • ayuda wordpresss alinear imagen en post
  • wordpress alinear texto a la derecha de una imagen
  • seo forum