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

Tags: CMS | gestor de contenidos | joomla 1.6 | joomla 1.7

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
(artículo válido para la instalación del editor también en Joomla 1.6 - Joomla 1.7; la única diferencia un archivo específico para el plugin mediabox)

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

Categoría: Uncategorised, 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.

Estado: Publicado, o si no no lo visualizaremos desde el Frontend del sitio.

Acceso: Público, cualquier usuario – visitante que visite el sitio podrá verlo.

Permisos: No le asignamos ninguno, sólo queremos que sea leído por todos los usuarios – visitantes del sitio.

Destacado: Sí, sólo queremos ver cómo queda el artículo, colocarlo en la página inicial del sitio es tan válido como cualquier otro lugar de tu 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.

Para mantener un cierto orden y poder controlar mejor el lugar donde guardas las imágenes es muy conveniente que crees en esta carpeta 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 carpetas, 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 sampledata para entrar en ella y observar los archivos y directorios que contiene (las carpetas fruitshops y parks son carpetas de ejemplo que incluye el sistema, puedes eliminarlas si lo deseas). Ahora haz clic en el icono con tres puntitos: esto te permite “subir” un nivel en el árbol de directorios, vuelves así a la carpeta images. 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)

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

Dimensions – 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.

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

Margin – 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...

Border – Borde. 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 Insert 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 (Guardar y cerrar). Actualiza el Frontend de tu sitio y comprueba el aspecto del mismo con la imagen en él.

Descarga nuestro tutorial en formato PDF - 508 kb - Descargar

Mostrar este artículo en su sitio web

< Prev

Joomla 1.6 - Joomla 1.7 - Componentes