Crear una galería de imágenes con paginador y múltiples subidas en Drupal

00:00
 

Vamos a crear una galería de imágenes la cual va a contar con un paginador y la posibilidad de subir varias imágenes arrastrando y soltando las mismas.

Para ello necesitas lo siguiente:

Módulos necesarios para crear la galería

 
Aparte necesitas habilitar el módulo PHP Filter, pero este ya viene en el núcleo de Drupal.

Extras para la galería de imágenes

 

Pasos necesarios para crear la galería

  1. Activar los módulos correspondientes
  2. Crear el tamaño de las imágenes.
  3. Crear el nuevo tipo de contenido
  4. Crear la vista correspondiente
  5. Añadir el bloque con el código para el paginador.

 

Código de la vista exportada
$view = new view();
$view->name = 'galerias';
$view->description = 'Es la vista para las galerías';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Galerias';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Galerias';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['use_more_text'] = 'más';
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['exposed_form']['options']['submit_button'] = 'Aplicar';
$handler->display->display_options['exposed_form']['options']['reset_button_label'] = 'Reiniciar';
$handler->display->display_options['exposed_form']['options']['exposed_sorts_label'] = 'Ordenar por';
$handler->display->display_options['exposed_form']['options']['sort_asc_label'] = 'Ascendente';
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '10';
$handler->display->display_options['pager']['options']['expose']['items_per_page_label'] = 'Elementos por página';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all_label'] = '- Todos -';
$handler->display->display_options['pager']['options']['expose']['offset_label'] = 'Desplazamiento';
$handler->display->display_options['pager']['options']['tags']['first'] = '« primera';
$handler->display->display_options['pager']['options']['tags']['previous'] = '‹ anterior';
$handler->display->display_options['pager']['options']['tags']['next'] = 'siguiente ›';
$handler->display->display_options['pager']['options']['tags']['last'] = 'última »';
$handler->display->display_options['style_plugin'] = 'grid';
$handler->display->display_options['row_plugin'] = 'fields';
/* Campo: Contenido: Título */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = FALSE;
$handler->display->display_options['fields']['title']['element_type'] = 'h2';
$handler->display->display_options['fields']['title']['element_label_colon'] = FALSE;
/* Campo: Muestra la imagen vinculada a la galería */
$handler->display->display_options['fields']['field_imagen']['id'] = 'field_imagen';
$handler->display->display_options['fields']['field_imagen']['table'] = 'field_data_field_imagen';
$handler->display->display_options['fields']['field_imagen']['field'] = 'field_imagen';
$handler->display->display_options['fields']['field_imagen']['ui_name'] = 'Muestra la imagen vinculada a la galería';
$handler->display->display_options['fields']['field_imagen']['label'] = '';
$handler->display->display_options['fields']['field_imagen']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_imagen']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_imagen']['settings'] = array(
  'image_style' => 'galeria_miniatura',
  'image_link' => 'content',
);
$handler->display->display_options['fields']['field_imagen']['delta_limit'] = '1';
$handler->display->display_options['fields']['field_imagen']['delta_offset'] = '0';
/* Criterio de ordenación: Contenido: Fecha del envío */
$handler->display->display_options['sorts']['created']['id'] = 'created';
$handler->display->display_options['sorts']['created']['table'] = 'node';
$handler->display->display_options['sorts']['created']['field'] = 'created';
$handler->display->display_options['sorts']['created']['order'] = 'DESC';
/* Criterios de filtrado: Contenido: Publicado */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Criterios de filtrado: Contenido: Tipo */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'galeria' => 'galeria',
);

/* Display: Vista general de las galerías */
$handler = $view->new_display('page', 'Vista general de las galerías', 'page');
$handler->display->display_options['display_description'] = 'muestra cada una de las galerías del sitio';
$handler->display->display_options['defaults']['hide_admin_links'] = FALSE;
$handler->display->display_options['path'] = 'galerias';
$handler->display->display_options['menu']['type'] = 'normal';
$handler->display->display_options['menu']['title'] = 'Galerias';
$handler->display->display_options['menu']['name'] = 'main-menu';

/* Display: Vista galería individual */
$handler = $view->new_display('page', 'Vista galería individual', 'page_1');
$handler->display->display_options['display_description'] = 'Es la vista de una galería';
$handler->display->display_options['defaults']['hide_admin_links'] = FALSE;
$handler->display->display_options['defaults']['pager'] = FALSE;
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['pager']['options']['items_per_page'] = '9';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['pager']['options']['id'] = '0';
$handler->display->display_options['pager']['options']['quantity'] = '9';
$handler->display->display_options['pager']['options']['expose']['items_per_page_label'] = 'Elementos por página';
$handler->display->display_options['pager']['options']['expose']['items_per_page_options_all_label'] = '- Todos -';
$handler->display->display_options['pager']['options']['expose']['offset_label'] = 'Desplazamiento';
$handler->display->display_options['pager']['options']['tags']['first'] = '« primera';
$handler->display->display_options['pager']['options']['tags']['previous'] = '‹ anterior';
$handler->display->display_options['pager']['options']['tags']['next'] = 'siguiente ›';
$handler->display->display_options['pager']['options']['tags']['last'] = 'última »';
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'grid';
$handler->display->display_options['style_options']['columns'] = '3';
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['defaults']['fields'] = FALSE;
/* Campo: Contenido: Título */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['exclude'] = TRUE;
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = FALSE;
$handler->display->display_options['fields']['title']['element_type'] = 'h2';
$handler->display->display_options['fields']['title']['element_label_colon'] = FALSE;
/* Campo: Muestra la imagen vinculada a la galería */
$handler->display->display_options['fields']['field_imagen']['id'] = 'field_imagen';
$handler->display->display_options['fields']['field_imagen']['table'] = 'field_data_field_imagen';
$handler->display->display_options['fields']['field_imagen']['field'] = 'field_imagen';
$handler->display->display_options['fields']['field_imagen']['ui_name'] = 'Muestra la imagen vinculada a la galería';
$handler->display->display_options['fields']['field_imagen']['label'] = '';
$handler->display->display_options['fields']['field_imagen']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_imagen']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_imagen']['type'] = 'lightbox2__lightbox__galeria_miniatura__galeria_grande';
$handler->display->display_options['fields']['field_imagen']['settings'] = array(
  'image_style' => 'galeria_miniatura',
  'image_link' => 'content',
);
$handler->display->display_options['fields']['field_imagen']['group_rows'] = FALSE;
$handler->display->display_options['fields']['field_imagen']['delta_limit'] = '1';
$handler->display->display_options['fields']['field_imagen']['delta_offset'] = '0';
$handler->display->display_options['defaults']['arguments'] = FALSE;
/* Filtro contextual: Contenido: Nid */
$handler->display->display_options['arguments']['nid']['id'] = 'nid';
$handler->display->display_options['arguments']['nid']['table'] = 'node';
$handler->display->display_options['arguments']['nid']['field'] = 'nid';
$handler->display->display_options['arguments']['nid']['default_action'] = 'not found';
$handler->display->display_options['arguments']['nid']['exception']['title'] = 'Todo(s)';
$handler->display->display_options['arguments']['nid']['default_argument_type'] = 'fixed';
$handler->display->display_options['arguments']['nid']['summary']['number_of_records'] = '0';
$handler->display->display_options['arguments']['nid']['summary']['format'] = 'default_summary';
$handler->display->display_options['arguments']['nid']['summary_options']['items_per_page'] = '25';
$handler->display->display_options['path'] = 'galleryshow';
$translatables['galerias'] = array(
  t('Master'),
  t('Galerias'),
  t('más'),
  t('Aplicar'),
  t('Reiniciar'),
  t('Ordenar por'),
  t('Ascendente'),
  t('Desc'),
  t('Elementos por página'),
  t('- Todos -'),
  t('Desplazamiento'),
  t('« primera'),
  t('‹ anterior'),
  t('siguiente ›'),
  t('última »'),
  t('Vista general de las galerías'),
  t('muestra cada una de las galerías del sitio'),
  t('Vista galería individual'),
  t('Es la vista de una galería'),
  t('Todo(s)'),
);

 

