| Suscribir mediante RSS

Imágenes en WordPress, lo básico

25 enero 2010 Diseño web

Muchos sabemos como poner imágenes en nuestros Posts de WordPress pero por comodidad o desconocimiento no aprovechamos todas las posibilidades que nos ofrece a la hora de subir una imagen al servidor.

Para insertar una imagen en un post, después de haberla seleccionado, en la ventana o cuadro de diálogo que se abre hay varias opciones.

– En el campo Title poner lo que se quiera que aparezca cuando se pone el ratón encima de la imagen.
– Alternate Text es igual que el anterior, se usan para sustituir la imagen por texto en los navegadores de algunas personas con discapacidad visual. De ahí la importancia de poner un texto lo más descriptivo y que guarde relación con la imagen. También es usado por los motores de búsqueda al considerarlos palabras claves.
– El campo Caption es para subtitular y poner un marco alrededor de la imagen en los themes que estén preparados para ello, en caso de duda dejar en blanco.
– El campo Description es para poner un comentario a la imagen, no sale en el post. No es necesario rellenarlo.
– Para poner un link de la imagen seleccionar el botón que pone File URL. WordPress se encargará de poner el código correspondiente. Esto significa que al pulsar sobre la imagen en el Post se abrirá otra ventana en el navegador conteniendo sólo la imagen en su tamaño original.

Hay themes que tienen su propia gestión de las imágenes y suelen incluir un archivo llamado image.php para que no salgan en otra ventana sino que se muestre como si fuese otro Post. También existen plugins como por ejemplo lightbox que permiten con un bonito efecto mostrar la imagen sin cambiar de ventana.

Si no se quiere Link y sólo se quiere insertar la imagen en el post pulsar el botón None, si se tiene lightbox no actuará.

Alignment,
– None si no quieres ninguna alineación o tu theme tiene su propia alineación
– Left, alinea la imagen a la izquierda (el texto se situa a la derecha de la imagen)
– Center, coloca la imagen en el centro (sin textos a los lados)
– Right, alinea a la derecha (texto a la izquierda).

Según lo anterior WordPress añade al código las clases CSS alignnone, alignleft, aligncenter y alignright. Normalmente todos los nuevos themes están preparados para responder a estas alineaciones aunque puede haber alguno que no lo esté, sobre todo los antiguos. En ese caso se pueden añadir a la hoja de estilos style.css sin grandes complicaciones.

Size
– Thumbnail, imagen pequeña
– Medium, imagen de mediano tamaño
– Large, imagen de gran tamaño
– Full size, la imagen al tamaño real

Para elegir una u otra hay que tener en cuenta el tamaño real que se sube. No se puede poner una imagen de 1024 x 768 pixeles si la que subes es de 200 x 200 por ejemplo.

Una vez preparado lo anterior pulsar el botón Insert into Post. Esto crea los códigos necesarios con el enlace al archivo de imagen que acabas de subir. Recordar primero poner el cursor en el lugar del texto elegido para poner la imagen en la ventana de edición del Post. Para ver los códigos es necesario estar en el modo HTML del editor de Post.

El botón Save All Changes es para guardar la última elección.

Las dimensiones que aparecen en Size se configuran en el Menú Settings – Media.

Puedes poner las dimensiones que quieras, aunque no es conveniente muy grandes porque ralentiza la carga del blog y aumenta el tamaño de las carpetas innecesariamente. Ademas hay que tener en cuenta el espacio dentro del Post, normalmente no supera los 500 pixeles de ancho y a veces menos, eso depende del theme.

– Thumbnail size se refiere a los Thumbnails (miniaturas), 150 x 150 suele estar bien. Si marcas donde pone “Crop thumbnail to exact dimensions” (Recortar las miniaturas a las dimensiones exactas) las imágenes salen con lados iguales. Si la imagen no es cuadrada se recorta el lado mayor que supere los 150 pixeles para que quepa en la medida. Si no marcas donde pone “Crop thumbnail to exact dimensions”. La imagen se reduce y guarda la misma proporción que la original. En el caso de que no sea cuadrada el lado mayor se pone a 150 pixeles y el menor se reduce guardando las proporciones originales.

Esto último se aplica al resto de tamaños.

– Medium size, la medida que quieres para las imágenes de tamaño medio.
– Large size, la medida para las imágenes grandes.

Esto se hace para que todas las imágenes que se suban al servidor y aparezcan en el blog tengan las mismas dimensiones. Configura tus propios tamaños y elige según desees.

