Como crear una galería de imágenes en Drupal 7

1) Descargar los módulos:

2) Descargar el plugin jQuery Colorbox

3) Instalar el Plugin jQuery:

Crea en sites/all un nuevo directorio llamado: libraries

Dentro descomprime el contenido de colorbox (el plugin)

 

4) Activando los módulos

Sube tus nuevos módulos y activarlos como tu prefieras

 

5) Configuración de Colorbox

Ahora si te fijas, en Drupal 7 podemos acceder a la configuración de muchos módulos desde esta misma página, solo haciendo clic a la derecha del nombre del módulo…

 

Clic en configurar, se habré una nueva ventana.

 

Aquí podemos luego modificar la apariencia del plugin, yo dejo todo por defecto.

6) Creando la Galería

Vamos a Estructura, tipo de contenido, añadir tipo de contenido (admin/structure/types/add)

Asigna un nombre, y personalizar las demás opciones como gustes, clic en guardar y editar los campos

Yo he optado por eliminar el body, de esta manera no aparece nunca el cuerpo del nodo, tu a tu aire.

Solo vamos a crear un campo, que voy a llamar  Galeria Imageny queda así…

Clic en guardar

En la ventana siguiente, yo modifico solo esto:

Clic en guardar.

7) Ajustes de las imágenes

Configuración, Medios Audiovisuales, Estilo de Imágenes

Creamos uno nuevo, el primero será para la miniatura del nodo

De nombre: galeria_minuatura y de tipo escalar y recortar, le asigno un valor de 300×225

Por último el valor cuando se hace clic: de nombre galeria_grande, de tipo escalar y recortar y con el valor 800×600

Por supuesto esto son mis valores, tu pone los que consideres.

8) Asignar esto valores

Regresamos a nuestro tipo de contenido nuevo y hacemos clic en gestionar presentación

En nuestro nuevo campo agregado en formato, cambio a colorbox y hago clic en la ruedita de la derecha.

Dejo los siguientes valores

Clic en Actualizar y luego guardamos los cambios

9) Nuestra primera galería

Ahora ya podemos crear nuestras galerías, solo has clic en Agregar contenido, y selecciona tu galería.

Al crear este nodo, nos damos cuenta de que ya todo funciona, el problema es que quedan todas en una sola columna

10) Modificando el aspecto de la galería

Tenemos que crear un nuevo archivo en nuestro directorio del tema que usamos, pero dentro de la carpeta templates

A este le tenemos que llamar field–field_el_nombre_de_tu_campo.tpl.php

En mi ejemplo el mismo es: field–field_galeria_imagen.tpl.php

El código para ello lo he sacado de:

http://drupal.org/node/1224106#comments-4969404

Y el código es:

http://paste.ideaslabs.com/show/c2DyAsQmJv

El código completo

<?php
// $Id:$

/**
* @file content-field-field_mini-gallery.tpl.php
* Theme implementation to display multiple values in the mini-gallery field.
*
* Available variables:
* – $node: The node object.
* – $field: The field array.
* – $items: An array of values for each item in the field array.
* – $teaser: Whether this is displayed as a teaser.
* – $page: Whether this is displayed as a page.
* – $field_name: The field name.
* – $field_type: The field type.
* – $field_name_css: The css-compatible field name.
* – $field_type_css: The css-compatible field type.
* – $label: The item label.
* – $label_display: Position of label display, inline, above, or hidden.
* – $field_empty: Whether the field has any valid value.
*
* Each $item in $items contains:
* – ‘view’ – the themed view for that item
*
* @see template_preprocess_content_field()
*/
$columns = 4;
$rows = array_chunk($items, $columns);
?>
<?php if (!$field_empty) : ?>
<table class=”mini-gallery”>
<tbody>
<?php foreach ($rows as $row_number => $columns): ?>
<?php
$row_class = ‘row-‘ . ($row_number + 1);
if ($row_number == 0) {
$row_class .= ‘ row-first’;
}
if (count($rows) == ($row_number + 1)) {
$row_class .= ‘ row-last’;
}
?>
<tr class=”<?php print $row_class; ?>”>
<?php foreach ($columns as $column_number => $item): ?>
<td class=”<?php print ‘col-‘. ($column_number + 1); ?>”>
<div class=”photo-image”><?php print $item[‘view’]; ?></div>
<div class=”photo-title”><?php print $item[‘data’][‘title’]; ?><div>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>

Otro código para los que tienen problemas:

<?php
$columns = 2;
$rows = array_chunk($items, $columns);
?>

<table class=”mini-gallery”>
<tbody>
<?php foreach ($rows as $row_number => $columns): ?>
<?php
$row_class = ‘row-‘ . ($row_number + 1);
if ($row_number == 0) {
$row_class .= ‘ row-first’;
}
if (count($rows) == ($row_number + 1)) {
$row_class .= ‘ row-last’;
}
?>
<tr class=”<?php print $row_class; ?>”>
<?php foreach ($columns as $column_number => $item): ?>
<td class=”<?php print ‘col-‘. ($column_number + 1); ?>”>
<div class=”photo-image”><?php print render($item); ?></div>
<div class=”photo-title”><?php print($item[‘#item’][‘title’]); ?>

<div>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>

1) Descargar los módulos:

2) Descargar el plugin jQuery Colorbox

3) Instalar el Plugin jQuery:

Crea en sites/all un nuevo directorio llamado: libraries

Dentro descomprime el contenido de colorbox (el plugin)

 

4) Activando los módulos

Sube tus nuevos módulos y activarlos como tu prefieras

 

5) Configuración de Colorbox

Ahora si te fijas, en Drupal 7 podemos acceder a la configuración de muchos módulos desde esta misma página, solo haciendo clic a la derecha del nombre del módulo…

 

Clic en configurar, se habré una nueva ventana.

 

Aquí podemos luego modificar la apariencia del plugin, yo dejo todo por defecto.

6) Creando la Galería

Vamos a Estructura, tipo de contenido, añadir tipo de contenido (admin/structure/types/add)

Asigna un nombre, y personalizar las demás opciones como gustes, clic en guardar y editar los campos

Yo he optado por eliminar el body, de esta manera no aparece nunca el cuerpo del nodo, tu a tu aire.

Solo vamos a crear un campo, que voy a llamar  Galeria Imageny queda así…

Clic en guardar

En la ventana siguiente, yo modifico solo esto:

Clic en guardar.

7) Ajustes de las imágenes

Configuración, Medios Audiovisuales, Estilo de Imágenes

Creamos uno nuevo, el primero será para la miniatura del nodo

De nombre: galeria_minuatura y de tipo escalar y recortar, le asigno un valor de 300×225

Por último el valor cuando se hace clic: de nombre galeria_grande, de tipo escalar y recortar y con el valor 800×600

Por supuesto esto son mis valores, tu pone los que consideres.

8) Asignar esto valores

Regresamos a nuestro tipo de contenido nuevo y hacemos clic en gestionar presentación

En nuestro nuevo campo agregado en formato, cambio a colorbox y hago clic en la ruedita de la derecha.

Dejo los siguientes valores

Clic en Actualizar y luego guardamos los cambios

9) Nuestra primera galería

Ahora ya podemos crear nuestras galerías, solo has clic en Agregar contenido, y selecciona tu galería.

Al crear este nodo, nos damos cuenta de que ya todo funciona, el problema es que quedan todas en una sola columna

10) Modificando el aspecto de la galería

Tenemos que crear un nuevo archivo en nuestro directorio del tema que usamos, pero dentro de la carpeta templates

A este le tenemos que llamar field–field_el_nombre_de_tu_campo.tpl.php

En mi ejemplo el mismo es: field–field_galeria_imagen.tpl.php

El código para ello lo he sacado de:

http://drupal.org/node/1224106#comments-4969404

Y el código es:

http://paste.ideaslabs.com/show/c2DyAsQmJv

El código completo

<?php
// $Id:$

/**
* @file content-field-field_mini-gallery.tpl.php
* Theme implementation to display multiple values in the mini-gallery field.
*
* Available variables:
* – $node: The node object.
* – $field: The field array.
* – $items: An array of values for each item in the field array.
* – $teaser: Whether this is displayed as a teaser.
* – $page: Whether this is displayed as a page.
* – $field_name: The field name.
* – $field_type: The field type.
* – $field_name_css: The css-compatible field name.
* – $field_type_css: The css-compatible field type.
* – $label: The item label.
* – $label_display: Position of label display, inline, above, or hidden.
* – $field_empty: Whether the field has any valid value.
*
* Each $item in $items contains:
* – ‘view’ – the themed view for that item
*
* @see template_preprocess_content_field()
*/
$columns = 4;
$rows = array_chunk($items, $columns);
?>
<?php if (!$field_empty) : ?>
<table class=”mini-gallery”>
<tbody>
<?php foreach ($rows as $row_number => $columns): ?>
<?php
$row_class = ‘row-‘ . ($row_number + 1);
if ($row_number == 0) {
$row_class .= ‘ row-first’;
}
if (count($rows) == ($row_number + 1)) {
$row_class .= ‘ row-last’;
}
?>
<tr class=”<?php print $row_class; ?>”>
<?php foreach ($columns as $column_number => $item): ?>
<td class=”<?php print ‘col-‘. ($column_number + 1); ?>”>
<div class=”photo-image”><?php print $item[‘view’]; ?></div>
<div class=”photo-title”><?php print $item[‘data’][‘title’]; ?><div>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>

Otro código para los que tienen problemas:

<?php
$columns = 2;
$rows = array_chunk($items, $columns);
?>

<table class=”mini-gallery”>
<tbody>
<?php foreach ($rows as $row_number => $columns): ?>
<?php
$row_class = ‘row-‘ . ($row_number + 1);
if ($row_number == 0) {
$row_class .= ‘ row-first’;
}
if (count($rows) == ($row_number + 1)) {
$row_class .= ‘ row-last’;
}
?>
<tr class=”<?php print $row_class; ?>”>
<?php foreach ($columns as $column_number => $item): ?>
<td class=”<?php print ‘col-‘. ($column_number + 1); ?>”>
<div class=”photo-image”><?php print render($item); ?></div>
<div class=”photo-title”><?php print($item[‘#item’][‘title’]); ?>

<div>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s