Agregar una atractiva sombra a nuestras fotos en WordPress

La apariencia que pueden llegar a tener las imágenes y fotografías de todos nuestros posts en WordPress quizá sea uno de los elementos más llamativos que deberíamos adoptar para tener mayor tráfico, y una mejor calidad de lectores, quienes al ver la dedicación que hemos colocado en el diseño de nuestro sitio web, con seguridad que seguirán visitándolo por mucho tiempo más.

La posibilidad de colocar determinados adornos y decoros en nuestras imágenes y fotografías es una tarea muy fácil y sencilla de realizar, aunque ello representa únicamente, tener que colocar un borde de un color específico.

Colocar bordes alrededor de una imagen en nuestro post de WordPress

Tal y como lo mencionamos anteriormente, la posibilidad de colocar determinados bordes en WordPress con un grosor específico en cada una de las imágenes que formen parte de nuestro post es una tarea muy sencilla de realizar, aunque dicho trabajo involucra tener que realizar la misma tarea para cada foto y en cada post; un método que podríamos sugerir a la hora de realizar esta tarea, es el siguiente:

• Debemos ingresar a nuestro blog de WordPress como administradores y con las respectivas credenciales.
• Creamos un nuevo post o abrimos alguno que ya hayamos publicado anteriormente.
• Elegimos a la imagen o fotografía que deseamos procesar.
• Hacemos clic en el pequeño icono que se ubica hacia la parte superior izquierda (para editar la fotografía).
• De la nueva ventana que nos aparezca, elegimos la pestaña que dice «Ajustes Avanzados«.
• Dirigimos nuestra atención hacia el área de «Ajustes Avanzados de Imágenes«.
• Nos dirigimos hacia «Propiedades de la Imagen«.

En el área del «Borde» deberemos colocar un valor numérico, mismo que representará el grosor del borde que deseamos tener alrededor de nuestras imágenes y fotografías; al presionar la tecla «Tab» de forma automática se rellenará el campo de «Estilos«, mismo que podríamos posteriormente variar manualmente si deseamos tener otro color diferente al que se ha colocado allí de forma predeterminada.

En el ejemplo que hemos colocado, podrás admirar un valor de 3 px para el «borde», ello mientras que el color (sólido) viene a ser el negro (black en inglés). Al mismo lo puedes llegar a cambiar de forma manual, colocando las palabras:

• White (blanco)
• Gray (gris)
• Red (rojo)
• Yellow (amarillo)
• Green (verde)

Al realizar esta modificación podrás notar que el borde mantiene el mismo grosor, pero que su color cambia al que hayas definido según lo que planteamos anteriormente. Ahora sólo resta tener que presionar el botón de «Actualizar» y listo, tus imágenes aparecerán con un atractivo color una vez que el post haya sido publicado.

Bordes más interesantes y atractivos con un plugin

Lo que hemos sugerido anteriormente viene a ser uno de los métodos más sencillos para adoptar, a la hora de colocar el borde sobre una fotografía; con la ayuda de un plugin especializado podríamos hacer que este borde llegue a adoptar una sombra más atractiva, algo que lograremos con el uso de Shadows, mismo que viene a ser el nombre del plugin.

Pero ¿por que hemos sugerido el método anterior? Lo que hemos hecho, viene a ser una especie de preludio a lo que indicaremos en este momento, ya que a pesar de instalar este plugin de nombre Shadows, unas cuantas instrucciones tendrán que ser colocadas en esta área de «Ajustes Avanzados» que manipulamos anteriormente; el enlace de descarga del plugin lo encontrarás en la parte inferior de este artículo. Lo único que necesitas hacer un inicialmente es lo siguiente:

• Ingresamos a nuestra cuenta de WordPress como administrador y con las respectivas credenciales.
• Nos dirigimos hacia la barra lateral izquierda para agregar un nuevo plugin.
• Elegimos la opción de «subir» para agregar a Shadows a nuestra lista de plugins.
• Por último, sólo debemos «activar» el plugin instalado.

A diferencia de la mayoría de plugins que se suelen instalar en un blog de WordPress, Shadows no dispone de una interfaz propia que nos ayude a colocar determinados ajustes preestablecidos sino que más bien, a los mismos los tendremos que colocar de forma manual en el área de la «Edición de la Fotografía«, entorno que manejamos anteriormente. Un método sugerido para ello, sería el siguiente:

• Creamos un nuevo post o abrimos alguno que ya hayamos publicado anteriormente.
• Buscamos el lugar en donde se encuentre una imagen o fotografía específica dentro de este post.
• Hacemos clic en la imagen y posteriormente, en el icono de la parte superior izquierda que sirve para entrar a la «Edición de Imágenes«.
• Ahora nos dirigimos hacia la pestaña de «Opciones Avanzadas«.

Lo que hemos sugerido anteriormente son los pasos que también ya revisamos en el método anterior; aquí también podríamos llegar a utilizar la función de borde como lo hicimos antes, dándole al mismo un espesor en píxeles según sea nuestro gusto y agrado. Nuestro plugin Shadows empezará a actuar desde este mismo entorno, pero específicamente en el área que dice «Clase CSS».

Allí observaremos que existe una instrucción específica, la cual generalmente hace alusión a la alineación del tamaño que tiene nuestra fotografía; sin tener que borrar dicha instrucción, al final de la misma sólo deberemos de escribir un código especial que nos facilita este plugin de Shadows, pero separado de un espacio de lo que este escrito anteriormente. Los códigos que podrás llegar a escribir allí son los siguientes:

• shadow_curl
• shadow_flat
• shadow_osx
• shadow_osx_small

Luego de que coloquemos estos códigos en el espacio de «Clase CSS», sólo tendremos que cerrar la ventana haciendo clic en aceptar o actualizar. Si actualizamos o publicamos el post que estamos manejando en este momento, lograremos admirar que en el resultado final se aprecia un borde sobre la fotografía (según el primer método que explicamos) y una sombra muy atractiva, la cual dependerá del código que hayamos escrito y que sugerimos antes.

El efecto observado con este plugin Shadows se lo podrá admirar en los navegadores más importantes de Internet Explorer 7, Firefox 3, Safari 4 y Opera 9 en adelante.

Tal y como hemos podido admirar, existen una gran cantidad de alternativas que podríamos llegar a implementar a la hora de hacer más atractivas a las fotografías o imágenes que coloquemos en un post de WordPress.

Descargar: plugin Shadows