Un detalle a tener en cuenta, si subes imágenes muy grandes WordPress crea todos los tamaños intermedios automáticamente. Es decir, si subes una imagen mayor que la especificada en Large en la carpeta correspondiente obtendrás copias de tres imágenes dimensionadas para los tamaños Thumbnails, Medium, Large más la imagen a tamaño original. Esto aumentará el tamaño de las carpetas de imágenes del blog.

Si sabes la medida de las imágenes que quieres en el Post súbelas ya con ese tamaño y después eliges la opción Full size, así ahorrarás espacio en el servidor y no te hará falta establecer tamaños intermedios.

En las últimas versiones de WordPress existe una nueva opción, Embeds. Si marcas la casilla Auto-Embeds (auto-embebidos o auto-incrustados) el contenido de ciertas URLs será incrustado en los Posts sin necesidad de códigos ni plugins. Es el caso de los videos de YouTube, sólo teclea la URL del video y WordPress hará el resto. Por supuesto no se puede incrustar todo tipo de URLs por razones de seguridad. Consulta en codex.wordpress.org las URLs soportadas.

En Maximum embed Size (tamaño máximo incrustado) pones las medidas máximas que debe tener el código embebido.

Otros artículos de Diseño web

WordPress.com contra WordPress.org
Cómo crear una página de autor Parte 1
Colores web, lo básico
Diferencias entre Excerpt manual automático y more
Cómo cambiar la URL en WordPress

10 Respuestas a “Imágenes en WordPress, lo básico”

  1. Marisol dice:

    Hola!
    Muy buen tema! Es de gran ayuda para mi!
    Gracias por el tiempo que empleas en enseñarnos,cosas importantes!
    Un abrazo!
    Marisol


  2. admin dice:

    De nada, cualquier tema que deseen tocar y esté a mi alcance puedo comentarlo. Igual creo una página con cosas básicas que a veces pueden parecer obvias y no lo son tanto.

    Gracias por la visita
    Saludos


  3. Chris(tian) dice:

    Hola, estoy intentando poner las miniaturas de mis posts pero a un tamaño personalizado de 214 x214 px. Como no quiero deformar la imagen y me interesa que salga una pequeña área de la imagen grande que postee, he leído que se puede seleccionar ese área de 214 x214 que quiero y decir de que parte de la imagen real la quiero. Imagino que es con la herramienta crop (recortar) igual que en photoshop, pero me aparece inactiva cuando le doy a editar imagen en el administrador de wordpress.

    Hay que activarla o es que hago mal el procedimiento para conseguir esto? vamos… ¿cómo se hace? porque solo me permite hacer rotaciones y volteos de la imagen que esté editando.

    Gracias


  4. Chris(tian) dice:

    Solucionado del todo. Después del cierre de php en functions.php no puede haber ningún espacio o salto de línea. Es eso por lo que no me aparecía esta opción estre otras activas. En este caso no me aparecía la imagen para recortarla.
    Saludos



  5. Hola, he empezado hace poco con un blog con WordPress, y tengo un problema, cada vez que inserto una foto, además de en el sitio y con las medidas que tengo, también me aparece en grande por encima del título, además cuando la borro, desaparece del post pero no de esta ubicación.
    Como ejemplo puedes mirar http://www.aulafinanzas.com/suspension-dividendos-telefonica-en-gurusblog/
    Muchas gracias


  6. admin dice:

    Eso depende del theme, no todos funcionan igual.

    Es posible que en las opciones de configuración del theme permita desactivar esa característica. No te puedo decir más porque el theme es de pago, deberías consultar con el soporte.

    Un saludo


  7. martha dice:

    hola, mi pregunta es la siguiente
    mi theme wordpress se llama grid style y el la primera pagina de el demo aparece que puedes poner imagenes de cada post y al darle click entras al post, esas imagenes son las que no se como insertar, me podrias ayudar porfavor?


  8. admin dice:

    Seguramente tu theme usa la imagen destacada como imagen para el post. Lo tienes que hacer en cada post.

    Para ello, en la ventana de edición del post, en la columna de la derecha, abajo del todo, pone “Establecer la imagen destacada”. Una vez pulsas se te abre la ventana para elegir la imagen y cuando la has subido al lado del botón “Insertar en la entrada” pone “Usar como imagen destacada”.

    Un saludo



  9. Hola

    Tengo este problema. Cómo hacer que aparezca la foto por encima del título.


  10. admin dice:

    Claudio, la foto aparece encima del título, a no ser que te refieras a otras páginas del sitio.

    El artículo no trata sobre esto puesto que para conseguir lo que quieres hay que modificar archivos del theme.

    EDITO: Tu blog está alojado en wordpress.com con lo que es imposible modificar archivos del theme, a menos que tengas contratado este servicio.

    Un saludo