Código del bloque para el páginador
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
$(".view-galerias a").click(function(e){
e.preventDefault();
var enlace = $(this).attr('href');
var nuevo_enlace = enlace.replace("node", "galleryshow");
window.location.href = nuevo_enlace;
});
});
</script>

 

Lo importante del bloque es poner el nombre correcto de la vista, esto lo explico en el vídeo.
Lo otro es donde pone var nuevo_enlace, luego de "node" si cambias el nombre de la vista o la tuya se llama distinta tienes que remplazar "node", "galleryshow" por el nombre de tu vista.
Espero que lo disfruten, que lo puedan poner en práctica.

Gracias Jhonatan por el aporte colega, eres un grande!!


Tópico
 
Sistema Operativo
 
Plataforma
 

Comentarios

Imagen de Jhonatanfdez

Amigo mio, muy bien explicado. Estamos a tus ordenes

Imagen de charly

Gracias por todo amigo.

hola charly he probado lo que te he dicho anteriormente en otro mensaje y si destildas Opciones de ruta URL....-"Generar alias de URL automáticos" cuando tienes pathauto si que va como lo explicas. todo esto hecho en local. Salu2.

Imagen de charly

Hola manutico, voy a probar lo que dices y comento. Salu2.

muy buenos tus aportes, hace poco descubrí tu página, y me encanta..

muchos saludos desde Chile.. y sigue adelante mira que aprendo mucho de drupal..

Imagen de charly

Gracias por tu comentario, salu2.

HOla charlie muy bueno el tutorial, yo lo realice y coloque el script de php, pero al hacer click para entrar a ver las galerias no aparentemente, no funciona el script se ven todas las imagenes en tamaño grande y hacia abajo, ya me percate que el nombre de la vista fuera igual al del script e incluso los cambie varias veces para si funcionaba pero no,esta es la pag http://colombiagol.com.co/culturalia/galerias
gracias

Imagen de charly

Hola herluk, yo las veo bien.

sip, pero lo hice con el modo de presentación del nodo, igual lo que mas me importaba que era usar el modulo plup, el cual esta perfecto aunque tuve que actualizar el modulo con otro que encontre en internet, gracias!

Hola Charly,

Muy buena tu página , enhorabuena. Estaba probando las galerias y no sé que me sucede con el script de jquery pero no me funciona. Hasta incluso he importado tu vista y he nombrado las vistas y tipo de contenido de igual forma para no tener ese handycap. Pues nada no me funciona a lo mejor es por la versión del jquery, he mirado en informe de estado y tengo esta "jQuery Update jQuery 1.5.2 and jQuery UI 1.8.11"

En fin no sé a ver si me puedes aportar tu alguna luz. Te pasaria la url , pero lo tengo en local.

Gracias,

Hola charly, en hora buena. Estaba probando las galerías y no se por que no me activa el modulo chaos tool suite me podrías apoyar de antemano agradezco tu ayuda..

Shows how an external module can provide ctools plugins (for Panels, etc.).
Necesita: Chaos tools (desactivado), Panels (ausente), Page manager (desactivado), Advanced_help (ausente)

Hola Charly excelente este aporte me ha sido de gran ayuda, pero tengo una duda, necesito crear 8 galerías con el efecto lightbox, el problema es que drupal no acepta que se repitan los nombres de las vistas, las he cambiado de nombres pero tampoco me acepta los bloques jquery update, que por cada bloque les nombro de forma diferente para que Drupal acepte el nombre, necesito ayuda.

charly esta muy bueno el tutorial pero me queda una pregunta, es posible activar las descargas de las fotos ya que dice que solo funciona con "image" o "imagefield".
gracias

Imagen de charly

