Imágenes en los artículos de Joomla 2.5 con el editor TinyMCE

Valoración del Usuario:  / 0
MaloBueno 

Logo Joomla 2.5En muchas ocasiones escribirás en Joomla 2.5 artículos que quieras ilustrar con imágenes. Joomla te ofrece opciones sencillas y rápidas para hacerlo a través del editor TinyMCE instalado en el sistema desde una instalación básica y, además, incluye un Gestor Multimedia desde el que podrás controlar y gestionar todos los elementos multimedia que subas a tu sitio, por tanto, también las imágenes.

Ahora bien, para indicar a Joomla qué imagen quieres utilizar existen diferentes caminos o vías:

  1. Supongamos que quieres utilizar una imagen propia que se encuentra en tu equipo: en alguna carpeta o directorio determinado, en una memoria USB, en un disco duro externo, tal vez en un CD o DVD de imágenes... Es la opción más simple. Joomla te permitirá localizar dichas imágenes y subirlas a tu espacio Joomla (organizándolas en carpetas para su mejor clasificación) y, a continuación, desde el propio editor de textos utilizarlas en tu artículo. Si lo deseas puedes utilizar el Gestor Multimedia que incluye la instalación básica de Joomla para visualizarlas, organizarlas e incluso eliminarlas del sistema. Este primer tutorial dedicado a la inclusión de imágenes en los artículos utiliza esta vía.
  2. Supongamos que quieres utilizar una imagen ya publicada en Internet, pero que no te pertenece o que no pertenece a tu sistema Joomla. Es el caso por ejemplo de añadir una imagen que tienes almacenada en algún sitio online de álbumes fotográficos como Picasa Web, Flickr, PhotoBucket, Shareapic..., en algún disco duro virtual como el servicio Dropbox, o una imagen cualquiera de cualquier sitio Web como puede ser la Wikipedia, tu blog de aula, etc. Joomla te permite utilizar todas estas imágenes en tus artículos pero para ello tendrás que enlazarlas a sus sitios originales, es decir, podrás hacerlo siempre y cuando conozcas la dirección URL del sitio donde se aloja. En un segundo tutorial dedicado a las imágenes te mostraremos cómo utilizar esta vía.

La utilización de imágenes en Joomla 2.5

Para esta práctica puedes utilizar cualquier imagen que tengas guardada en tu equipo. Joomla admite los formatos de imagen más populares como gif, jpeg o png. No es este el momento de hablar ni de formatos ni de tamaños ni de resoluciones de imagen, pero debes considerar, al igual que publicas contenido en blogs o sitios web diversos, que existen formatos comprimidos para su utilización en la Web (los indicados con anterioridad), que las imágenes no deben ser excesivamente grandes (hazte una idea que esas imágenes que realizas directamente con tu cámara fotográfica, con miles de píxeles, son quizás enormes para su publicación en Internet, un tamaño de fotografía de 450 – 500 píxeles de ancho suele ser mediano y de 800 píxeles, ya es considerada grande) y que a mayor calidad de imagen, mayor resolución y, por tanto, también mayor peso (y precisamente necesitas imágenes livianas con resoluciones de 72 ppp, suficientes para su publicación en Internet).

Si necesitas conocer más sobre todo esto te recomendamos visites el siguiente enlace que te explica todos estos conceptos. Se trata del curso online de Diseño de Materiales Web del ITE. Sus explicaciones son básicas y muy ilustrativas:

http://www.ite.educacion.es/formacion/materiales/107/cd/imagen/imagen01.html

Suponemos, pues, que dispones de una imagen con estos requisitos en tu equipo. Si no es así puedes utilizar la que te proponemos a continuación. Guárdala en tu equipo (si utilizas Firefox o Chrome, botón derecho del ratón sobre la imagen – Guardar imagen como)

Archivo para la práctica

Incluye la imagen en un artículo

Si has seguido nuestro anterior tutorial ya has creado tu primer artículo en Joomla. Es demasiado simple, apenas dos líneas de texto. Ahora vas a añadir al mismo la imagen que te interese.

Accede al Panel de Control de Joomla y haz clic sobre el botón Gestor de artículos para acceder al listado de artículos de tu sistema. Haz clic sobre el nombre del artículo ya creado para proceder a su edición:

Joomla 2.5 - incluir imágenes en los artículos

