1
00:00:00,000 --> 00:00:05,000
Ejemplo básico de ImageCache
cambrico.net

2
00:00:05,500 --> 00:00:10,500
Accedemos a nuestro sitio con 
un usuario de administración.

3
00:00:11,000 --> 00:00:16,000
Entramos en el panel de administración
con el link Administer.

4
00:00:16,500 --> 00:00:25,500
A través de la opción ImageCache
en Site Building podremos crear presets.

5
00:00:26,000 --> 00:00:31,000
Hacemos click en Add new preset

6
00:00:31,500 --> 00:00:41,500
Le damos un nombre utilizando caracteres
alfanuméricos, - y _

7
00:00:42,000 --> 00:00:48,000
En esta pantalla podemos configurar
las acciones que queremos en el preset

8
00:00:48,500 --> 00:00:55,500
Estas son las que vienen por defecto,
pero se pueden extender con módulos
como ImageCache Actions

9
00:00:56,000 --> 00:01:00,000
La más habitual es "Add Scale and crop"
que reduce la imagen y la corta a las
dimensiones que queramos.

10
00:01:00,500 --> 00:01:04,500
En la parte inferior de la pantalla
podremos ver un preview de las
acciones aplicadas sobre un drupalicon

11
00:01:05,000 --> 00:01:07,000
Añadimos la acción a nuestro preset.

12
00:01:07,500 --> 00:01:12,500
Es ahora cuando se crea el directorio 
donde se almacenarán las imágenes 
cacheadas.

13
00:01:13,000 --> 00:01:20,000
Para esta acción podemos seleccionar
el ancho y el alto del preset.

14
00:01:20,500 --> 00:01:26,500
Si lo ponemos con porcentaje, será
relativo, y sin porcentaje será la
medida total en píxeles.

15
00:01:27,000 --> 00:01:30,000
Para el ejemplo crearemos un preset
pequeñito, de 200x100 píxeles.

16
00:01:30,500 --> 00:01:33,500
Le damos a Add Action para añadir la
acción al preset.

17
00:01:34,000 --> 00:01:39,000
Y en el preview podemos ver el resultado
con el druplicon

18
00:01:39,500 --> 00:01:45,500
Hacemos click en Update Preset
para guardar cambios y ya podemos
utilizarlo.

19
00:01:46,000 --> 00:01:55,000
Es posible añadirle varias acciones
a un mismo preset para obtener efectos
más complejos.

20
00:01:55,500 --> 00:02:02,500
Por ejemplo rotar la imágen, escala
de grises, y muchas otras opciones
con los módulos complementarios.

21
00:02:03,000 --> 00:02:07,000
Continuamos el ejemplo creando un
tipo de contenido que vamos a mostrar
en la vista con ImageCache.

22
00:02:07,500 --> 00:02:11,500
Vamos a Administer > Content Types

23
00:02:12,000 --> 00:02:15,000
Y seleccionamos "Add content type"  

24
00:02:15,500 --> 00:02:34,500
Le ponemos un nombre y un identificador
y lo guardamos.

25
00:02:35,000 --> 00:02:41,000
Hacemos click en "manage fields" para
añadir el campo de imágen al tipo
de contenido.

26
00:02:41,500 --> 00:02:53,500
Le ponemos nombre, y seleccionamos
el tipo de campo.

27
00:02:54,000 --> 00:03:03,000
Hemos instalado los módulos FileField
e ImageField, por lo que seleccionamos
File como tipo de campo.

28
00:03:03,500 --> 00:03:15,500
En el elemento de formulario, 
seleccionamos Image y le damos
a guardar.

29
00:03:16,000 --> 00:03:23,000
En la configuración del campo, para
este ejemplo solo modificaremos las
extensiones permitidas en el campo.

30
00:03:23,500 --> 00:03:30,500
Aceptaremos imágenes en jpg, gif y png.

31
00:03:31,000 --> 00:03:39,000
Finalmente guardamos.

32
00:03:39,500 --> 00:03:44,500
Ahora vamos a crear el contenido que
se va a mostrar en la vista.

