Como enmarcar nuestras imágenes de un Post y alinearlas correctamente.

Si estás utilizando la versión 2.6 de WordPress, ya te habrás dado cuenta que la alineación de las imágenes en un POST es incorrecta, ya que hay que añadir un poco de código CSS en la plantilla de tu theme, tal como se indica en un articulo de Ayudawordpress.com ( Como adaptar tu plantilla a la gestión de imágenes en WordPress 2.6 | Ayuda WordPress ).

Bueno, en este articulo se dan las primeras pinceladas sobre el tema, y gracias a el, siguiendo en esa línea podría aportar varias cosas:

1º , en la alineación «Centrada» , el código para la etiqueta del «img» y «div» es » img.aligncenter, div.aligncenter», en el post se indica «aligncentered» , pero es incorrecto, quizás por eso no le funcionaba a algunos que lo indicaban en los comentarios.

2º Si le intentamos dar una vuelta de tuerca a la alineación y le añadimos esos marcos que aparecen en el modo edición , pero que no aparecen en el modo publicación, tendremos que realizar los siguientes pasos:

  • – Añadir mas codigo CSS en nuestra plantilla de estilos «style.css» correspondiente al THEME activo en ese momento.
  • – En cada alineación tendremos que añadir:

img.alignleft, div.alignleft
{
float:left;
border-top-width: 1px;
border-right-width-value: 1px;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-top-style: solid;
border-right-style-value: solid;
border-bottom-style: solid;
border-left-style-value: solid;
border-top-color: #dddddd;
border-right-color-value: #dddddd;
border-bottom-color: #dddddd;
border-left-color-value: #dddddd;
text-align: center;
background-color: #f2eeee;
padding-top: 4px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

– Este mismo código para las etiquetas :

img.alignright, div.alignright
{
—código—
}
img.aligncenter, div.aligncenter
{
—código—
}

3º – Por supuesto esto es un ejemplo , y es totalmente configurable para que cada uno le aplique en color, fondo, pixelado, tipo de borde, color del borde, etc..etc..

wordpress

El resultado es el siguiente: (para ver el resultado hay que seguir el link original que sí tiene añadido el codigo CSS) .Con este código CSS conseguiremos un «marco» alrededor de las imágenes y del pie de imagen

WORDPRESS – Como enmarcar nuestras imágenes de un Post y alinearlas correctamente – Zaragoceando.com

(0 votos, promedio: 0) Valora este artículo para ayudar a mejorar la calidad del blog

¿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 :)

Sobre el autor

5 comentarios en “Como enmarcar nuestras imágenes de un Post y alinearlas correctamente.”

  1. Ándale exactamente ésto es lo que buscaba, no hallaba como ponerle borde a las imágenes, veré si me funciona en la plantilla, que está algo diferente de las que normalmente se hacen, gracias, saludos.

  2. Muchas gracias esto para mí es indispensable ya que trabajando con imágenes lo que me hace es poner el cursor de tipo hand en todo el área, en vez de sólo la foto.

    Gracias por el aporte.

Deja un comentario

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

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido