Cómo incluir imágenes propias de tu equipo en tus artículos de Joomla con el editor JCE 2.0.7

Tags: CMS | gestor de contenidos | Joomla

Ya debes saber a estas alturas que uno de nuestros editores de texto favoritos en Joomla es el editor de texto avanzado JCE 2.0.7. Si no eres demasiado exigente puede ser que te baste el editor predeterminado de Jooma TinyMCE, pero si te decides a seguir este artículo, y otros que tenemos en preparación, dedicado a la inserción de imágenes con este excelente editor seguro que se abrirá un hueco también entre tus preferidos.

Si no tienes instalado JCE 2.0.7 en tu sitio Joomla: ver artículo dedicado a su instalación

Inicia la administración de tu sitio Joomla y en el Panel de Control haz clic sobre el botón Añadir un nuevo artículo para acceder a la página de configuración.

Título: Imágenes incluidas en los artículos con JCE 2.0.7

Alias: No escribas nada, deja que Joomla se encargue de esto

Publicado: Sí, o si no no verás el artículo en el Frontend de tu sitio

Página principal: Sí, sólo queremos ver cómo queda el artículo, colocarlo en la página de inicio del sitio es tan válido como cualquier otro lugar de tu sitio.

Sección – Categoría. Sin clasificar, nuestra única pretensión es practicar con las opciones que JCE incluye para las imágenes. No necesitamos ubicarlo en ninguna sección ni categoría específica de nuestro sitio.

Observa justo debajo el aspecto del editor JCE. El icono que parece una fotografía en la última fila de iconos es el que te va a permitir insertar – editar imágenes en el artículo.

 

Prepara el texto del artículo

No tenemos muchas ganas de escribir un texto y mucho menos con cierta extensión así que vamos a copiar un fragmento de texto directamente desde la Wikipedia.

Acude a la dirección URL del artículo que vamos a copiar – pegar en el editor:

 http://es.wikipedia.org/wiki/Gij%C3%B3n

Selecciona unas cuantas líneas del texto, en concreto todo el primero fragmento. Cópialo al portapapeles del sistema por cualquiera de los procedimientos que ya conoces (botón derecho del ratón – copiar, combinación de teclas Ctrl + C o menú Editar – Copiar).

 

Acude ahora a tu artículo en Joomla 1.5 y localiza el icono del editor que te permite pegar texto copiado previamente.

 

Observa que despliega dos opciones:

• Paste – pegar. Esta opción pega el texto tal y como ha sido copiado, manteniendo los formatos (y en el caso de la Wikipedia, incluso los hipervínculos)

• Paste as Plain Text. Esta opción pega el texto sin formato, como texto plano. Es la opción más recomendable y la que usaremos en esta ocasión.

Al hacer clic en Paste as Plain Text aparece una ventana emergente para pegar en él el texto copiado. Utiliza la combinación de teclas Ctrl + V para hacerlo.

 

Haz clic en el botón Insert para añadirlo al editor. Retócalo si lo necesitas. El artículo ya está listo para colocar imágenes en él.

Incluye una imagen que tienes en tu ordenador

Vas a añadir la imagen siguiente a tu artículo. Por tanto, primero descárgala y guárdala en tu equipo porque la práctica que realizaremos a continuación será incluir una imagen guardada en tu equipo en el artículo. Tiene un tamaño relativamente grande para el artículo que estamos elaborando pero no te preocupes, JCE se encargará de reducir su tamaño de una manera muy simple (ojo: reducir el tamaño de una imagen no implica necesariamente reducir su peso; no nos metemos en cuestiones técnicas sobre el tamaño, resolución o formato de la imagen, pero es un aspecto que debes considerar cuando publicas imágenes en Internet).

Haz clic con el cursor del ratón al comienzo del artículo: la imagen se colocará en el lugar exacto donde está el cursor, por eso asegúrate primero de seleccionar el lugar que deseas.

Pulsa sobre el botón Insertar / Editar imagen del editor JCE. Una nueva ventana, el Administrador de imágenes, aparece en pantalla. Si la resolución de pantalla no te permite verla al completo, como es mi caso, pulsa la combinación de teclas Ctrl + - para reducir su tamaño (Firefox).

 

Localiza y “sube” al servidor la imagen deseada

La ventana se encuentra dividida en dos partes: en la parte superior se encuentran diferentes parámetros referidos a la imagen que selecciones en el explorador de archivos (parte inferior).

El explorador muestra de manera predeterminada la carpeta que Joomla establece por defecto para el alojamiento de imágenes, la carpeta images. En su interior se encuentra la carpeta stories que es la carpeta recomendada por el sistema para guardar tus propias imágenes.

Para mantener un cierto orden y poder controlar mejor el lugar donde guardas las imágenes es muy conveniente que crees en esta carpeta stories todas las que necesites de forma personal. Y puedes hacerlo directamente desde esta ventana, sin necesidad de acudir al gestor multimedia que incluye Joomla para estas funciones (otra ventaja más de utilizar este excelente editor, ¿no crees?)

