Miguel Rodríguez hace desarrollo de software efectivo.

Slideshow con Título y Leyenda en Drupal

Este tutorial fue probado solamente en Drupal 7 con Vistas(Views) 3 y una versión bifurcada de Responsly.js
Requisitos:
 
  • Vistas(Views) 3.
  • Una libreria de Slideshow (Aunque pueden usar cualquier Slideshow que pudan gustar, sugiero que usen un slideshow que permita colocar la leyenda proxima a la imagen encapsulada por un contenedor, si no este tutorial no ayudara apropiadamente).
  • Deberian saber algo básico de HTML y Javascript.
Que aprenderán:
 
  • Tematizar vistas.
  • Reescribir la salida de un campo usando patrones de reemplazo.
  • Implementar una libreria externa a la vista.
Para ver el resultado de este tutorial porfavor visite esta página web.

Lo que estamos buscando

 
Vamos a implementar un slideshow con Vistas (módulo), he usado una versión bifurcada de Responsly.js, pero se puede utilizar cualquier Slideshow, siempre que el título este proximo a la imagen, el Slideshow que vamos a utilizar en este tutorial necesita esta estructura:
 
  1. <div id="slideshow">
  2. <figure>
  3.  
  4. <img src="image.jpg">
  5.  
  6. <figcaption> ... leyenda ...</figcaption>
  7.  
  8. </figure>
  9.  
  10. <figure>
  11.  
  12. <img src="image.jpg">
  13.  
  14. <figcaption>... leyenda ...</figcaption>
  15.  
  16. </figure>
  17.  
  18. ... y así ...
  19.  
  20. </div>
 
Con el fin de hacer que la vista se vea así, reescribiremos el resultado de algunos campos, así como tematizar la salida de la vista para dar formato a cada fila y al contenedor del Slideshow, vamos a proceder de la siguiente manera:
 

La creación de la Vista

 
  • Crear una nueva vista como un bloque con un formato de "lista sin formato".
Añade una nueva vista (bloque, Drupal, Views)
Añade una nueva vista como un bloque con un formato "lista sin formato"
Atribución: 
 
  • Desmarque todas las opciones en la configuración de formato (esto es opcional, el Slideshow va a funcionar con estas opciones habilitadas pero yo lo haría de todos modos).
Configuración de formato (Drupal, Views)
Configuración de formato (vistas)
Atribución: 
 
Desmarcar las opciones de formato (Drupal, Views)
Desmarcar todas las opciones de formato en la configuración de formato.
Atribución: 
 
  • Asegúrese de que la vista muestra campos y desactive las opciones en la configuración de campos (esto es opcional, pero yo lo haría de todos modos).
Desmarcar opciones de campos (Drupal, Views)
Desmascar las opciones de campos en la configuración de campos (no es obligatorio pero yo lo haría de todas maneras).
Atribución: 
 

Agregar los campos

 
  • Aplicar los filtros adecuados.
Añade filtros apropiados (Drupal, Views)
Añade los filtros apropiados, definiendo los tipos de contenidos y campos requeridos como los campos de imagenes.
Atribución: 
 
  • Agregue el campo "contenido: título" (en su mayoría definidos por defecto, si no está definido, por favor hágalo).
  • Agregue el campo de imagen en relación con los filtros (si aplica), defina los valores sin etiquetas, organize los campos y coloquelo en primer lugar.
Ordenar los campos (Drupal, Views)
Ordenar los campos como se necesite, mover un campo antes que otro es requerido si los patrones de reemplazo van a ser usados cuando se reescribe la salida.
Atribución: 
 
  • Agregue el campo "cuerpo", modifique la configuración, defina el formato como "resumen o recortado", desactive la opción "crear título", marque la opción "excluir de la pantalla", organice los campos y colóquelo antes del título.
Configuración del cuerpo (Campo, Drupal, Views)
Definir la configuración del cuerpo con forma de resumen o recortado, excluidos de la pantalla (con el fin de usarlo como un modelo de reemplazo), sin etiqueta.
Atribución: 
 
  • Agregue el campo "ruta", edite la configuración, desactive la casilla "crear título de" opción, marque la opción "excluir de la pantalla" y organizar los campos y colocarlo antes del título.
  • Editar la configuración del campo "título", desactive la opción "enlazar al contenido original", marque la opción "Rescribir la salida de este campo", utilice el modelo de reemplazo para dar formato al título de cada imagen.
Patron de reemplazo (Drupal, Views)
Usa los patrones de reemplazo para reescribir la salida de un campo.
Atribución: 
 
Esta se debe definir con html, este es un código de ejemplo para integrar esta lista para la presentación de diapositivas Responsly.js;
 
  1. <figcaption>
  2. <a href="[path]"><h2>[title]</h2></a>
  3. [body]
  4. </figcaption>
 

Tematizar la vista para implementar el Slideshow

 
  • Tematizar la salida para dar formato a cada fila, en esta lista que hemos creado, cada fila tiene una imagen y su leyenda, hemos formateado su título ya (el campo de título con la opción de reescritura), pero hay que formatear cada fila y el contenedor en sí mismo. Para tematizar la salida de cada fila, tenemos que crear una plantilla en la carpeta de plantillas de nuestro tema con la información del tema que el módulo de vistas provee.