Una vez en la página de configuración y edición del artículo haz clic en el lugar del texto en el que quieras que aparezca la imagen. El comportamiento del editor de textos TinyMCE es idéntico al de cualquier otro procesador de textos: la imagen se colocará exactamente en el lugar donde se muestre el cursor.

En nuestro caso vamos a incluir la imagen al comienzo del artículo, por tanto hacemos clic al comienzo de la primera línea y pulsamos la tecla Intro a continuación para dejar espacio entre la imagen y el texto. Luego hacemos de nuevo clic en la primera línea: aquí colocaremos la imagen.

Joomla 2.5 - incluir imágenes en los artículos

Una vez posicionado el cursor del ratón en el sitio donde quieres que se muestre la imagen, haz clic sobre el botón Imagen que se localiza justo debajo del editor:

Joomla 2.5 - incluir imágenes en los artículos

El Backend se oscurece, quedando en primer plano una nueva ventana con un formulario que te permitirá seleccionar imágenes ya presentes en el sistema o subirlas desde tu propio ordenador:

Joomla 2.5 - incluir imágenes en los artículos

En realidad, las carpetas y archivos de imagen que ves en la ventana no es más que el contenido de la carpeta images de Joomla, aquella carpeta que ya te hemos indicado es la predeterminada por el sistema para el alojamiento de elementos multimedia. Se corresponde igualmente con la carpeta por defecto que muestra el Gestor Multimedia. Como puedes comprobar la inclusión de imágenes en los artículos de Joomla se relaciona íntimamente con dicho Gestor aunque, en este caso, ni siquiera tienes necesidad de utilizarlo.

Observa el apartado Directorio. En el menú desplegable puedes seleccionar una de las carpetas ya creadas en la carpeta images para alojar tu archivo imagen (para crear carpetas y poder utilizarlas en tus artículos no queda más remedio, en este momento con una instalación básica de Joomla, que utilizar el Gestor Multimedia).

Joomla 2.5 - incluir imágenes en los artículos

Puedes también, directamente, hacer clic en los iconos de las carpetas que se muestran justo debajo para navegar por su contenido y utilizar el botón Subir para ir moviéndote entre ellas.

En la práctica que estamos realizado no crearemos, de momento, ninguna carpeta. Sencillamente localizaremos la imagen y la subiremos directamente a la carpeta images.

Para ello fíjate en el apartado Subir archivos que se localiza en la parte inferior de la ventana:

imagen05

El botón Seleccionar archivo abre en pantalla la típica ventana Abrir archivo que te permitirá navegar por el directorio de carpetas y ficheros de tu equipo. Localiza, pues, el archivo imagen que descargaste al principio de este tutorial o bien uno de tu interés. Cuando lo hayas hecho haz clic en el botón Abrir o pulsa la tecla Intro de tu ordenador:

Joomla 2.5 - incluir imágenes en los artículos

Sólo tienes que hacer clic en el botón Iniciar subida para que el sistema almacene la imagen elegida en la carpeta seleccionada, en este caso la carpeta images de Joomla. Esto resulta muy práctico ya que no necesitas utilizar el Gestor Multimedia para subir imágenes a las carpetas creadas, lo puedes hacer directamente desde este apartado de la ventana (pero para crear carpetas ya te hemos dicho que sí tendrás que usarlo, o en el caso de un servidor remoto utilizar una aplicación cliente de FTP como Filezilla que te ofrece también dicha posibilidad).

Una vez veas la imagen en la ventana de inserción de imágenes de Joomla haz un clic sobre ella para seleccionarla.

Joomla 2.5 - incluir imágenes en los artículos

Observa ahora el campo URL de la imagen (1). Muestra la dirección URL relativa de la imagen en cuestión: es decir, se trata de la imagen de nombre bienvenida, formato png y localizada en la carpeta images de Joomla.

Joomla 2.5 - incluir imágenes en los artículos

¿Vas comprendiendo cómo opera Joomla con las imágenes subidas al sistema?

Otro ejemplo más. Supón que tienes la imagen patio.jpg y que la has subido a la carpeta parks de Joomla (utilizando el Gestor Multimedia). La URL de esta imagen sería:

images/sampledata/parks/patio.jpg