Observa los iconos que se muestran justo en la parte superior derecha del explorador de archivos:

El primero de ellos te permite crear carpeta, el segundo localizar y cargar imágenes a la carpeta seleccionada en el explorador de archivos.

Veamos. Haz clic en el nombre de la carpeta stories para entrar en ella y observar los archivos y directorios que contiene (las carpetas food y fruit son carpetas de ejemplo que incluye el sistema, puedes eliminarlas si lo deseas). Ahora haz clic en el primer icono de la Barra de herramientas del explorador de archivos. Una pequeña ventana aparece en pantalla para que escribas el nombre de la carpeta. Escribe gijon en el campo de texto name (sin tilde, ni mayúscula) y pulsa el botón Ok (o la tecla Intro de tu teclado). La carpeta aparece ahora en el listado:

 

Ahora haz clic sobre la carpeta gijon para entrar en ella ya que aquí ubicarás el archivo descargado. Y, a continuación, pulsa el segundo de los iconos de la Barra de Herramientas del Explorador de archivos.

En pantalla aparece una nueva ventana que te va a permitir localizar (haz clic en el botón Browse – Examinar para navegar por los directorios – carpetas de tu equipo hasta encontrar la imagen deseada):

 

Observa que también puedes arrastrar un archivo imagen, o varios, directamente desde una ventana de tu equipo a la ventana de carga de imágenes de JCE (una nueva ventaja de JCE, la subida múltiple de archivos).

Cuando la imagen chillida.jpg se encuentre en la ventana haz clic finalmente en el botón Upload. El archivo se copiará a la carpeta gijon. Ya la has subido al servidor pero aún debes indicar manualmente a Joomla que la utilice.

Observa los pequeños iconos justo a la derecha de la miniatura: pasa el ratón por encima de ellos y podrás ver su funcionalidad (en perfecto castellano).

Haz clic en el nombre de la imagen. Fíjate cómo se cumplimentan algunos de los parámetros de la imagen en la parte superior de la ventana:

 

URL. Aparece la URL relativa a la imagen (si quieres saber más sobre Urls relativas y absolutas visita https://belenus.unirioja.es/~darueda/informes/URL%20absoluta%20y%20relativa.html)

Texto alternativo. Una deferencia hacia conexiones lentas o hacia aquellos equipos configurados para navegar sin visualizar las imágenes. Escribe El Elogio del Horizonte.

Dimensiones. La imagen es demasiado grande. Selecciona con el ratón 500 y escribe en su lugar 200. Observa que el campo del alto de la imagen se redimensiona igualmente (la casilla Proporcional está habilitada). Así se ajusta el tamaño proporcionalmente.

Alineación. Se refiere a la alineación de la imagen con respecto al texto. Despliega el menú y selecciona Izquierda.

Margen. Se refiere al margen entre la imagen y el texto y la imagen y los bordes del artículo. Escribe 9 en Superior. Como se encuentra tildada la casilla Los valores iguales, este valor también indica 9 píxeles de separación a la derecha, arriba, abajo...

Frontera. Puedes establecer un borde para la imagen. Valida la casilla para activarlo. Escribe 2 en ancho, deja el estilo sólido y el color negro del borde (cambiar el color es tan sencillo como hacer clic en el cuadrado de selección del color y luego escoger otro de los ofrecidos en las paletas de colores).

 

Cuando hayas configurado completamente la imagen pulsa el botón Insertar que se localiza en la parte inferior de la ventana:

 

La imagen se insertará en el artículo en el lugar donde indicaste, donde estaba el cursor del ratón, al comienzo del artículo:

 

A considerar:

• Puedes mover la imagen a cualquier otro lugar del artículo. Haz clic y arrastra hasta la nueva posición.

• Puedes redimensionarla directamente desde el artículo. Haz clic en la imagen, aparecen unos tiradores a su alrededor. Haz clic y arrastra hacia el interior de la imagen los tiradores de las esquinas.

• Puedes utilizar la combinación de teclas Ctrl + Z, igual que si estuvieras trabajando con cualquier procesador de textos instalado en tu equipo, para deshacer los cambios realizados.

• Puedes utilizar el menú contextual del botón derecho del ratón sobre la imagen para cambiar algunos de sus parámetros o añadir opciones nuevas muy interesantes como incluir un enlace en la imagen: Insert / Edit link.

• Puedes volver a editar las opciones de la imagen simplemente haciendo clic sobre ella para seleccionarla y acudir de nuevo al botón Insertar / Editar imagen.

¿Ventajas sobre el editor predeterminado TinyMCE de Joomla?... ¡Infinitas!

Cuando estés satisfecho de los resultados guarda el artículo. Actualiza el Frontend de tu sitio y comprueba el aspecto del mismo con la imagen en él.

Descarga nuestro tutorial en formato PDF - 519 kb - Descargar

Mostrar este artículo en su sitio web

< Prev		Próximo >

Joomla - Componentes