Insertar imágenes en los items de contenido

 

Subir imágenes a través del administrador de imágenes

Los administradores disponen de un sistema de administración de imágenes y elementos multimedia con el que pueden subir fácilmente archivos al servidor para luego insertarlos en las páginas y artículos de contenido.

Al acceder a Sitio -> Administrador de Imágenes se mostrará la pantalla principal del Administrador de Imágenes.

Esta pantalla muestra el contenido de la carpeta images que se encuentra en el directorio principal de joomla.

Las imágenes a usar en los Artículos de Contenido se almacenan en la sub-carpeta stories. Se recomienda organizar las imágenes creando nuevas subcarpetas en base a un orden lógico (de lo contrario se almacenarían todas las imágenes juntas, lo que podría llegar a complicar en gran medida su localización).

Desde el Administrador de Imágenes se puede

• Crear una sub-carpeta.

• Subir una imagen.

• Eliminar una imagen.

• Usar el código URL de la Imagen.

Cómo crear una subcarpeta

1. Abre la carpeta dentro de que cual quieres crear una nueva subcarpeta
2. Introduce un nombre en el campo ‘Crear Directorio’. Lo ideal es escribir todo en minúsculas, sin espacios o con un guión bajo, por ejemplo: articulos_noticias.
3. Pulsa el icono Crear. Cuando se refresque la pantalla, se mostrará la nueva carpeta añadida.

Cómo Subir y Eliminar una Imagen

• Usa el botón Examinar para localizar en tu ordenador la imagen que deseas subir.

• Pulsa el icono Subir en el menú secundario.

• Al finalizar la subida del archivo se mostrará un mensaje de confirmación, ‘Subida completada’, y podrás ver una miniatura de la imagen. Esta miniatura presentará dos iconos:

1. El icono Eliminar le permite eliminar la imagen de la carpeta.

2. El icono Editar le permite editar el nombre de la imagen.

 

Usar el Código Imagen/URL

Cuando pulsamos en el icono de edición de una imagen se genera un código html con la etiqueta <img> delante que se muestra en el campo Código Imagen/URL.

Podemos copiar ese código y utilizarlo para insertar una imagen dentro de un Artículo de Contenido o en cualquier pantalla en la que se pueda introducir HTML sin usar la etiqueta .

<img src="http://www.midominio.es/images/stories/clock.jpg" align="left" hspace="6" alt="Image" />

 

 

 

CONSEJOS SOBRE LAS IMÁGENES

1. Es mejor utilizar nombres de archivo de imágenes lo más breves posibles. Usar
letras minúsculas y/o números sin espacios. También se puede usar el guión bajo, _ , para marcar intervalos en el nombre de un archivo si es necesario, ejemplo: camp_verano.gif.

2. Intenta reducir al máximo el peso de las imágenes (kb) para acelerar la carga de las mismas. Este es un factor determinante para facilitar el acceso a los visitantes que no disponen de conexiones de banda ancha.

Una página web con una única imagen pequeña puede tardar más de 1 minuto en cargar si la imagen original es demasiado grande. Aunque se varíen sus dimensiones al incrustarla en el documento y se muestre a un tamaño más pequeño en el explorador seguirá tardando en cargar si el archivo mantiene el mismo tamaño.
Para reducir el peso de una imagen hay que utilizar un programa de edición de imágenes

3. Ten en cuenta las dimensiones de tu plantilla para evitar añadir una imagen que supere el ancho o alto máximo y altere el diseño de los marcos que la contienen.

Insertar imágenes con la etiqueta mosimage

El mambot ‘MOS Image’ sustituye la etiqueta por las imágenes especIficadas en el contenido. Esta función hace posible que en la zona pública se puedan mostrar algunas secciones de contenido en las que se omitan las imágenes, si así se desea.

Justo debajo del editor WYSIWYG podrás ver dos botones.

El primer botón denominado Poner Imagen permite insertar la etiqueta de imagen en cualquier parte del texto. Cuando hagas esto, observarás que el editor simplemente inserta la etiqueta en el texto.

El proceso para insertar una imagen en una Artículo de Contenido por este método consta de dos fases:

1. En primer lugar insertaremos la etiqueta en el Artículo de Contenido. Para ello

• Situamos el cursor en el área de edición del texto (texto de introducción o principal), en la posición en la que desea mostrar la imagen.

• Pulsamos el icono Poner Imagen. Se insertará la etiqueta en el texto. Deberás insertar una etiqueta "mosimage" por cada una de las imágenes a colocar en el artículo.

Las etiquetas deben insertarse al inicio del párrafo, tanto si desea alinearlas a la izquierda o a la derecha. En ambos casos el texto envolverá la imagen a la derecha o a la izquierda de la misma, según sea lo apropiado.

2. La segunda fase consiste en asignar una imagen a cada una de las etiquetas insertadas.

• La Galería de Imágenes está almacenada en la subcarpeta images/stories. Por debajo de esta se encuentra una lista desplegable de sub-carpetas. Selecciona, si es necesario, una subcarpeta para mostrar las imágenes que contiene.

• Selecciona la Imagen deseada pulsando el nombre de archivo. Se mostrará una imagen en miniatura de muestra.

• Usa la flecha derecha de selección para llevar la imagen a la zona de Imágenes del Contenido. Se mostrará una imagen en miniatura de la imagen activa.

• Repite los pasos 1 a 3 para añadir nuevas imágenes si es necesario. Ten en cuenta que las imágenes se visualizarán en los documentos en el orden que ellas aparezcan en el campo Imágenes. Es decir, la primera imagen se asociará a la primera etiqueta "mosimage", la segunda con la segunda etiqueta, y así sucesivamente. Puedes usar los botones Subir y Bajar para modificar el orden de asignación.

• Para cada imagen, puedes modificar algunos de sus atributos, como por ejemplo, la alineación, el borde, etc. Para ello, utiliza las opciones que se encuentran en la parte derecha de esta pestaña. Cuando hayas fijado los valores para los atributos de imagen, pulsa en el botón Aplicar que se encuentra en esa misma sección.

• Selecciona Alineación de la Imagen si lo deseas, para colocar la imagen al Centro, Izquierda o Derecha del texto.
• Introduce un texto para el atributo Alt (que aparecerá al pasar el ratón sobre la imagen o como aviso).
• Introduce un valor para el Borde de la imagen. Por defecto es 0.
• Introduce un texto para el Pie de Foto (Caption) y selecciona la Posición (Superior o Inferior), la Alineación (Ninguna, Centro, Izquierda o Derecha) y la Anchura.

Subir Imágenes

Desde la página de edición de los artículos también es posible subir imágenes al servidor.

Para subir una imagen pulsamos en el botón subir. Aparecerá una ventana desde la cual podremos buscar el archivo en nuestro ordenador.

Las imágenes que subamos desde aquí se almacenarán en la carpeta images>stories

Para que una imagen recién subida sea visible en la lista de imágenes de la ventana de edición será necesario pulsar el botón aplicar para que la página se recargue.

VIDEOTUTORIAL 

 

   Luis Barriocanal (2006) - Esta obra está bajo una Licencia Creative Commons by-nc-sa