Púes no lo sé, pero Lightbox2 tiene una opción que dice descargar el original o algo así.

hola Charly, funciona de forma perfecta, solo tengo una curiosidad existe alguna forma de hacer funcionar esta galería con el url alias de los nodos que se quieren mostrar ?
Gracias por el trabajo.

Buenas,

Antes que nada me gustaría agradecer que subieras el video el cual me ha ayudado mucho a entender esto solo que, gracias a la conjunción de otros videos he sacado algunas conclusiones. Por ello, y sin menospreciar el aporte del usuario que te paso el codigo del bloque JQuery, voy a dejaros una forma más limpia de hacerlo sólo con views.

1) Instalais todo lo que se os dice en el video pero NO habilitais el modulo de bloque PHP porque no vamos a usar bloques.
2) Creais la primera view tal y como indica el video, le añadis el campo del id del Nodo. Cogeis el campo del titulo y de la imagen y reescribiendo su salida le decís que enlace al [nid] que habéis añadido en este mismo paso. Por ejemplo si la vista va a funcionar sobre la url "galeria" pues en este ejemplo la reescritura apuntaria a "galeria/[nid]" (usando el token)
3) Ahora en vez de crear otro display creais otra view y la configurais al gusto. Lo importante aquí es:
* A esta view le vais a poner de url "galería/%".
* En el filtro contextual, al igual que sale en el video le poneis el id del nodo.
* Configurais el lightbox como se muestra en el video

4) Por lo demás, el resto de ajustes al gusto o siguiendo los mismos del video.

Y ya esta! Con esto la view con url "galeria" mostrará unos campos que linkarán por ejemplo a galeria/12 que a la vez hará cargar la segunda view mostrando todos los items que contenía dicho "album" y que por supuesto desplegarán su lightbox (recordad que la segunda view está esperando un argumento, el que pusimos con % en su url) El filtro contextual hará el resto recibiendo el parámetro en la segunda view. La única diferencia es que no hemos tenido que echar mano de ningún módulo ni bloque adicional, sino que lo hemos construido integramente en views todo.

Y nada, por lo demás buen video, buena página y gracias por tu aportación desinteresada al mundo de drupal.

Hola charly gracias por tan buena explicación, la verad sin tu ayuda hay cosas que realmente perecen imposibles de hacer, tu lo haces ver tan facil, agradesco todos tus aportes... Tenga una pequeña duda sobre el video, ya funciono perfecto, pero me gustaria tener el titulo de cada una de las galerias(Peces, Corales,Lobos) al ingresar a ellas segun coresponda y no solo el texto de Galerias.. Como podria hacer esto?.. Agradeceria si me puedes apoyar.. Dios te bendiga gracias.

Imagen de charly

Hola qwertcarlos.
No entiendo bien tu consulta.
En donde quieres mostrar el título?
En la vista general de las galerías o en la galería en si?
Gracias por tu comentario.

Gracias por la atencion Charly.. Quiero mostrarlas en las galeria en si. En este ejemplo me va bien que la galeria general tenga el titulo de galerias, pero las otras me gustaria que tuvieran su titulo correspondientes (Peces, Corales,Lobos) para que fueran un poco mas descriptivas...

principal= titulo "galerias"
peces= titulo "peces"
corales=titulo "corales"
lobos= titulo "lobos"

Muchas gracias por la Ayuda...

Imagen de charly

No me he olvidado de tu tema, lo que ocurre es que estoy muy complicado.
Si puedo para este fin de semana lo hago de nuevo y lo subo.

Hola Charly, la verdad gracias por tus tutoriales, son de mucha ayuda, tengo un problema con la galería, segui todos los pasos descritos en este video tutorial, y pude hacer la galería, el problema viene al cargar las imagenes con plupload, las miniaturas que muestra como vista previa al cargar al servidor, no las muestra, aparecen como imagen rota, lo que no me permite saber que imagen es para poderle colocar titulo a la imagen, gracias espero tu ayuda

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