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

00:00
 

En está oportunidad vamos a ver como podemos crear una galería de imágenes para nuestro sitio Drupal 7.

Esto lo podemos hacer también para Drupal 6, pero hoy solo nos centraremos 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)

De modo que quede así:

Directorio ColorBox

4) Activando los módulos

Sube tus nuevos módulos y activarlos como tu prefieras

Activando los módulos

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...

Configurar ColorBox

Clic en configurar, se habré una nueva ventana.

Ajustes de ColorBox

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í...

Ajustes del Campo

Clic en guardar.

En la ventana siguiente, yo modifico solo esto:

Opciones del campo galería

Activar el título

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 300x225

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

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

Ajustes del campo galería

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:

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>

El sitio completo con la base de datos lo tienen aquí


Tópico
 
Sistema Operativo
 
Plataforma
 

Comentarios

Gracias Charly, siempre aparecen tus videos cuando los estoy necesitando, aún no lo vi pero desde ya te agradezco.

Muy buen aporte he completisimo felicidades brothers esperamos otros articulos...

Imagen de charly

fe de erratas... el campo del pasó 10 es field--field_el_nombre_de_campo.tpl.php, ya lo he corregido. disculpen!!

gracias, me ha clarificado mucho la implementación, como aporte por si alguien tiene problemas de visualización, que revise los permisos de las carpetas pertinentes.

Hola Charly, gracias por tus tutoriales, están francamente bien. En esta ocasión me pregunto como puedo sustituir el módulo thickbox de drupal 6 para utilizar la misma funcionalidad para drupal 7. El potencial de colorbox es excelente para galerías, pero cuando queremos algún efecto al pulsar la imagen subida con IMCE a un artículo ¿cómo podemos conseguirlo?

Saludos.

Gracias por tu pagina y tu dedicación, soy nuevo en drupal mas no en el campo, me gustaría saber como implementar un template en HTML5 por favor..

Detalles que tuve que hacer para que me funcionara..

La librería de Colores viene sin los permisos necesarios. corregido con un chmod 755.

Este código después de ver el vídeo tres veces lo conseguí. (El Segundo Enlace no me funciona).

<?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>

por favor charly aclara la última parte no sse comprende, son dos archivos o uno solo, la verdad no funciono en el video escribes dos veces y algo anda mal, por fa charly (field--field_el_nombre_de_campo.tpl.php) por(field-field_el_nombre_de_campo.tpl.php)
cual es por fin!!!!!!

Imagen de charly

es solo uno y el archivo se llama: field--field_el_nombre_de_tu_campo.tpl.php, eje el campo se llama imagen_galeria entonces es:
field--field_galeria_imagen.tpl.php

Hola charly gracias por tus videos son muy buenos, esta última estuvo bien, pero tenia una consulta charly pasa que cuando cargo las imagenes no aparce el siguiente para volver a cargar aunque le puse ilimitado y para cargar otras imagenes mas, debo guardar y volver a cargar pero me sale este mensaje en la parte superior
Notice: Undefined index: display_field en file_field_widget_value() (línea 593 de /home/carabuc8/public_html/modules/file/file.field.inc).

y quisiera saber en que he fallado talvez tu puedas probarlo esta en siguiente direccion http://www.carabuco.org y estare muy agradecido, gracias charly!!!

Imagen de charly

intentaste en otro navegador? cual versión del módulo insert tienes instalado?

