Trucos para Joomla
Pequeña guia para la publicación de imágenes en Joomla
con Multithumb.
-
Organizar las imágenes
-
El tamaño de las imágenes
Haga click aquí
para ver una guia rápida para crear artículos
de Joomla.
Hay que tener las imágenes bien organizadas en carpetas y subcarpetas,
todo ello dentro de una carpeta principal que llamaremos, por ejemplo
"galeria". Mejor una subcarpeta para cada artículo
de Joomla. Luego vereis por qué. Al lado de esta carpeta "galeria",
crearemos otra carpeta llamada por ejemplo "galeria_web",
donde se alojaran las imágenes redimensionadas. Cuando creemos nuestras
galerias en Joomla y Multithumb, no se recomienda tener mas de 20-30 imágenes
por carpeta.
- Por supuesto todas las fotos deben guardarse en JPG. Fotos más
ligeras (con menos Kbs.) harán que la web se cargue más
rápido y que no tengamos que preocuparnos por transferir demasiados
megas a final de mes. - Lo ideal es buscar un tamaño en el que los detalles de la imagen
se vean bien, pero que no sobrepase la pantalla (así evitamos
el uso de las barras de desplazamiento y también que alguien
la use para otros fines). - Hay que intentar en lo posible que no haya grandes diferencias entre
el tamaño horizontal y el vertical entre nuestras fotos. Lo ideal
seria que todas las fotos fueran horizontales, pero como esto no suele
ser posible, simplemente intenta que los tamaños se parezcan
lo mas posible, evitarás problemas. - Un buen tamaño suele ser 640x480 = 1 megapixel. Queda así:
-
O bien 480x360:
-
o 320x240:
si tenemos muchas imágenes verticales podemos usar el mismo
tamaño horizontal-vertical, por ejemplo 320x320:
.
-
El redimensionado de las imágenes
Joomla, junto a Multithumb, se encargarán de redimensionar las imágenes
automáticamente cuando las insertemos en nuestros artículos,
nosotros solo debemos preocuparnos del tamaño que queremos que adopten
las fotografias al clickar en ellas para verlas ampliadas. Ahí van
unos consejos a la hora de elegir tamaño:
- primero hay que descargar la última versión del ImageMagick
en su versión sin dlls (static). El
link de descarga está aquí. Hay que bajar la ImageMagick-6.3.6-10-Q16-windows-static.exe - Lo instalamos en su carpeta predeterminada: c:\archivos de programa\imagemagick6.....
- Cuando termine de instalar, vamos a crear un Nuevo
-> Documento de Texto en
un lugar muy accesible, por ejemplo el Escritorio. Lo llamaremos, 640x480.vbs
, no 640x480.txt, hay que cambiar la extensión. - Una vez creado hay que hacer click en él, con el botón
derecho, y seleccionamos "Modificar" o "Edit", el
fichero en blanco se abrirá con el bloc de notas, y ahora vamos
a copiar y pegar el siguiente codigo dentro del fichero 640x480.vbs,
y luego lo guardamos. -
Subir las fotos por FTP
Ahora que ya tenemos las fotos con su tamaño perfecto, vamos a
mandarlas a internet. Existen varios programas para ello, uno gratuito
y muy bueno es el FileZilla. Se
puede descargar en esta web.
- Descargamos FileZilla, lo instalamos en español, y luego
lo abrimos, y rellenamos las 3 casillas con los datos de nuestro servidor
FTP: SERVIDOR, USUARIO y PASSWORD. y pulsamos para "Conexión
rápida".
- A la izquierda tenemos los ficheros de nuestro disco duro, y a la
derecha los de internet. - Las fotos en el joomla hay que guardarlas en la carpeta \images\stories
- Lo que vamos a hacer es arrastrar y soltar la carpeta de fotografias
"galeria_web" de nuestro
ordenador (ventana de la izquierda), hasta la carpeta de imagenes
de joomla dominio.com/datos/web/joomla/images/stories (ventana de
la derecha) - Ahora esperamos a que acabe de transferir.
Cuando Filezilla nos pregunte si deseamos reemplazar las fotos de
internet, vamos a marcar "Sobreescribir si es más nuevo"
y "Usar siempre esta acción", de esta manera solo
se envian a internet las fotos nuevas o modificadas, y podemos arrastrar
toda la galeria de una sola vez, y no carpeta por carpeta como al
redimensionar.
- Descargamos FileZilla, lo instalamos en español, y luego
-
Insertar las imágenes en los artículos de Joomla
- 1: la manera normal (sin Multithumb) sin efecto de pantalla completa.
Adecuada para banners, iconos, e imágenes en el texto de introducción.
Consiste en insertar imágenes entre el texto del artículo
como lo haríamos en Word u otros editores de texto, o sea, haciendo
copiar y pegar o arrastrando las fotos del punto (3)
al punto (4).
- Seleccionamos TODAS LAS FOTOS que queremos insertar en nuestro
artículo, de la lista (1). - Pulsando las flechas (2), las pasamos a la lista de contenido (3).
- Una vez en la lista de la derecha, seleccionamos una de las fotos. La
veremos justo debajo (4). - Editamos las opciones en el punto (5), seleccionamos si queremos la
imagen alineada a derecha o izquierda y si el texto tiene posición
superior o inferior, y también el texto alt (texto descriptivo
de la foto). - Pulsamos el botón Aplicar (7) para que se guarde la información
de la imagen. - Ahora ponemos el cursor en el punto del texto donde queremos la imagen
(8) - y por último pulsamos "poner imagen" (9), y veremos
aparecer el texto "{mosimage}" justo en el punto donde se va
a ver la imagen una vez publicado en Joomla. - Ya podemos proceder con otra imagen.
- Para ver como queda, guardamos y abrimos la web en otra ventana (el
botón previsualizar de arriba a la derecha no la mostrará
correctamente). - Atención, esta técnica solo se puede utilizar para el
"texto principal", es decir, para cuando se vea el artículo
completo, no para el texto de introducción. Si intentamos utilizar
esta técnica para poner una imagen en el texto de introducción,
al hacer click sobre ella, no se verá a pantalla completa, si no
que nos mostrará el artículo completo. Esta función
de Multithumb se llama "Blog mode", y es especialmente interesante
combinada con la funcion "auto gallery":
- 3. crear galerias automáticas con Multithumb, auto-gallery.
Adecuada para mostrar una galeria con todas las fotos de una carpeta dentro
del texto principal del artículo.
- Seguimos los pasos igual en que el modo anterior, pero esta vez,
solo vamos a pasar 2 imágenes de la lista (1) a la (3). - En la lista de contenido (3) debe aparecer primero la foto que vamos
a utilizar en el texto de introducción, y que mediante la función
"Blog mode" hará que se entre al artículo completo
cuando se clicke sobre ella. - La segunda de la lista debe ser la primera de las fotos de la galeria.
- Hacemos click sobre ella en la lista (3), nos aparece debajo (4)
- Modificamos sólamente el parámetro "texto de la
etiqueta" (6), debemos escribir "mt_gallery" - Pulsar el botón "Aplicar" (7).
- Por último, ponemos el cursor en el punto donde queremos insertar
la galeria (en el texto principal) e insertamos SOLO esta imagen pulsando
"Poner imagen" (9) - Y solo con esto, Multithumb nos creará automáticamente
una galeria con TODAS las fotos que haya en la carpeta de las fotos
seleccionadas, todas ellas con el efecto de pantalla completa.
- Seguimos los pasos igual en que el modo anterior, pero esta vez,
-
Hay que tener en cuenta que, en los 3 casos, y si no hemos configurado
Joomla para lo contrario, cuando se muestren los artículos al completo,
el texto de introducción se muestra también. Por ello debemos
intentar que las imágenes que insertemos en el texto de introducción,
no se repitan el el texto principal. Una buena configuración de
los artículos és la siguiente, hemos utilizado el método
3:
El cuadro 1 es el texto de introducción, en él hemos insertado
una imagen, la primera de la lista de contenido, y hemos puesto las propiedades:
Alinear imagen a la izquierda y Captación posición superior
para que el texto quede arriba a la izquierda y rellene el lateral de
la imagen. A continuación pegado un texto descriptivo. Al
final del texto de introducción hemos insertado también
un par o tres salto del línea, de lo contrario, las imágenes
inferiores quedarian pegadas al final del texto, mientras lo que queremos
es que queden debajo.
En el cuadro 2, que es el texto principal, hemos insertado la segunda
de las imágenes de la lista de contenido, poniendo el texto "mt_gallery"
en la pripiedad "texto de la etiqueta", y esto ha hecho aparecer
automáticamente todas las fotos que hay en la carpeta de esta imagen.
Si algún dia añadimos una foto a esta carpeta, aparecerá
automáticamente en esta galeria. Cuando clickamos en una de las
fotos, aparece a pantalla completa, y podremos ir pasando con las flechas
derecha e izquierda por las cinco fotos de la carpeta sin tener que ir
clickando una por una. El tamaño de las fotos es el que hayamos
seleccionado en la configuración de Multithumb (ver mas abajo),
así como el número de columnas, el borde, etc...
Por supuesto dentro del texto principal podremos insertar texto o imagenes
de otras carpetas utilizando el método 1, antes o después
de las imagenes de la galeria, por lo tanto la galeria no monopoliza el
contenido del texto principal, aunque no podemos poner dos galerias juntas
en el mismo artículo.
Recomendamos NO INSERTAR GALERIAS CON EL MÉTODO 3 EN EL TEXTO DE
INTRODUCCIÓN ya que las galerias, sobretodo si tienen muchas imágenes,
tardan unos segundos en cargar, y si cada vez que un visitante clicka
un menú, hay que cargar una galeria, la velocidad de la web se
resiente. Lo adecuado es cargar la galeria solo cuando el visitante entra
a ver el artículo completo, tal como se muestra en este ejemplo.
-
Configurar MultiThumb
En la web de administración de Joomla, menú Mambots ->
Mambots del sitio -> Multithumb.
Esta es una configuración habitual, vereis que podemos modificar
el efecto, el tamaño, el número de culumnas,,,,
:
Existen muchas maneras de redimensionar muchas imagenes simultaneamente,
esta es una más. A nosotros nos parece la más práctica.Existe en internet un conjunto de programas gratuitos llamados
ImageMagick. Estos programas no tienen una interfície gráfica
como la mayoria, si no que funcionan a través de la línea
de comandos. Esto permite crear ficheros de comandos de windows que lanzen
estos programas de forma automática al soltar una carpeta sobre dicho
fichero de comandos, y que ellos se encarguen de redimensionar todas las
imágenes de esa carpeta al tamaño adecuado para mostralas
en nuestra web. Recomendamos entrar en la web de ImageMagick para ver su
guia de uso
con los ejemplos de todos los efectos que podemos crear (está en
inglés, y algunos efectos solo se pueden conseguir con linux). Esto
es lo que vamos a hacer:
Si
lo hemos hecho todo correctamente, ya podemos utilizar nuestro fichero de comandos
de windows para redimensionar todas las fotos de una determinada carpeta dentro
de "galeria".
Para ello, lo único que debemos hacer es arrastrar y soltar
la carpeta deseada encima del fichero 640x480.vbs que hemos guardado
en algún sitio accesible.
Automáticamente, todas las imágenes jpg contenidas dentro de
la carpeta arrastrada, serán redimensionadas a 640x480pixels, y guardadas
en la carpeta "galeria_web"
Las fotos originales NO se modifican.
Solo se redimensionan las imágenes contenidas directamente dentro de
la carpeta arrastrada, no las de sus subcarpetas, deberemos ir arrastrando subcarpeta
por subcarpeta.Si arrastramos la carpeta c:\galeria, las
imágenes se guardan en c:\galeria_web
Si arrastramos la carpeta c:\galeria\fotos,
las imágenes se guardan en c:\galeria_web\fotos
Si arrastramos la carpeta c:\galeria\fotos\vacaciones,
las imágenes se guardan en c:\galeria_web\fotos\vacaciones
etc...
Cuando soltemos la carpeta, aparecerá la siguiente pantalla de proceso.
Dicha pantalla nos va indicando las imágenes que se redimensionan.
Se puede minimizar, y arrastrar más carpetas para redimensionar varias
carpetas simultáneamente.
Cuando el proceso termina, se abre la carpeta de destino con las imágenes
redimensionadas.
Podemos modificar los parámetros del fichero 640x480 para adaptarlo a
nuetras necesidades.
Por ejemplo podemos modificar el tamaño de las imagenes, las carpetas
de origen y destino, activar la opción de forzar un determinado tamaño,
poner prefijos o sufijos a las imágenes resultantes, etc... Nunca debemos
poner lo mismo en carpetamadre y carpetadestino, ya que esto provocaria que
las imágenes originales fueran sobreescritas.
Y además, podemos guardar tantos ficheros vbs
modificados como queramos, así tendremos varios iconos con diferentes
tamaños de foto para diferentes necesidades, uno para las de la web,
otro para mandar por mail, otro para hacer diapositivas, etc.. y lo único
que tendremos que hacer es arrastrar las carpetas encima del fichero adaptado
a cada necesidad.
Bueno, y por fin ya tenemos todas nuestras fotos en internet. Ahora ya
podemos irlas insertando en nuestros artículos de Joomla. Mediante
el plugin Multithumb, veremos facilitada la tarea de crear galerias con
muchas fotos, además de contar con un elegantísimo sistema
de visualización a pantalla completa. Cuando editemos un artículo
de Joomla, a la derecha veremos la pestaña "Imágenes"
(1) , donde
encontraremos todas las carpetas y fotos (2)
que hemos subido anteriormente. No tenemos que preocuparnos
del tamaño.
Existen 3 maneras de insertar imágenes en Joomla.
Gracias a Multithumb todas las imágenes que insertemos en nuestros
artículos, tendrán los mismos tamaños y bordes. De
esta manera mantendremos la misma apariencia en toda la web.Si deseamos
deshabilitar el Multithumb para este artículo, por ejemplo si queremos
modificar el tamaño de una foto, o poner un icono o banner, debemos
escribir el texto {nomultithumb} justo antes de la imagen. Además
de "{nomultiuthumb}", se pueden insertar multitud de parámetros
antes de cada imagen. Aquí
encontrareis más información. Esta técnica se puede
usar tanto en el texto de introducción como en el principal.
2: insertar múltiples imágenes con Multithumb, con efecto
a pantalla completa.
Adecuada para poner múltiples fotos independientes dentro del
texto principal del artículo.
Procedemos igual que en el caso 1, pero en lugar de copiar y pegar, o de
arrastrar, vamos a utilizar la función "MosImage" de Joomla.
Multithumb es un sistema muy potente y con muchas posibilidades. Podeis
ver la pagina oficial, con todos los ejemplos y funciones, aquí.
Entre ellas destaca la posibilidad de añadir una marca de agua a todas
las imágenes. Para ello necesitaremos guardar una imagen GIF, con fondo
transparente, en la carpeta de imagenes de joomla, y luego rellenar correctamente
la configuración en "Watermark options". De esta manera, siempre
que una foto se muestre a pantalla completa, ese fichero gif aparecerá
sobreimpresionado en ella.
Cap comentari:
Publica un comentari a l'entrada