Pasa bastante a menudo, que insertamos imágenes y superan el ancho de nuestro tema WordPress. Por supuesto, podemos ajustar la imagen manualmente en el editor, modificando el ancho visible.
Pero ¿no te gustaría algo como lo que hace el tema por defecto TwentyEleven?. Si, esa cosa que hace que siempre se ajusten las imágenes al tema sin necesidad de tocar nada al insertarla en nuestra entrada.
Pues es muy fácil, solo hay que añadir unas líneas de código en la hoja de estilos del tema, normalmente un archivo llamado style.css.
Para ello, lo primero es buscar en la hoja de estilos la clase que define las imágenes, normalmente algo acompañado de img. Una vez localizado solo hay que añadir lo siguiente a esa clase:
max-width: 565px; width: expression(this.width > 565 ? 565: true);
En este caso he adaptado el ancho máximo al de mi tema (565 pixels), que es el único parámetro que deberás modificar para que se adapte al tuyo.
Este truco puedes usarlo en tu WordPress alojado o en WordPres.com si adquiriste la actualización de diseño, con la que puedes modificar la hoja de estilos.
Este bonito truco se lo leí a Lorenzo Solís.
¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Te falto agregar:
height:auto;
Es decir, sería:
max-width: 565px;
width: expression(this.width > 565 ? 565: true);
height:auto;
De lo contrario la imagen no se va a achicar proporcionalmente.
(y)
Hola 🙂
Y para los videos, existe algo similiar ?
Para los videos incrustados sí, sería algo como:
#content embed {
max-width: 640px;
max-height:480px;
}
… por ejemplo.
También funciona para iframe y object.
Olvidé mencionar, por una de esas cosas apestosas de varias de las versiones del Internet Explorer, para que el truco funcione en ese navegador deberán agregar también "width: auto;". Es decir, completo con este fix para el IE quedaría:
max-width: 565px;
width: expression(this.width > 565 ? 565: true);
height:auto;
width: auto;
(lo de expressión es opcional)
Soy novato en todo esto y no encuentro el sitio exacto donde pegar este código para que funcione.
Si lo pudiesen ampliar más la info estaria muy agradecidos porque ocurre que acabo de cambiar de tema y el ancho de las entradas es algo inferior al del tema anterior y ahora las imagenes de los artículos antiguos se me solapan con la columna de la derecha.
Gracais.
En cualquier parte del archivo style.css de tu theme.
Por ejemplo, si tu theme define el area del contenido de entradas y páginas con el id #content, en cualquier parte de style.css pones:
#content img {
max-width: 565px;
width: expression(this.width > 565 ? 565: true);
height:auto;
width: auto;
}
Deben añadir esto y les funciona rebien!, añadanlo al final de su archivo de css
p img {
padding: 0;
max-width: 100%;
}
muy Bueno, a provar y Gracias 🙂
me pueden ayudar por favor, necesito mostrar los usuario en linea que están visitando mi blog wordpress, pero solo quiero que sea visible cuando este logeado como administrador.. agradezco cualquier ayuda.
provee este wp-useronline ..pero no tiene la opcion que busco.. no quiero que todos vena cuantos usuarios hay visitando mi sitio..
gracias
me salvaste las papas jajaja, gracias
Soy nuevo en css pero me resulta fácil comprender …
Este lo utilizo para los vídeos. tamaño y centrado en los post de wordpress
.post-entry embed,.post-entry iframe {max-width:600px;height:350px;width:650px;display:block;margin:auto;}
espero y les funcione de algo