Añadir bordes a las imágenes en WordPress

borde de imagen

Hasta WordPress 3.9 había una opción en los ajustes avanzados de las imágenes que insertábamos en las entradas que permitía definir bordes y espacios a las imágenes solo con indicar un número, pero esa opción desapareció.

propiedades imagen desaparecidas en wordpress 3.9

Y a muchos usuarios esto les ha hecho la pascua, porque era algo que usaban mucho, aunque como he dicho por activa y por pasiva no es el modo correcto de hacerlo, pues los bordes de las imágenes deben ser una constante en el diseño de un sitio, y no algo que se añade para unas si y para otras no, al menos en la mayoría de los usos habituales.

Pero bueno, como cada sitio es un mundo, y aquí la cosa va de dar más soluciones que opiniones, vamos a ver cómo añadir bordes a las imágenes si ya has actualizado a WordPress 3.9.

:: Añadir bordes a las imágenes mediante HTML ::

Vale, sé que no es el modo más amigable ni intuitivo y visual pero ahí está, siempre ha estado y siempre estará. Si te encuentras cómodo con el HTML siempre puedes añadir bordes y espaciados a tus imágenes añadiendo los parámetros de estilo padding y border a tus imágenes como en este ejemplo:

:: Añadir bordes a las imágenes mediante CSS en la hoja de estilos ::

Mucho mejor es que definas previamente en tu hoja de estilos cómo se mostrarán las imágenes por defecto, con los bordes y los estilos que quieras, iguales para todas.

La idea (ideal) es que, en tu tema hijo o el principal, modifiques la clase CSS de las imágenes para que incluyan un borde o lo que sea que te guste, algo así, por ejemplo:

Por supuesto la clase mi-clase-img es la del ejemplo, en tu hoja de estilos tendrá otro nombre. En este caso se les ha añadido un borde de 2 píxeles.

:: Añadir bordes a «algunas» imágenes mediante CSS en la hoja de estilos ::

Una variable de lo anterior es que seas de los especialitos y quieras añadir estilos solo a algunas imágenes, en cuyo caso el proceso se complica (en realidad lo complicas tu) pues requiere de 2 pasos.

El primero sería crear en la hoja de estilos las clases CSS que vayas a utilizar, por ejemplo:

Una vez guardes los cambios ya tendrás disponibles las clases CSS para utilizarlas en tus imágenes desde el editor visual de WordPress. Ahora, cada vez que insertes una imagen puedes pulsar el icono para editarla.

icono editar imagen wordpress 3.9

En la nueva ventana de edición despliegas el apartado avanzado y podrás aplicar la clase CSS recién creada para que esa imagen concreta tenga el borde (o lo que sea) que te guste.

añadir clase css imagen wordpress 3.9

:: Añadir bordes a las imágenes con plugin ::

¿Que no te vale nada de lo anterior?, pues nada, te instalas el plugin Advanced image styles, que devuelve a los ajustes avanzados de las imágenes la funcionalidad perdida y le añade alguna más, como puedes ver en la siguiente captura.

advanced-image-styles-plugin

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 4.4)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

AVISO: esta publicación es de hace dos 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.

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido