Cómo añadir Magnific Popup a una view de tu web en drupal

Por
Santiago Ervina
· 13/06/2016

Los popups son una excelente y bella (en ocasiones) forma de mostrar al usuario contenido relacionado o secundario sin necesidad de tener que recargar la página, existen muchos métodos y plugins que permiten realizar este efecto, todos tienen sus ventajas e inconvenientes que los hacen mejores o peores en función del uso que queramos hacer de ellos, no obstante, en este artículo vamos a mostrar uno de los mejores, o al menos, de los más versátiles: Magnific Popup, un plugin que permite su uso en multitud de situaciones diferentes: galerías, ventanas modales, cargando formularios o contenido vía AJAX, etc., siendo además rápido, ligero (dispone de una herramienta para generar una versión adaptada a nuestras necesidades), responsivo y fácil de modificar mediante CSS, ¿qué más podemos pedir?

Un ejemplo sencillo de como incorporar este plugin en Drupal y sacarle un gran partido consiste en utilizarlo dentro de una view, para este ejemplo vamos a suponer que tenemos una vista de contenido consistente en un listado de nodos de un tipo de contenido "producto", la vista tendrá el nombre "productos" con un display de tipo "bloque" que muestra el la imagen el nombre de un producto, si el usuario pincha sobre él, se abre un popup con información detallada sobre dicho producto.

El primer paso es configurar la view que vamos a utilizar, añadiremos inicialmente 2 campos más el Nid de cada producto que se utilizará como identificador único del popup de cada producto:

    Nid (nombre de sistema: nid)
    Nombre del producto (nombre de sistema: title)
    Descripción del producto (nombre de sistema: descripcion)

El objetivo es que el campo "Nombre" tenga un enlace que active el popup, y dentro del popup debe salir el contenido de la "Descripción", para ello haremos lo siguiente:

1. Marcamos la opción “Excluir de la presentación” del campo “Nid” y desactivamos que esté enlazado al nodo, el objetivo es que salga el id del nodo en formato de texto plano para reutilizarlo en los otros campos.

2. Marcamos la opción "Reescribir la salida de este campo" en el campo "Nombre" y escribimos el siguiente código:

<div class="popup-trigger">
<a href="#popup-[nid]">[title]</a>
</div>

3. Marcamos la opción "Reescribir la salida de este campo" en el campo "Descripción" y escribimos el siguiente código:

<div id="popup-[nid]" class="inline-popup mfp-hide">
[descripcion]
</div>

Con esto tenemos la vista terminada, por supuesto se puede cambiar este HTML para adaptarlo a las necesidades de cada uno, lo que hay que tener en cuenta es que debe haber un enlace que apunte al “id” del popup, y que ese div debe tener las clases definidas para el uso del plugin, en este ejemplo son “inline-popup mfp-hide” pero pueden variar en función de las opciones que queramos utilizar, todas las opciones válidas están disponibles en la documentación.

El segundo paso para que funcione el popup consiste en hacer que se cargue el fichero javascript del plugin y que se inicialicen los popups en nuestra view; existen varias formas de incorporar código js a una web de drupal, en este ejemplo vamos a utilizar una función de preprocesado para cargar el código únicamente cuando la view en la que lo hemos incorporado se vaya a mostrar, añadiremos dicha función al fichero template.php del tema:

/**
 * Añadir Magnific Popup a bloque de view.
 */
function THEME-NAME_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  if ($view->name == 'productos' && $view->current_display == 'block') {
    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js');
    drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js');
    // add needed stylesheet
    drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css');
  }
}

Los ficheros jquery.magnific-popup.min.js y magnific-popup.css pertenecen al código del plugin, el fichero “inicio-popup.js” es un fichero que crearemos a medida para lo que necesitemos, el código para este ejemplo sería el siguiente:

(function($) {
  Drupal.behaviors.inicioPopup = {
    attach : function(context, settings) {
      $(".view-productos .title > a").magnificPopup({
        type:"inline",
        removalDelay: 300,
        mainClass: "mfp-fade",
        midClick: true
      });
    }
  };
})(jQuery);

Nota: Tanto en el código de la función de preprocesado como en este js estamos teniendo en cuenta que la view que hemos creado se llama “productos”

Con esto el popup estaría totalmente operativo, pero es necesario añadir algo de CSS a la hoja de estilos general del tema para que tenga un buen aspecto.

.inline-popup {
  position:relative; 
  width:auto; 
  max-width:650px; 
  margin:20px auto; 

  background-color:#fff;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  padding:30px;  
}

/* Overlay 
   ------------ */
.mfp-fade.mfp-bg { 
  /* at start */
  opacity:0; 
  -webkit-transition:all 0.15s ease-out; 
  -moz-transition:all 0.15s ease-out; 
  transition:all 0.15s ease-out; 
}
.mfp-fade.mfp-bg.mfp-ready { 
  /* animate in */
  opacity:0.8; 
}
.mfp-fade.mfp-bg.mfp-removing { 
  /* animate out */
  opacity:0; 
}  

/* Content 
   ------------ */
.mfp-fade.mfp-wrap .mfp-content { 
  /* at start */
  opacity:0; 
  -webkit-transition:all 0.15s ease-out; 
  -moz-transition:all 0.15s ease-out; 
  transition:all 0.15s ease-out; 
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { 
  /* animate it */
  opacity:1; 
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { 
  /* animate out */
  opacity:0; 
}

Por supuesto a partir de aquí se puede cambiar todo lo necesario para que haga honor a su nombre y sea ¡Magnífico!

Compartir 

Trabajos relacionados

Logotipo de Cálamo & Cran
Escuela de escritura y traducción
Logo totalsurfcamp sobre fotografía
Una nueva manera de sentir el surf