Una vez tomadas todas las decisiones necesarias, ya podemos dedicarnos a la tarea de insertar im\u00e1genes, de acuerdo con las posibilidades que WordPress brinda a tal efecto.<\/p>\n
Alineaci\u00f3n de las im\u00e1genes<\/h2>\n
Las im\u00e1genes siempre deben considerarse en relaci\u00f3n con el texto al que se refieren, y con el espacio disponible para insertarlas, espacio que se denomina\u00a0“caja tipogr\u00e1fica” o “caja de texto” (este segundo t\u00e9rmino es m\u00e1s impreciso, ya que puede confundirse con el espacio de un formulario destinado a la introducci\u00f3n de texto).\u00a0En WordPress, como en la inmensa mayor\u00eda de aplicaciones semejantes,\u00a0las im\u00e1genes pueden alinearse a izquierda, a derecha, o en el centro del p\u00e1rrafo. Cuando la imagen se alinea a la izquierda, se dice que “flota” a ese lado; si se alinea a la derecha, el efecto de flotaci\u00f3n se produce en el lado contrario. A continuaci\u00f3n vemos ejemplos de ambas alineaciones, con im\u00e1genes que flotan con respecto a sendos\u00a0p\u00e1rrafos\u00a0sin sentido, generados autom\u00e1ticamente con la herramienta lorem ipsum<\/a>:<\/p>\n Pellentesque sit amet leo diam. Praesent at urna viverra mi feugiat iaculis a eu dolor. Sed pretium felis orci, a vestibulum ipsum pretium nec. Morbi sit amet tellus vehicula, venenatis leo quis, mollis lacus. Aenean viverra bibendum pretium. Ut nec lectus dignissim, semper enim eu, placerat arcu. Nunc ac lacus velit. Nullam cursus, nisl at luctus efficitur, velit est maximus diam, ut egestas lorem eros eu dolor. Nam nec nulla quis tellus sodales pharetra. Aenean fermentum erat ac placerat porta. In risus orci, facilisis sed est a, iaculis porttitor lectus. Suspendisse placerat sem et blandit dictum. Nullam a felis a dolor porta porta et ut nisl. Donec nec libero ligula. Integer pellentesque nisi maximus, volutpat magna nec, posuere nibh.<\/p>\n Nunc hendrerit nibh non pharetra lacinia. Nunc semper ac leo ac fermentum. In ac dui efficitur, suscipit nulla sit amet, condimentum quam. Integer non mi risus. Vestibulum pretium semper porttitor. Suspendisse quis enim faucibus, volutpat risus non, rutrum nibh. Quisque eget ultricies purus. Aliquam convallis ipsum sodales maximus hendrerit. Vestibulum mattis elementum urna. Fusce auctor sit amet lectus et imperdiet. Suspendisse vel convallis mauris. Sed feugiat elit quis odio blandit tincidunt. Aenean tempor orci eget tortor venenatis eleifend. Nunc vulputate eget eros eget tristique.<\/p>\n Para que el efecto est\u00e9tico sea el mejor posible, es importante que el p\u00e1rrafo “envuelva” a la imagen cuando esta se alinea a izquierda o a derecha. Dicho de otro modo: el p\u00e1rrafo tiene que tener una longitud suficiente para que la imagen no quede separada del flujo de texto y aislada de \u00e9l. No siempre es posible completar esta envoltura, porque a veces el p\u00e1rrafo es muy breve y no hay forma de alargarlo, pero conviene esforzarse para conseguir el mejor ajuste posible. En caso de que el p\u00e1rrafo sea tan breve que es imposible conseguir una buena envoltura (y en tal caso queda mucho espacio en blanco sin cubrir), lo mejor es prescindir de la alineaci\u00f3n a izquierda y derecha, y alinear al centro.<\/p>\n Independientemente del\u00a0tama\u00f1o que tengan, nunca se deben alinear dos o m\u00e1s im\u00e1genes a izquierda o derecha en el mismo p\u00e1rrafo, ya que ello produce resultados imprevisibles, normalmente feos o poco armoniosos. Si es necesario disponer dos o m\u00e1s\u00a0im\u00e1genes peque\u00f1as en una misma l\u00ednea, lo que hay que hacer es construir una galer\u00eda de im\u00e1genes con el tama\u00f1o adecuado; veremos c\u00f3mo hacerlo en un pr\u00f3ximo art\u00edculo de este curso.<\/p>\n En cuanto al centrado de las im\u00e1genes, hay tambi\u00e9n unos cuantos aspectos que deben tenerse en cuenta. A tal efecto, lo mejor es comenzar por una breve demostraci\u00f3n de una imagen insertada en cuatro ocasiones consecutivas, con los distintos tama\u00f1os que permite WordPress (miniatura, mediano, grande y original):<\/p>\n Los ejemplos que acabamos de incluir demuestran, mejor que cualquier explicaci\u00f3n te\u00f3rica, la importancia de una buena selecci\u00f3n del tama\u00f1o de la imagen, y de su correcta alineaci\u00f3n con respecto a la caja tipogr\u00e1fica. En general, la inserci\u00f3n de im\u00e1genes centradas a tama\u00f1o peque\u00f1o y mediano produce un efecto muy poco elegante, ya que las im\u00e1genes quedan muy tristes, muy poco vistosas. Normalmente, el tama\u00f1o m\u00e1s aconsejable para una imagen alineada al centro\u00a0es el grande, pues su efecto est\u00e9tico es mucho mejor. No hay que preocuparse porque la anchura de la imagen grande sobrepase la dimensi\u00f3n de la caja tipogr\u00e1fica; si el tema est\u00e1 bien programado, WordPress ajustar\u00e1 la anchura\u00a0de la imagen para que no se desborde sobre la barra o barras laterales, y producir\u00e1 un ajuste \u00f3ptimo.<\/p>\n Por otro lado, los dos \u00faltimos ejemplos demuestran que la inserci\u00f3n de la misma\u00a0imagen a tama\u00f1o grande y a tama\u00f1o completo producen exactamente el mismo resultado cuando aquella tiene\u00a0unas dimensiones superiores a las de la caja tipogr\u00e1fica\u00a0del tema, que en el caso que nos ocupa es de 660 p\u00edxels (recordemos que la fotograf\u00eda a tama\u00f1o completo tiene 1600, por exigencia del tema Education Pro, y la de tama\u00f1o grande 1024).<\/p>\n WordPress permite a\u00f1adir a cada imagen cuatro campos de medatatos diferentes, a saber:<\/p>\n Esos metadatos deben cumplimentarse en todas y cada una de las im\u00e1genes<\/span> de nuestro sitio web. Este requisito puede parecer arbitrario y ser considerado como una tarea pesada e in\u00fatil, pero ninguna de esas consideraciones resulta acertada. T\u00e9ngase en cuenta que, a pesar de todos los avances en inteligencia artificial, los buscadores no saben interpretar las im\u00e1genes de manera tan precisa y rica como la combinaci\u00f3n del ojo y el cerebro de un ser humano; si las im\u00e1genes no tienen metadatos, los buscadores tal vez no sepan qu\u00e9 son, ni puedan relacionarlas con el contenido textual. Por otro lado, hay personas con limitaciones visuales, que no ven bien las im\u00e1genes o incluso no las ven en absoluto; para estas personas, los metadatos son esenciales, puesto que los sistemas de ayuda visual que utilizan para poder “leer” un sitio web (lectores de pantalla<\/a> con un motor de s\u00edntesis de voz, o l\u00edneas Braille<\/a>) no sirven de nada si el dispositivo no puede extraer informaci\u00f3n a partir de metadatos.<\/p>\n \u00bfQu\u00e9 metadatos se deben insertar en cada uno de los cuatro campos que acabamos de mencionar? A este respecto, no hay ninguna recomendaci\u00f3n universal. El autor de este art\u00edculo, por ejemplo, tiene la costumbre de introducir la misma informaci\u00f3n en los cuatro campos de metadatos de las im\u00e1genes con las que trabaja. Otros autores prefieren que la descripci\u00f3n sea m\u00e1s larga y detallada que los datos introducidos en los dem\u00e1s campos, o deciden prescindir del campo “leyenda”, para evitar que la imagen vaya acompa\u00f1ada de un pie de foto. La verdad es que esta es una decisi\u00f3n muy libre, que depende no tanto de normas o est\u00e1ndares cuanto de los gustos personales, de las circunstancias particulares de publicaci\u00f3n de cada imagen, y de los h\u00e1bitos de uso. Por ejemplo, en la imagen que se incluye a continuaci\u00f3n, el campo “leyenda” contiene una informaci\u00f3n compleja en c\u00f3digo HTML, porque nos interesa citar la fuente de la imagen; sin embargo, los dem\u00e1s campos de metadatos solo incluyen el texto, sin enlaces.<\/p>\n WordPress permite a\u00f1adir enlaces a las im\u00e1genes insertadas desde la biblioteca multimedia. A este respecto, existen cuatro posibilidades diferentes:<\/p>\n En los tres primeros casos, se puede activar la opci\u00f3n de que el enlace se abra en una nueva pesta\u00f1a o ventana.<\/p>\n A continuaci\u00f3n incluimos ejemplos de los cuatro comportamientos que acabamos de describir. En todos ellos, la imagen est\u00e1 alineada con el centro del p\u00e1rrafo:<\/p>\n Las t\u00e9cnicas de inserci\u00f3n que hemos explicado en los p\u00e1rrafos precedentes se detallan tambi\u00e9n en los siguientes videotutoriales:<\/p>\n![\"Imagen](\"http:\/\/cursoswp.educacion.navarra.es\/cursowp2017\/wp-content\/uploads\/2017\/02\/cuadros-en-la-calle-300x225.jpg\" "\\"Imagen")
<\/a><\/a>![\"Imagen](\"http:\/\/cursoswp.educacion.navarra.es\/cursowp2017\/wp-content\/uploads\/2017\/02\/cuadros-en-la-calle-150x150.jpg\" "\\"Imagen")
<\/a><\/a>![\"Imagen](\"http:\/\/cursoswp.educacion.navarra.es\/cursowp2017\/wp-content\/uploads\/2017\/02\/cuadros-en-la-calle-1024x768.jpg\" "\\"Imagen")
<\/a>![\"Imagen](\"http:\/\/cursoswp.educacion.navarra.es\/cursowp2017\/wp-content\/uploads\/2017\/02\/cuadros-en-la-calle.jpg\" "\\"Imagen")
<\/a>Tama\u00f1o de las im\u00e1genes<\/h2>\n
Metadatos de\u00a0las im\u00e1genes<\/h2>\n
\n
<\/a>Enlaces de las im\u00e1genes<\/h2>\n
\n
<\/a><\/a><\/a><\/a>