En las última versione de WordPress, nos hemos encontrado con una novedad, una forma diferente de agregar imágenes a través de una ventana modal.

Allí (cuando termina de abrirse) vemos tres solapas, las dos primeras, nos permitirán agregar una imagen desde nuestra PC o indicando la dirección URL donde está alojada.

Agregar una imagen desde la PC

Agregar una imagen desde la PC

Agregar imágenes desde una URL

Agregar imágenes desde una URL

Una serie de opciones permiten "agregarle" cosas o personalizar un poco más la forma en que será presentada la imagen: el título que se incluirá en los atributos ALT y TITLE de la etiqueta IMG, la alineación con respecto al texto, si será un enlace o si tendrá un CAPTION, es decir, un texto que acompañará a esa imagen como pie de página.

No deja de ser una agregado interesante pero, muchos temas no lo tienen contemplado y entonces, el resultado suele ser nulo, veremos la imagen pero nada más, el resto de las opciones, será ignorada.

Si miramos el código HTML de una entrada donde hayamos agregado una imagen con este método, nos encontraremos con algo así:

<img alt="texto" src="URL_imagen" class="alignleft" width="valor" height="valor" />

[caption id="" align="aligncenter" width="valor" caption="texto"]
<img alt="texto" src="URL_imagen" title="Agregar imagenes desde una URL" width="valor" height="valor" />
[/caption]
Lo que quiere decir que nuestra entrada tiene una etiqueta IMG "normal" y, eventualmente, un tag especial . En ambos casos la alineacion está definida por una palabra (alignright, alignleft o alignright); justamente es esa definición lo que no tenemos en nuestro tema y debemos agregarla en la hoja de estilo, es decir, en el archivo stylesheet.css:
VER Texto PlanoCSS
  1. .aligncenter {
  2.   display: block;
  3.   margin-left: auto;
  4.   margin-right: auto;
  5. }
  6. .alignright {
  7.   float: right;
  8.   text-align: right;
  9. }
  10. .alignleft {
  11.   float: left;
  12.   text-align: left
  13. }
  14. img.aligncenter {
  15.   display: block;
  16. }

Con eso, en realidad, lo que hemos agregadado es una clase CSS que podríamos usar en cualquier otra etiqueta y a la que podríamos personalizar aún más, sumándole propiedades de fondo, márgenes, bordes o cualquier cosa que se nos ocurra.

El código generado por la etiqueta CAPTION tiene esta estructura:

VER Texto PlanoHTML
  1. <div class="wp-caption aligncenter" style="width: valorpx;">
  2. <img height="valor" width="valor" title="texto" src="URL_imagen" alt="texto"/>
  3. <p class="wp-caption-text">el texto</p>
  4. </div>

Así que deberíamos agregar más definiciones CSS si queremos ponerlo a nuestro gusto.
VER Texto PlanoCSS
  1. .wp-caption {
  2.   /* es el rectángulo completo que contiene la imagen y el texto */
  3.   /* puede tener un color de fondo, bordes, etc */
  4. }
  5. .wp-caption img { /+ la imagen en si misma */
  6.   margin: 0;
  7.   padding: 0;
  8. }
  9. .wp-caption p.wp-caption-text {
  10.   /* es el rectángulo inferior donde está el texto */
  11.   /* puede tener propeidades de color, de fuentes, etc */
  12. }