Insertar imágenes en las páginas con el editor TinyMCE

 

Insertar imágenes en las páginas

 Recomendaciones previas: Se recomienda preparar una carpeta con las imágenes que vamos a usar para la web, estas imágenes se recomienda que sean de un tamaño adecuado para que las páginas que las contengan no “pesen” demasiado y carguen rápido

El primer paso será situarnos en la parte del texto donde queramos insertar la imagen, es un paso que no es del todo obligatorio ya que una vez hayamos insertado la imagen en la página con un simple Cortar/Pegar la podemos mover dentro del contenido.

Mediante el anterior icono abriremos una pantalla de dialogo para insertar una imagen dentro del contenido. Como la página web está “colgada”, es decir se encuentra en un servidor, la imagen la tendremos que “colgar” también para poder disponer de ella. Así pues si no tenemos imágenes previas que hayamos colgado o subido lo haremos de la siguiente manera.

En la ventana de dialogo pulsaremos el botón examinar desde el icono donde vemos el cursor o manita.

Ventana examinar

Esto nos abrirá un explorador de ficheros que nos permitirá subir tanto imágenes como documentos. Su funcionamiento es muy similar al de una carpeta de ficheros como la que podamos tener en nuestro ordenador.

Una vez subidas las imágenes nos permitirá añadirlas a la web. Se recomienda subir solo las imágenes que se vayan a utilizar y borrar las que no estén en uso o no se vayan a usar nunca.

Explorador ficheros elfinder

Subir un archivo o imagen

Para iniciar esta acción lo podemos hacer de diversas maneras

a) Podemos clicar el icono en forma de disquete.

b) Podemos situarnos en el área en blanco de la ventana del explorador de ficheros y pulsar botón derecho para que nos aparezca el cuadro de diálogo de acciones y seleccionar "Subir archivo".

varias imagenes a la vez

Automáticamente se abrirá la ventana de nuestro ordenador para que busquemos la imagen que queremos subir (1).

Podemos elegir una o varias imágenes a la vez (2). Por último pulsaremos abrir y las imágenes empezaran a subirse al servidor.

Un diálogo visual de carga nos va a indicar como avanza el proceso:

cargar archivos TinyMCE

Dependiendo del tamaño o peso de las imágenes cargadas esta operación puede tardar varios segundos.

Una vez tenemos las fotos podemos elegir la que queremos insertar y pulsamos "enter"

 Cuando elijamos la foto esta quedará en una vista previa en la pantalla que hemos visto al  inicio de este apartado.

 Se recomienda rellenar el campo titulo y descripción de la imagen.

Imagen de ejemplo

Como vemos el tamaño mostrado será el original, si la imagen es muy grande la habremos de redimensionar para que tenga el tamaño adecuado y se ajuste a las proporciones ideales del contenido de  la página, Además nos puede interesar darle un margen, un borde o una alineación, esto lo podemos hacer desde la pestaña “Apariencia”:

Ventana apariencia TinyMCE

A la derecha de esta ventana tendremos una aproximación del aspecto relativo que puede tener nuestra imagen según las características que le demos.

Ejemplo de alineación

Si insertamos la imagen y no nos gusta el resultado, seleccionando la imagen mediante un clic y volviendo a pulsar el icono de imagen nos saldrá de nuevo el editor de imágenes para que podemos cambiar los parámetros.

Si tan solo queremos cambiar el tamaño de la imagen se puede hacer seleccionando la imagen y estirando o encogiendo de las puntas como vemos en la siguiente imagen:

Detalle alineación