views

Magnific Popup en Drupal
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!   Fotografía principal: Noah Buscher
Cómo crear un bloque de contenido relacionado con views en Drupal 7
Como suele ser habitual en Drupal, siempre hay varias formas para resolver un problema. En este caso queremos hacer un bloque de contenido relacionado para que se muestre en un nodo, por ejemplo el típico bloque de noticias relacionadas que se muestra en el nodo de una noticia. Lo que necesitamos es crear una view que muestre noticias del mismo término de taxonomía que el nodo en el que se mostrará el bloque y, por supuesto, que no nos muestre el mismo nodo en el que estamos. Para ello debemos seguir los siguientes pasos: 1.- Creamos una view con un display tipo bloque. 2.- Añadimos los campos que queremos que aparezcan como título, fecha y foto. 3.- Añadimos un filtro contextual para excluir el nodo actual. Hacemos click en “Añadir Filtro contextual” Seleccionamos “Contenido: Nid (El ID del nodo)”. Ahora cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de contenido desde URL” Por último vamos a la sección “Más” y marcamos la casilla “Excluir - Si se marca, los números indicados para el filtro serán excluidos en lugar de limitar la vista”. 4.- Añadimos un segundo filtro contextual:   Seleccionamos “Contenido: Tiene un id de un término de taxonomía“. Cuando el filtro no está disponible seleccionamos “Proporcionar valor predeterminado” y en Tipo seleccionamos “ID de término de taxonomía desde la URL” y después marcamos la casilla “Load default filter from node page, that's good for related taxonomy blocks” y seleccionamos el vocabulario que queramos. Si no carga la lista de vocabularios, pincha en guardar y vuelve a hacer click en el filtro conceptual. 5.- Ahora ya solo queda ir a la configuración de bloques y ubicar el bloque en la región y el tipo de contenido que nos interese. Y ya tenemos nuestro bloque de contenido relacionado con views en Drupal 7.   Fotografía principal: Nicolas Hoizey