WordPress 2.6 ha cambiado muchas cosas, pero no todas son un éxito. Uno de los asuntos que estos días nos trae de cabeza en varios sitios es como ha cambiado el modo de flotar (float) las imágenes de los artículos.
Si te has encontrado con que cuando añades unan leyenda (caption) a tus imágenes, una de sus novedades, estas no se alinean adecuadamente con el texto, esto es debido a la introducción de unas nuevas clases de estilo, en concreto: class=”alignleft”, class=”alignright” o class=”aligncentered”. El efecto es que, aunque veas las imágenes centradas, o alineadas a un lado u otro en tu panel de escritura, a la hora de la verdad, en el blog, no se alinean como tu querías.
Esto es bastante feo en algunas plantillas, pero como todo tiene solución, la hemos encontrado. Lo que tienes que hacer es adaptar tu plantilla a esta peculiaridad de WordPress 2.6 añadiendo unas clases adicionales a la hoja de estilo de la misma, normalmente en el archivo style.css.
Solo tienes que editarlo para añadirle estas líneas:
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.aligncentered, div.aligncentered
{
text-align:center;
margin:0 auto;
}Guardas el archivo y a partir de este momento ya se alinearán correctamente tus imágenes en los posts.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.
prefiero insertar la imagen a mano U.U
y ya, santa solucion.
me paso el otros dias en mi blog de pruebas esto de la imagen, pero en fin…
Gracias! pensaba que era error del wordpress.. pero tengo una pregunta.. eso de las leyendas solo agrega una nota abajo? porque cuando lo veo en el post sale que la imagen tiene un contorno bien bonito pero cuando lo publico solo veo el texto que esta debajo de la imagen, más no el contorno que le da elegancia. Podrian responderme? Gracias nuevamente
Muy buena la aportación, ya que efectívamente me he encontrado con este problema al actualizar el blog ayer..
Gracias por vuestro trabajo incansable…
Ese error suena al viejo bug de IE ¿se veía así en todos los exploradores?
@pacog00: gracias a ti por tu esfuezo. El blog te va quedando genial 😉
Hola, llevo días volviendome loco buscando la solución y ahora tampoco me va, podéis decir en que parte del CSS hay que pegarlo, el mio no va ni a la de tres 🙂
Un saludo, gracias.
Con que lo añadas al final del código es suficiente, pero asegúrate que es el Style.css que estas utilizando, es decir, el de tu «theme» activo
Holas, llevaba dias buscando la solucion a este inconveniente… hasta que di con este blog… solo me funciona para alinear la imagen a la derecha xD…
Pues a mi sigue sin funcionarme si le pongo Pie de foto…
Pingback: WORDPRESS - Como enmarcar nuestras imagenes en un Post, y alinearlas correctamente. | Zaragoceando.com
Que raro… en el anterior theme esto solucionó el problema, pero en el nuevo theme no funciona :S
Edit: esto puede servir: http://codex.wordpress.org/CSS
@Skavenger: ¿Has actualizado a WP 2.6.1?. Me temo que han cambiado algo ahí.
Con el blog atualizado a 2.6.1 funciona correctamente. la modificación
Hola y gracias por el dato, la verdad es que lo probé y funciona.
Sin embargo tengo problemas al aplicarlo al theme Illacrimo, pues al hacerlo la imagen flota y sale del post cuando el texto no es lo «suficientemente largo» como para que la imagen se vea dentro del mismo.
La verdad es que no sé qué debo hacer para corregirlo; si me pueden dar alguna idea se los agradeceré.
He añadido el código a la plantilla Superfresh (green) qe estoy preparando y me funcionan bien las alineaciones izquierda (por supuesto) y derecha, pero no la de centrar la imagen. No me funciona ninguna combinación, ni en esta plantilla ni en otras que he probado. ¿Alguien conoce las causas?
Probado, NO funciona en wordpress 2.6.2 que tengo instalado
Si funciona en wordpress 2.6.2 ,
Mírate esta ampliación al articulo ..
http://zaragoceando.com/?p=1652
Además ahí lo tienen funcionado…
Finalmente me ha funcionado la función centrar con este código que recomiendan adicionar. Estoy en WP 2.7 y la cuestión va así: primero hay que cambiar "aligncentered" por "aligncenter" y en segundo lugar hay que usar sobre la imagen la función de centrar el texto que viene en la barra por defecto cuando editamos o creamos una entrada. Me di cuenta porque la función para centrar en el código que ponen dice "text-align: center;".
No saben cuánto tiempo le he dado vueltas a este asunto hasta que finalmente puedo dar vuelta a la página. Seguro que mi "hallazgo" resultará demasiado obvio para los conocedores, pero siendo un novato no me da pena decir que para mí (y muchos otros) fue todo un enigma.
Muchas gracias.
Gracias a ti por compartir la experiencia 😉
Se me olvidó mencionar que además de agregar el código tuve que modificar algo del tema que actualmente uso en style.css. Ocurre que el tema tenía una parte dedicada al comportamiento de las imágenes.
<code>/* IMAGE STYLE */
img {
float: left;
padding-right: 5px;
border: 0;}
.wp-smiley {
float: none;}</code>
Tuve que modificar la segunda línea "float:left" por "float:none"
Por otra parte, aunque no viene mucho al caso si podrías recomendarme algunos widgets/plugins. Tengo un grupo de sitios amigos que quisiera colocar en el sidebar, ya sabes imagen (pequeño baner) vinculado al enlace de su dirección web. Lo hice manualmente pero me gustaría que fueran rotativos. Got Banner lo hace pero no me gusta que las imágenes salen muy separadas entre sí, creo que por el estilo del tema y como el sidebar no es muy ancho me crea problemas.
Si no viene al cosa refiéreme a dónde tendría que realizar la consulta.
Saludos.
No es el estilo del tema amigo, en la carpeta del plugin ubica el archivo gotbanners.php y en la línea 80 encontrarás el parámetro para modificar el margen entre las imágenes.
{ margin: 5px; }
Por defecto gotbanners pone un margen de 5px, intenta con un valor menor hasta que quedes satisfecho. Espero te sirva.
Si mi theme ya tiene clases del tipo "img.aligncentered" debo modificarlas?, se algo de programación pero nada de CSS.
Al agregar simplemente el código que posteaste no se solucionó el problema y supongo que debe ser por la superposición de clases.
Les paso un link a la parte de mi código que creo podría ser el problema:
Código Ejemplo
Agradezco su ayuda de antemano.
hola Fernando es un blog de ayuda excelente, solo que tengo una duda y espero que con la ayuda de los conocedores expertos en wordpress salga de ellas, he publicado esta pregunta en el foro del mismo nombre que este blog, pero creo que los conocedores estan aqui.
mi duda es referente a imagenes en cuanto a medidas width y height, donde genera wordpress las redimenciones de imagenes, para mi proyectoi necesito medidas exactas y precisas no proporcionales, ya he modificado el apartado de multimedia de wordpress, pero parece que wordpress no le interesa tomar ordenes, jeje
Como se hace para que no tome la medida de la imagen original solo las medidas precisas que tu le das en multimedia sin importar el tamaño en medidas que la original sea,
en multimedia modifico thumbnail 100×150, media 427×640, grande 427×640, ahora como hago para que me las tome a la inversa 150×100,640×427,640×427,
sin importa su tamaño original
existe algun plugin para ello?.
Gacias y sino es el sitio indicado para ello, por favor hazmelo saber, pero me interesa poder conocer la solucion,
Pingback: WORDPRESS - Como enmarcar nuestras imágenes de un Post y alinearlas correctamente.