Tematizando vistas (Drupal, Views)
Atribución: 
 
Esta información de tema lista todas las plantillas por sección (el contenedor de la vista, filas, campos y algunos otros), cada sección tiene un grupo de plantillas que se pueden utilizar para el tematizar la vista como sea necesario, cada sección tiene una precedencia de plantilla, la última plantilla disponible a la derecha se considerarán como la plantilla activa anulando el resto de las plantillas (todas las plantillas a su izquierda), la plantilla activa es la que esta marcada con estilo engrita, de forma predeterminada, la primera plantilla a la izquierda es la activa (en caso de que no haya plantillas disponibles). Cada sección tiene un enlace que muestra el código que se utiliza para crear la plantilla, se debe copiar este código a un nuevo archivo y nombrarlo como la plantilla que queremos crear, buscamos tematizar cada fila de la vista (no sus campos), por lo que vamos a conger el código de "salida de estilo", crear un archivo con él, colóquelo en la carpeta de plantillas de tu tema y nómbrelo como la plantilla próxima a la plantilla activa para anular.
 
Precedencia de tematización de vistas
La primera plantilla a la derecha que sea encontrada sera usada, reemplazando al resto de plantillas.
Atribución: 
 
Código de tematización de vista (Drupal, Views)
En la información de tema puedes obtener el código para tematizar la sección de una vista.
Atribución: 
 
Esto reemplazaría cada fila de la vista que estamos creando (no otras vistas, para más información véase Template (theme hook) suggestions (en ingles)). Los cambios que se van a aplicar muestran "elementos de figuras (<figure>)" en lugar de "elementos div (div)" por cada fila, por lo que vamos a cambiar esto.
 
 
  1. <?php foreach ($rows as $id => $row): ?>
  2.  
  3. <div <?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"'; } ?>>
  4.  
  5. <?php print $row; ?>
  6.  
  7. </div>
  8.  
  9. <?php endforeach; ?>
Por esto.
 
  1. <?php foreach ($rows as $id => $row): ?>
  2.  
  3. <figure <?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"'; } ?>>
  4.  
  5. <?php print $row; ?>
  6.  
  7. </figure>
  8.  
  9. <?php endforeach; ?>
 
Una vez que la plantilla se halla hecho, vuelva a explorar los archivos de plantillas en información de tema, revise las plantillas de su tema y asegurarse de que la plantilla activa es la plantilla que ha creado.
 
Plantilla de vista cambiada (Drupal, Views)
Atribución: 
 
  • Tematizar la salida para dar formato al contenedor del Slideshow, hay que repetir el mismo proceso pero esta vez tenemos que obtener el código de la "salida de presentación", cree un archivo en la carpeta de plantillas del tema y nómbrelo como la plantilla próxima a la plantilla activa.
Tematizando &quot;Salida de presentación&quot; (Drupal, Views)
Atribución: 
 
En esta plantilla vamos a definir el Slideshow, sólo tenemos que establecer un id para el contenedor de las filas, por lo que se agrega el id en este pedazo de código.
 
  1. <?php if ($rows): ?>
  2.  
  3. <div id=”slideshow” class="view-content">
  4.  
  5. <?php print $rows; ?>
  6.  
  7. </div>
  8.  
  9. <?php elseif ($empty): ?>
  10.  
  11. <div id=”slideshow” class="view-empty">
  12.  
  13. <?php print $empty; ?>
  14.  
  15. </div>
  16.  
  17. <?php endif; ?>
 
Adicionalmente, hay que añadir el código JavaScript y CSS que exige el Slideshow para poder trabajar, este código se añade al final de la plantilla.
 
  1. <?php // these are the css files ?>
  2.  
  3. <?php drupal_add_css('camino_a/Responsly.js/slidy/theme.default.css'); ?>
  4.  
  5. <?php drupal_add_css('camino_a/Responsly.js/slidy/slidy.css'); ?>
  6.  
  7. <?php // these are the js files ?>
  8.  
  9. <?php drupal_add_js('camino_a/Responsly.js/slidy/slidy.js', array('type' => 'file', 'scope' => 'footer', 'weight' => 1)); ?>
  10.  
  11. <?php drupal_add_js('jQuery(document).ready(function () { jQuery("#slideshow").slidy(); });', array('type' => 'inline', 'scope' => 'footer', 'weight' => 2)); ?>
Una vez hecho esto, hay que volver a escanear las plantillas de la vista, asignar el bloque a una página visible y ver trabajar al Slideshow.
 
Slideshow final
Atribución: 
Conclusión: 
Recuerda limpiar el cache o correr el cron si nada ha cambiado, comprobar la ruta de los archivos CSS y JS, comprobar si la version del slideshow es la última del slideshow (solo en caso de que hallan usado el slideshow que usamos en este tutorial), comprobar si añadieron las plantillas al tema correcto, generalmente, solo recuerden probar -_-”.

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .