Codificación aprenderaprogramar.com: CU00439A
INSERCIÓN DE IMÁGENES EN ARTÍCULOS JOOMLA.
No es posible pegar imágenes directamente en nuestros artículos desde nuestro ordenador local al editor de Joomla. Tenemos que seguir los procedimientos previstos por Joomla para ello. Con las imágenes en artículos debemos tener la precaución de no subir imágenes demasiado pesadas.
Joomla no hace ninguna operación automática para reducir el tamaño de imagen, así que si insertamos una imagen de 3 Mb irá tal cual, y esto será un problema porque la página tardará mucho en cargar. Las imágenes que insertemos deben tener un tamaño reducido para agilizar la carga de la página. Recomendamos que en general las imágenes no excedan los 150 Kb en cuanto a “peso” del archivo, ni los 1024 pixeles de ancho ni de alto. En general las imágenes para ilustrar artículos basta con que tengan entre 40 y 100 Kb de peso, y entre 300 y 600 px de alto o de ancho. Solo en algunos casos especiales, como grandes fotografías que queramos mostrar en todo su esplendor o imágenes especiales, es necesario usar mayores tamaños. Si no respetamos estos parámetros nuestra página web puede volverse muy lenta.
Hay dos vías para insertar una imagen en un artículo:
a) Icono insertar/editar imagen del editor TinyMCE (o del editor que estemos empleando). Nos permite insertar una imagen que se encuentra en nuestro servidor ó en cualquier web fuera de nuestro servidor. Cuando pulsamos este botón nos aparece una ventana donde podemos definir la URL de la imagen. Opcionalmente podemos definir otros parámetros como:
1. Descripción. Es conveniente que toda imagen lleve una descripción. Esta sirve para que los buscadores como google, yahoo o bing puedan localizarla e indexarla en los resultados de búsqueda de imágenes.
2. Alineación (izquierda, derecha, centrada, etc.).
3. Dimensión: en píxeles de ancho por píxeles de alto. Esto equivale a poder ampliar o empequeñecer la imagen. Tener en cuenta que si la imagen no tiene suficiente definición y la agrandamos, se va a ver mal.
4. Borde: sirve para especificar si la imagen se enmarca con un borde negro (en puntos).
5. Espacio vertical: sirve para especificar un espacio entre el texto y la imagen, en puntos.
6. Espacio horizontal: sirve para especificar un espacio entre el lateral izquierdo y la imagen, en puntos.
Tener en cuenta que si vamos a hacer referencia a una imagen que tenemos en el directorio donde se encuentran los archivos y carpetas de Joomla la ruta habrá de ser del tipo “images/stories/borrar.jpg”, mientras que si es una imagen situada en una web externa la ruta será del tipo “http://aprenderaprogramar.com/borrar.jpg”.
No garantizamos que las opciones de borde y espaciado vayan a funcionar bien porque intervienen otros factores como la plantilla css que estemos usando, pero con un poco de paciencia se puede dejar una presentación agradable. Además, podremos instalarnos extensiones para mejorar la gestión de imágenes y crear efectos modernos como slideshows y galerías. Una inserción de imagen dentro de un artículo puede ser algo como lo que vemos en la imagen.
b) La otra vía para insertar imágenes es usar el botón que aparece en la parte inferior de la mayor parte de los editores (botón “Imagen”). Con él accedemos directamente a las imágenes en nuestra carpeta Joomla del servidor (o a aquella carpeta definida según la versión de Joomla que estemos usando en Sitio --> Configuración Global --> Sistema --> Configuración multimedia --> Ruta al directorio de imágenes, o en Contenido --> Gestor multimedia --> Opciones --> Ruta al directorio de imágenes). Este botón es similar a lo anteriormente explicado, pero tenemos la opción a subir imágenes desde nuestro ordenador local y a visualizar directamente las imágenes disponibles en nuestro directorio Joomla. Antes de subir una imagen debemos situarnos en el directorio del servidor específico a donde queremos subirla (hay que evitar tener las imágenes desordenadas, créate una serie de carpetas para mantenerlas organizadas). Si activamos la casilla “Leyenda” (Subtítulo), aparecerá como pie de imagen aquello que hayamos especificado como título de la imagen. La presencia de este botón está controlado por el plugin “Editor Botón – Imagen” o “Botón – Imagen” (Editor button – Image), que no es configurable. Si lo deshabilitamos no tendremos acceso a este botón.
El botón icono insertar/editar imagen (en la parte superior) nos da opción a, pinchando previamente en la imagen, acceder a ella y configurarla (añadirle bordes por ejemplo) mientras que el botón en la parte inferior del editor no permite la edición, sino sólo la inserción.
MODULO MOD_RANDOM_IMAGE O DE IMAGEN ALEATORIA
El módulo mod_random_image es un módulo independiente, no forma parte del media manager, pero está estrechamente relacionado con él. Tiene por fin elegir una imagen al azar, de una carpeta y con una extensión definida por nosotros.
Para generar un módulo de este tipo nos vamos a Extensiones --> Gestor de módulos --> Nuevo --> Imagen aleatoria --> Siguiente. Establecemos un título, por ejemplo “Imagen del día”, y una posición dentro de nuestra plantilla. Indicamos también si queremos que se muestre el título definido o no.
En las opciones de configuración definimos:
a) Tipo de imagen: será gif, jpg ó png.
b) Directorio de la imagen: directorio desde donde se debe extraer una imagen (cualquiera de entre las existentes expresada a partir de la raíz de Joomla, por ejemplo “images/stories/fruit” remite al directorio fruit o images/sampledata/fruitshop remite al directorio fruitshop).
c) Enlace: URL a la que se dirigirá al usuario que haga click sobre la imagen, en caso de que queramos redirigirlo a algún sitio. Si no se especifica la imagen no funciona como link.
d) Ancho y alto (en píxeles): definen el tamaño máximo que ocupará la imagen. Esto nos permite agrandar o empequeñecer el tamaño con que se muestra (aunque no guarden correlación ancho y alto la imagen no se deformará: Joomla tomará la mayor dimensión entre las dos posibles y adaptará automáticamente la otra. Si queremos, podemos establecer solo el ancho o el alto y dejar que la otra dimensión tome el valor que tenga que tomar para que la imagen no aparezca deformada).
Ejemplo de inserción de imagen aleatoria en una posición determinada.
Recordar que como hemos explicado anteriormente en este tutorial, un módulo puede ser insertado además de en una posición de la plantilla joomla, dentro de un artículo usando una sintaxis especial.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