Es decir, la imagen de nombre patio y formato jpg se localiza en el interior de la carpeta parks, que es una subcarpeta de sampledata, una de las carpetas incluidas en la carpeta images de Joomla. ¡Así de simple! Creo que vas entendiendo que Joomla 2.5 es capaz de incluir imágenes en sus artículos tanto si conoces la dirección URL de la imagen en Internet (dirección absoluta) o la dirección URL de la imagen en el propio sistema (dirección relativa).

Una vez seleccionada la imagen a añadir rellena los siguiente campos del formulario (2):

  • Alinear. Selecciona el tipo de alineación de la imagen respecto del texto que le acompañada. Puedes elegir entre izquierda y derecha. En esta práctica en concreto no necesitamos hacerlo ya que la colocaremos centrada con respecto al espacio disponible para el artículo. Deja pues la opción predeterminada No establecido.

  • Descripción de la imagen. Escribe una descripción para la imagen. Esta descripción se corresponde con el contenido de la etiqueta alt en código html. Se trata de un texto alternativo que se muestra en la página si el usuario tiene desactivada la posibilidad de visualizar imágenes en su navegador o si por alguna razón no puede verlas (por ejemplo si ha habido un error en la conexión, o la imagen no existe). Además, mientras la imagen no se muestre porque se está cargando, el navegador pone este texto. Hace años la opción de desactivar la visualización de imágenes se utilizaba mucho en equipos con conexiones lentas, hoy también es un atributo que sirve a los robots o buscadores para indexar las imágenes de los sitios. Acuérdate, pues, de rellenar este campo. Nosotros hemos escrito Imagen de bienvenida.

  • Título de la imagen. Si lo deseas puedes escribir un título para la imagen. Debe ser corto y preciso con relación a su contenido. Habitualmente, los navegadores muestran el contenido que escribas aquí en un recuadro emergente por un pequeño período de tiempo al pasar el ratón justo encima de la imagen. En este caso concreto lo dejamos vacío.

  • Leyenda. Si has escrito un título a la imagen, puedes establecer aquí sí dicho título se mostrará como leyenda o no de la imagen. Si estableces Sí en este campo, el navegador mostrará el título como si fuera un pie de foto de la imagen. Como no has escrito un título para la imagen deja la opción predeterminada No como seleccionada.

Una vez que has terminado de cumplimentar todos los datos haz clic en el botón Insertar que se localiza en la parte superior derecha de la ventana:

Joomla 2.5 - incluir imágenes en los artículos

La ventana se cierra, vuelves de nuevo al artículo, pero ahora verás que la imagen está presente en el mismo, en el lugar que estableciste:

Joomla 2.5 - incluir imágenes en los artículos

Ya sólo queda que guardes los cambios que acabas de realizar. Para ello acude a la Barra de herramientas de la página y haz clic en el botón Aplicar (para guardar los cambios) o bien en el botón Guardar & Cerrar, para guardar los cambios y cerrar el formulario de edición del artículo.

Joomla 2.5 - incluir imágenes en los artículos

Nota

Recuerda que en la configuración de este artículo en concreto debe estar configurado como Destacados (Si) o, en caso contrario, el artículo no será visible en la página principal del sitio, de momento, la única que tienes disponible.

truco

 

¡¡¡Truco!!!

Si quieres alinear la imagen, por ejemplo, centrarla en el artículo, haz clic sobre ella y pulsa el icono de alineación centrada del editor de textos.

Visualiza el artículo en tu sitio Joomla

Una vez que has guardado los cambios visualiza el nuevo aspecto del artículo con la imagen que acabas de incluir.

Para ello haz clic en el enlace Ver sitio que se muestra en la parte superior derecha de la ventana principal de la administración de Joomla. Recuerda que siempre puedes volver aquí desde el menú Sitio – Panel de Control.

Joomla 2.5 - ver el sitio

En Firefox y en Chrome esto abre una nueva pestaña del navegador en el que puedes ver el aspecto de la página principal de tu sitio Joomla, tal y como lo vería cualquier usuario – visitante del sitio al que accediera a él escribiendo su dirección URL en el navegador. Ahora ya puedes ver si el artículo ha quedado cómo tu querías:

Joomla 2.5 - incluir imágenes en los artículos

Descarga nuestro tutorial en formato PDF - 353 kb - Descargar

 

Escribir un comentario


Código de seguridad
Refescar

Información adicional