Hola Charly, estoy siguiendo detenidamente varios de tus tutoriales, y me están sirviendo de mucha ayuda, te lo agradezco en gran medida. Acabo de llevar a la práctica este tutorial, puesto que necesito una galería de imágenes, y todo ha ido bien, hasta que he copiado el archivo field--field_micampo_tpl.php. Desaparecen las imágenes y aparece el siguiente error: Notice: Undefined variable: field_empty en include() (línea 32 de /hosting/www/elarmariodelbebe.com/public/sites/all/themes/armariobonito/templates/field--field_imagenescaja.tpl.php).
Notice: Undefined index: view en include() (línea 67 de /hosting/www/elarmariodelbebe.com/public/sites/all/themes/armariobonito/templates/field--field_imagenescaja.tpl.php). He pensado borrar el archivo field--field.....y el resultado ha sido que han aparecido las imágenes en horizontal tal y como las quería, pero me aparecía el siguiente error: Warning: include(/hosting/www/elarmariodelbebe.com/public/sites/all/themes/armariobonito/templates/field--field_imagenescaja.tpl.php): failed to open stream: No such file or directory en theme_render_template() (línea 1258 de /hosting/www/elarmariodelbebe.com/public/includes/theme.inc).
Te comento que la galería la estoy creando dentro de un tipo de contenido, es decir, no es un contenido en si misma, sino un campo de un tipo de contenido........no sé si se deberá a eso. Podrías ayudarme? Te agradezco de antemano. Un saludo.

hola, he intentado crear este ejemplo de galeria (muy bien explicado) pero tengo un problema. He usado los mismos nombre y eiquetas que Ud. he creado el archivo "field_galeria_imagen.tpl.php" pero al ver la galeria solo sale esto: "row-1 row-first "> row-2 row-last "> col-1 "> " ¿Alguna idea?

este es el codigo que esta dentr del archivo .tpl.php:

<?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 = 3;
$rows = array_chunk($items, $columns);
?>
<?php
if (!$field_empty) :
?>
<?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';
}

?>
<?php
print $row_class;
?>

">
<?php
foreach ($columns as $column_number => $item):
?>
<?php
endforeach;
?>
<?php
endforeach;
?>
<?php
print 'col-'. ($column_number + 1);
?>

">
<?php
print $item['view'];
?>
<?php
print $item['data']['title'];
?>
<?php
endif;
?>

y este error al entrar eb modulos:

Notice: Undefined variable: field_empty en include() (línea 32 de E:\lacomandancia\www\sites\all\themes\touch\templates\field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 67 de E:\lacomandancia\www\sites\all\themes\touch\templates\field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 70 de E:\lacomandancia\www\sites\all\themes\touch\templates\field--field_galeria_imagen.tpl.php).

Rogaria tu ayuda.

gracias

Imagen de charly

Hola Gabriel, probaste con llamar a tu archivo field--tu_nombre.tpl.php? porque aquí comentas que lo llamas field_galeria_imagen.tpl.php. después de field van dos guiones no un guión bajo.

Hola Charly, muchas gracias por el tutorial me sirvio mucho, pero solo tengo un pequeñito problema con la parte final, copie el código para tener la galeria en 2 columnas o más, pero como uso el tema bartik, copie el archivo en /themes/bartik/templates pero no me reconoce, la galería sigue igual. instale otro tema y volvi a copiar el archivo en la carpeta templates del tema instalado, y no hubo ningun cambio. que hice mal? revise el nombre del campo (correcto) la extension al final (tpl.php).

Gracias por tu tiempo.

Hola de nuevo disculpa no revise todos los comentarios, puse asi en el archivo field--field_nombredemiarchivo_tpl.php al borrar cache y recargar se formo una tabla pero sin las imagenes y cuando entro a editar la galeria creada me sale este error:

Notice: Undefined variable: field_empty en include() (línea 30 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 46 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 47 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).

Que error cometi??

Hola de nuevo otra vez incomodandote, revice bien el video y ahora si lo segui al pie de la letra en esta parte. el nombre del campo que puse fue: field_galeria_imagen, entonces al nombre del archivo le puse asi: field--field_galeria_imagen.tpl.php, estoy usando el tema que viene por defecto en drupal: bartik y al visualizar la galeria me sale esto:

row-1 row-first"> row-2 row-last"> col-3">

y cuando voy a editar sale este error:

Notice: Undefined variable: field_empty en include() (línea 32 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: view en include() (línea 67 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).
Notice: Undefined index: data en include() (línea 70 de /opt/lampp/htdocs/drupal/themes/bartik/templates/field--field_galeria_imagen.tpl.php).

Que hice mal??

Imagen de charly

Cambie la forma de poner el código y aparte coloque uno nuevo, prueben haber si con alguno de los dos les funciona.

Muchisimas gracias charly solucionado con el nuevo codigo.. ERES BUENO TIO¡¡¡¡¡¡

Imagen de charly

no tienes porque, y gracias por avisar de que te funciono.
salu2

Hola charly gracias por tu colaboracion es muy buena el video, pregunta!! los links de donde se descargan los modulos estan inabilitados, por favor si no es de estas páginas de donde mas podemos descargar !!! estare muy agradecido con la respuesta

Imagen de charly

de drupal.org/project o si lo prefieres de drupal.org/project/el_nombre_de_modulo
salu2

Holas charly gracias por los videos subidos, mira tengo un problema he seguido todos los pasos de crear la galeria execto lo de los nombres de que tu le pusistes galeria_miniatura y yo le puse galeria_mini, ahora viene mi problema no se si eso lo que no permite que funcione el codigo de alineamiento php que nos permite poner la columnas, estoy usando el tema marinelli, y pues la ruta fue la misma que me muestras en el video, pero nada que me llega a poner las benditas columnas, nose cual es mi falla, chequeando el codigo hay una linea que dice (<table class="mini-gallery"> ) puede ser ese mi error lo cambie con el nombre que le puse (galeria_mini), pero tampoco funciono, espero tu ayuda gracias Saludos.

Doctor ya la arregle era esa palabrita bendita de galeria_mini, pues que el codigo lo traduce XD pero gracias y pa delante, pero ya se para la proxima nos vemos

Primero gracias por tus tutoriales. En mi caso he seguido el tutorial y todo correcto, ahora me surge una duda, ¿como puedo paginar la galería en el caso de tener muchas fotos?
Gracias por tus aportes.

Imagen de charly

Hola Alberto, es una buena pregunta, por ahora no he podido resolverlo, si alguno sabe y lo quiere compartir buenisimo, yo por mi parte cuando lo tengo seguro lo comparto.

hola joven charlie buenos dias esta muy bien detallada el video queria hacerte la consulta la galeria ya lo tengo sin embargo tengo como un error el archivo: field--field-galeria-imagen.tpl.php me da error deesa forma pero cuando lo pongo asi:field-field-galeria-imagen.tpl.php con un solo guion entre los dos field sime funciona ademas de que no estoy utilizando los subguiones en el nombre del archivo asi:field--field_galeria_imagen.tpl.php, bueno esa es la consulta antes de olvidarme estoy poniendo varias galerias en ese caso como hago para que todas esten funcionando.espero que no sean muchas preguntas gracias por tu tiempo

Buenas tardes a todos. A mi me sale todo siguiendo el tutorial, excepto la ultima parte de hacer las columnas. Supuestamente me da fallo en la linea 30 del archivo creado, y me oculta todas las imagenes de la galeria. A consecuencia de ese fallo en la linea 30, tambien me fallan las 46 y 47. Alguien sabe decirme como solucionarlo que yo no doy con la tecla? Uso drupal 7.9.
Gracias y un saludo

buenas noches joven Charlie disculpe las molestias una ultima duda por favor como hago para que las imagenes tenga espacios entre elllas como en el video ya que en el mio estan pegadas horizontal y vertical.muchas gracias

Imagen de charly

Hola David, lo explico en el vídeo, tienes que calcular el ancho de tu tema por el número de columnas que quieres hacer.
De lo contrario tienes que hacerlo con css y eso escapa a mis conocimientos.
Salu2

Buenas,
Le agradezco de antemano el excelente video que ha realizado. Sólo un problemilla: resulta que si hago clic en cualquier imagen me la amplia al tamaño indicado pero no me aparecen las flechas para pasar de una imagen a otra.
Gracias

Imagen de charly

Hola Marcos, mira como tienes los ajustes en Colorbox? tienes que seleccionar la opción de Galería para que se muestren, también puedes mirar en gestionar la presentación, las opciones que tienes para este campo. Un salu2.

Hola Charly, los ajustes los tengo igual a los que se detallan en tu vídeo. No entiendo lo de la opción Galería, ¿dónde está?. Me estoy volviendo loco, supongo que será una tontería pero no doy con ella. Gracias

Imagen de charly

Marcos, en tu tipo de contenido en Gestionar la presentación, tienes que tener en los ajustes de caja de color, con galería. También tienes que fijarte que en los ajustes de colorbox, no tengas seleccionada la opción por defecto sin galería por las dudas.
Salu2

Hola charly! de antemano darte las gracias por tus tutoriales, son geniales y me estan ayudando mucho. Solo una pequeña dura, he conseguido crear mi galeria, todo perfecto. Pero a la hora de cargarla en la pagina web, me sale la tabla con todas las fotografias ,pero solo se ven 3, actualizo la pagina, y se muestran otras 3, y asi sucesivamente.Si pincho en alguna de ellas, y las voy pasando con el colorbox, se ven todoas perfectamente. He intentado bajar el tamaño de la imagen_miniatura por si era un problema de carga en la visualizacion, pero nada, solo se me ven 3 cada vez.
Muchas gracias, y un saludo!

Imagen de charly

Hola alex, y cuantas tienes en views para que muestre?

pues no tengo creada ninguna vista para las imagenes, y el codigo fuente lo he copiado tal y como lo tienes , pero con dos columnas

Imagen de charly

Tienes razón, este no es el de views... tengo muy mala memoria sorry...
Eso es porque solo se muestra la 1ra. fila, de todas formas lo acabó de resolver.
Ahora mismo estoy haciendo el vídeo para terminar de una vez por todas con los problemas de esta galería.

ok, muchisimas gracias por tu paciencia, eres un crack !

Imagen de charly

soy nuevo utilizando drupal y tu video me parecio excelente muy facil de seguir solo tengo un problema que mi tema no contiene la carpeta templates he creado el archivo field.... en la carpeta del tema y voy a ver que resultado me da

Hola Charly

más facil es poner los estilos por css (pasando de lado el php). En node.css solo le pones

.field_galeria_imagen img{float:left;}

Se añade más detalles en css si uno quiere ysolo sobreescribes el anterior css

slds,

Imagen de charly

A no compañera... si tiras una bomba así tienes que ser más especifica, mandame un correo con los detalles del mismo y lo compartimos con todos. Un salu2

hola charly...un saludo desde colombia.
Eres genial Men, Gracias por tus buenos tutoriales. definitivamente eres algo insuperables en lo que respecta a los tutoriales en drupal, para la comunidad hispana.
Exitos..

Imagen de charly

Muchas gracias por tu comentario. Un salu2.

Hola charly un saludo desde Mexico estas haciendo un trabajo sensacional, y seria interesante que hicieras algun video relacionado con open atruim, open public gracias

Imagen de charly

Hola calixtro, gracias por tu comentario, me encantaría hacer un par de cursos así, pero no se si habrá interes...

charly solo decir que eres lo mejor que me e encontrado por la web sigue asi y nunca nos falles un saludo.y sigue asi haciendo vídeos tan buenos y bien explicados los de drupal deverian contratarte tío lol.

Imagen de charly

muchas gracias por tu comentario, me alegró que te sirvan mis vídeos.
ahora se viene el de exportar este contenido para llevarlo a un nuevo sitio. salu2.

Que tal
Una pregunta, como se puede agregarle un marco al as fotos tipo el que creaste con css injector, porque este me andubo perfecto y el de css no, jaja me quedo con este, pero me falta agregarle un marco transparente a las fotos.
Gracias
Recién me di cuenta que eras un compatriota.
Saludos

Hola Charly, excelentes tus videos y muy bien explicados.. Te quiero preguntar si se puede poner comentarios a las imagenes en grande tipo facebook..Desde ya muchas gracias y espero tu respuesta! Saludos!

Páginas

Premium

Landing Page con Bootstrap

Landing Page con Bootstrap y Gulp

En Youtube

Suscríbete a mi canal

Suscríbete a las noticias

* requerido

Inicio de sesión

Recursos