33
00:03:45,000 --> 00:03:50,000
Accedemos a la opción de menú
"Create content" y seleccionamos
el tipo de contenido recién creado.

34
00:03:50,500 --> 00:04:14,500
Ponemos un título, una descripción
y añadimos una imágen.

35
00:04:15,000 --> 00:05:50,000
Creamos un poco más de contenido
para que haya nodos que mostrar.

36
00:05:50,500 --> 00:06:02,500
Vamos a crear la vista, accedemos a
Administer y luego a 
Site Building > Views.

37
00:06:03,000 --> 00:06:07,000
En el interfaz de Views 
seleccionamos Add

38
00:06:07,500 --> 00:06:20,500
Le ponemos nombre a la vista, y una
descripción y tags opcionales.

39
00:06:21,000 --> 00:06:30,000
El tipo de la vista será "Node"
ya que vamos a mostrar nodos del
tipo de contenido creado anteriormente.

40
00:06:30,500 --> 00:06:41,500
En el interfaz de Views, añadimos
un Display para mostrar los nodos en
una página.

41
00:06:42,000 --> 00:06:56,000
Y le asignamos un path

42
00:06:56,500 --> 00:07:02,500
Ahora añadimos los campos (Fields).

43
00:07:03,000 --> 00:07:07,000
Mostraremos el Title y el Body de los
nodos.

44
00:07:07,500 --> 00:07:20,500
Así que los seleccionamos en el grupo
"Node" y le damos a Add.

45
00:07:21,000 --> 00:07:27,000
Seleccionamos las opciones de
visualización del Body.

46
00:07:27,500 --> 00:07:41,500
Le quitamos la etiqueta y hacemos
que haya una longitud máxima al 
mostrarse.

47
00:07:42,000 --> 00:07:45,000
Y también asignamos opciones al
Title.

48
00:07:45,500 --> 00:07:54,500
Eliminamos la etiqueta y hacemos
que el título enlace al nodo.

49
00:07:57,000 --> 00:08:10,000
Reordenamos los campos para que
el título salga antes.

50
00:08:10,500 --> 00:08:17,500
Y añadimos el campo de imagen que
vamos a mostrar usando el preset
de ImageCache.

51
00:08:18,000 --> 00:08:23,000
En el grupo "Content" encontraremos
los campos expuestos por CCK.

52
00:08:23,500 --> 00:08:30,500
Seleccionamos el campo de imagen que
hemos creado antes y lo añadimos.

53
00:08:31,000 --> 00:08:33,000
Configuramos las opciones de 
visualización.

54
00:08:33,500 --> 00:08:36,500
Quitamos la etiqueta y configuramos el
Formato.

55
00:08:37,000 --> 00:08:41,000
Es aquí donde se muestran las diferentes
opciones de visualización del campo
de la imágen.

56
00:08:41,500 --> 00:08:47,500
Entre ellos, podremos seleccionar los
presets de ImageCache con diversas
opciones.

57
00:08:48,000 --> 00:08:52,000
Seleccionamos una de las opciones y
guardamos.

58
00:08:52,500 --> 00:08:59,500
Ahora en el preview de la vista ya
aparece la imágen con el preset de
200x100 que hemos creado antes.

59
00:09:00,000 --> 00:09:05,000
Solamente nos queda configurar un par
de filtros básicos para la vista y listo

60
00:09:05,500 --> 00:09:19,500
Añadimos el filtro "Published or admin"
para que no se muestren nodos no
publicados.

61
00:09:20,000 --> 00:09:43,000
También el filtro Node:type para
mostrar solamente los nodos del
tipo de contenido que queremos.

62
00:09:43,500 --> 00:09:52,500
Y finalmente guardamos la vista.

63
00:09:53,000 --> 00:09:59,000
Ahora, cuando accedamos al path
guardado en la vista, veremos el 
listado de nodos...

64
00:09:56,500 --> 00:10:05,500
Con las imágenes en el tamaño y el
formato configurado en el preset de 
Imagecache.

65
00:10:06,000 --> 00:10:08,000
¡Gracias por ver el Screencast!
cambrico.net