Como adaptar el tema a los estilos de imágenes de WordPress

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(2 votos, promedio: 4)

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

24 comentarios en “Como adaptar el tema a los estilos de imágenes de WordPress”

  1. 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…

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

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

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

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

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

  7. Pingback: WORDPRESS - Como enmarcar nuestras imagenes en un Post, y alinearlas correctamente. | Zaragoceando.com

  8. 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é.

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

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

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

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

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

  14. Elitemodelsmexico

    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,

  15. Pingback: WORDPRESS - Como enmarcar nuestras imágenes de un Post y alinearlas correctamente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido