Se encuentra usted aquí

CCK, imagecache y Thickbox

Este es una explicación de como usar estos módulos para crear imágenes con diferentes tamaños y presentaciones.

 

CCK

para empezar se requiere tener instalado el modulo de CCK, FileField, imagefield  para poder crear un campo que permita subir una imagen directamente a un nodo. Una vez instalados estos módulos y activado el modulo de upload para permitir que los usuarios suba archivos, se tiene que ir a la sección de tipos de contenido y o bien crear un nuevo tipo de contenido, por ejemplo un tipo de contenido que se llame imagen para identificar muy bien su uso, o bien usar un tipo de contenido ya existente como story o page.

Configurar campos en CCK

Cuando se ha activado el modulo CCK aparece una nueva opción en los tipos de contenidos creados, es la opción de configurar los campos.

Quizás vale la pena explicar para que sirve CCK. Es un modulo que sirve para crear tipos de contenido a la medida, esto se logran añadiendo campos nuevos a los que tradicionalmente tiene un nodo como son el titulo y el cuerpo de texto, con CCK es posible añadir un campo para subir imágenes o audio, o agregar un campo para poner un texto por separada, por ejemplo un precio o una dirección o hasta crear campos que hace cálculos o despliegan listados a seleccionar.

En este caso usaremos el modulo imagefield para subir imágenes y asignarles diferentes tamaños y formas de desplegarse.

Manejar campos de CCK

Al entrar a la opción de Manejar campos se ven los campos que generalmente tiene un nodo y en la parte de abajo se ven dos opciones una para crear un nuevo campo y otra para agregar un campo ya existente.

campo imagen

Como se ve en la imagen de arriba, se nombra el campo y se selecciona el tipo de información que se guardara y de que manera se editara ese campo en este caso se selecciona imagen e imagen. los tipos de campos que se pueden seleccionar depende de los módulos que se tengan instalados en este caso por ser imagefield nos permite escoger imágenes. Al apretar el botón de guardar aparecerá una forma donde se configura el campo, se asignan cosas como que tipo de terminaciones pueden tener el archivo o que peso máximo se permite.

ImageCache

Este modulo sirve para manipular imágenes y crear configuraciones que puedan ser usadas por otros módulos en este caso por CCK, con imagecache es posible hacer cosas como reducir las imágenes que se suben a un tamaño determinado ya sea en pixeles o en porcentaje, también es posible recortar las imágenes a una proporción determinada, también se pueden hacer cosas como des saturar o rotar una imagen.

Es importante saber que para que funcione el modulo se requiere tener activada la opción de clear urls, así como el modulo imageapi

present
Al entrar por primera vez a la configuración de imagecache se tiene que crear un nuevo preset, se pueden crear la cantidad que uno necesite, puede tenerse un para crear miniaturas y otro para reducir el tamaño de las imágenes y otro para ajustarlas a un tamaño particular etc. En cada preset se asigna la action que se realizara y dependiendo la action aparece la configuración por ejemplo para definir el tamaño de la imagen, es posible tener varias action por cada preset, en la parte de abajo de cada preset se ve un logo de Drupal en el que se muestra el resultado, un logo a un tamaño especifico o bien recortado dependiendo del action que se use, si este logo no aparece indica que imagecache no esta funcionando.
 

Thickbox

Ejemplo de ventana de thickbox en Drupal

Este es un modulo que permite usar una libreria (¿efecto?) de jquery que abre las imágenes con una animación y en una ventana separada que se sobre impone al contenido, con lo que se puede tener una vista de la imagen original en un buen tamaño y cerrarla cuando se desea seguir navegando.

Este modulo solo requiere ser activado, si bien es posible en su configuración hacer algo muy interesante que es asignarle un preset de imagecache con lo cual se puede por ejemplo darle un limite al tamaño de la imagen.

De regreso a el tipo de contenido

Ya configurado un preset de imagecache y activado el modulo de thickbox, se regresa a la sección de tipo de contenido y se entra a el tipo de contenido donde tenemos el campo de imagen, se vuelve a entrar a la liga de manejo de campos y se toca en la tercera pestaña que dice despliegue de campos (display fields).

Vista de campos drupal

En esta pestaña se define de que manera se verán los campos cck que se han activado, se define desde si se mostrara o no la etiqueta que se le asigno al campo (digamos que el titulo de campo) de que manera se desplegara en el teaser y de que manera se desplegara en el nodo. Para nuestro ejemplo seleccionaremos thickbox con un preset de miniatura que se creo en imagecache. al definir de esta manera cuando se muestra la imagen es en una versión pequeña y cuando se le da click aparece la imagen en su tamaño original.

 

 

 

Versión: 
Categorias: 

Comentarios

Hola, nuevamente con una duda, hice lo que se menciona aqui y todo va perfecto, lo unico malo es que uno de los botones me sale en ingles, el boton: upload

el boton para examinar que seria el de seleccionar me sale en español, cabe mencionar que el drupal lo tengo ya traducido al español, mi pregunta es si existe el modo de traducir el boton upload al español.

Gracias.

Las traducciones al español no estan completas, voy a poner un post donde te indico como buscar y hacer la traducción, es bastante sencillo y todo es en la parte de traducir interfaz. saludos

Hola, nuevamente con una duda, el problema es que cuando inserto imagenes usando este metodo, me salen con esta formacion en vertical:

me gustaria que la formacion fuera en Horizontal:

o de preferencia de esta forma:

ya que estoy dejando subir solo 4 fotos por nodo, la presentacion es en minituaras que al darles click las abre el thickbox , cabe mencionar que lo estoy usando para el modulo ed_classified y el formato Horizontal de las fotos le quita mucha vista a los clasificados.

¿podrian decirme si hay modo de lograr esto?

perdon que sea tan grafico en la forma preguntar, solo queria darme a explicar en el ultimo formato de las fotos.

Gracias.

hola, el secreto esta en el css que se aplica a las imagenes, en este momento no recuerdo bien el codigo, pero creo que es algo de float:left para que ajuste las imágenes a la izquierda, más algun margen. buscare el codigo css para mostrarlo exactamente.

Hola Raul parece un poco general ponerle float left a todo, el codigo en cuestión es este:

 

.field-item img{
display: block;
float: left;
padding: .2em .10em .150em .5em;
border:#FFFF33 thin ;

}

si vez primero indica que esta afectando a la clase .field-item que es una clase que te da CCK para cada elemento y luego esta el tag img con lo que se indica que solo se aplique a las imágenes que tengan esa clase.

 

Se que es del 2009 este articulo - pero me ah serbivdo - Ahora lo que quiero hacer es aplicarle CSS a campos cck como el de la imagen arriba pero son de textos! como lo hago!?¿

Tengo un pas de dudas el CCK ayuda en el SEO o que modulos me recomiendas para hacer un Buen SEO con drupal, por que veo que muchos que tiene wordpres les va bien en eso de tener visitas pero en realidad drupal tiene esa capacidad de ser amigable con los buscadores y con el SEO por que he hecho varios experimentos pero veo que los blogs hechos en drupal no se como describirlo si es mas complicado posicionarlos no se. espero que e¡me den una ayudada en eso del SEO

Para las fonts pueden empezar a trabajar con la medida relativa rem. Si definen más variantes del cuerpo de la fuente, ojo con el orden en el css! (por ej, si usan px, y rem) no recuerdo bien si toma el último o el primero...

Gracias por tu explicación, estoy empezando con drupal y ando un poco perdido aún!! Gracias

Añadir nuevo comentario