Temas de vistas, edición de plantillas view.tpl.php (campos, filas, bloques, páginas). Conexión del plugin de jQuery EasySlider.

En este artículo, vamos a analizar el constructor de consultas para Drupal - el módulo Views (http://drupal.org/project/views). Views permite mostrar campos de diferentes tipos de contenido, comentarios, términos, información de usuarios y otros datos de la base de datos. Además, este módulo tiene una interfaz gráfica que permite crear fácilmente consultas a la base de datos con el uso del ratón.

 

¡Atención! Si deseas usar easySlider ahora mismo en una hora, te recomiendo encarecidamente utilizar el módulo. Este artículo está principalmente destinado a explicar cómo trabajar con plantillas del módulo Views y su tematización. Para luego configurar easySlider, tendrás que editar el CSS.

 

Una vez que hemos mostrado los campos necesarios, necesitamos colocarlos de la manera que queremos. Para esto, existen archivos de plantillas de salida. Por defecto, se usan archivos de la carpeta del tema.

Vamos a configurar el complemento jQuery EasySlider para los datos mostrados por el módulo Views. Claro, ya existe un módulo listo que se integra con Views para mostrar EasySlider, aquí tienes el enlace: http://drupal.org/project/easySlider

Si necesitas mostrar imágenes en forma de este slider, puedes instalar el módulo y listo. Este artículo te enseñará cómo trabajar con plantillas de Views.

Para empezar, necesitaremos instalar los módulos Views, CCK, Imagecache, y también descargar los archivos del complemento EasySlider aquí o en otro sitio, buscando el archivo. Más adelante, te explicaré cómo instalar el complemento en el tema de Drupal, después de describir la configuración de los campos CCK.

Entonces, los módulos están instalados, comencemos:

1. Crea un nuevo tipo de contenido.

Agrega a este tipo de contenido un nuevo campo para cargar imágenes y haz clic en guardar. Puedes mover el campo hacia arriba si lo deseas.

En la configuración del campo, establece que se pueden cargar imágenes sin limitación de cantidad y agrega una descripción para las imágenes.

2. Crea un nodo (contenido) del tipo de contenido "Banner" y sube algunas fotos para tener algo que mostrar en el banner.

3. Ahora necesitamos crear un preset (ajuste predefinido) para las imágenes que vamos a mostrar. Crearé un preset de 200x200 píxeles, pero puedes crear el tamaño que necesites.

Agrega el procesamiento de la imagen And scale And crop, repito que mis tamaños son 200x200, los tuyos probablemente serán otros:

4. Todo listo para mostrar (a través del módulo Views) este campo con imágenes en una lista en un bloque separado:

Agrega una nueva vista (view, visualización, display).

Agrega el campo de Imágenes.

Configura lo siguiente: quita la agrupación de valores, elimina el título del campo, ajusta el tamaño de la imagen al que creamos en el preset.

En los filtros pon:
Contenido: Publicado - sí
Contenido: Tipo - Banner

En la configuración básica:
Estilo: HTML List

Agrega la visualización en un bloque.

Esto resultará en lo siguiente:

Ahora, en la vista previa, deberían mostrarse nuestras imágenes del banner.

5. Añade el bloque de la vista a una región y ve cómo se ve.

Hmm... No parece un slider. Vamos a instalar easySlider.

6. Descomprime easySlider, que puedes descargar al inicio del artículo. En la carpeta del plugin hay ejemplos de cómo se ve el slider, creo que tomaremos el segundo ejemplo del archivo 2.html. Debes copiar el CSS que hay en este archivo en el style.css de tu tema, y las imágenes de la carpeta images del plugin en la carpeta images de tu tema.

7. En la carpeta js del plugin está el archivo easySlider1.5.js, también debes copiarlo en la carpeta del tema actual de Drupal, lo mejor es crear una carpeta js para los archivos javascript. Puedes incluir el archivo en el archivo de tema nombre_tema.info, agregando este código:

Actualiza la caché y el archivo easySlider1.5.js debería conectarse:

Si abres este archivo, verás una pista de cómo debe ser el bloque para que funcione el slider.

Ahora, veamos nuestro bloque usando Firebug para Firefox, Dragonfly para Opera, también hay DOM-inspector en Chrome. Yo uso Firebug para Firefox, porque es más conveniente que otros DOM-inspectores.

Como vemos, Views ha agregado muchos divs, que generalmente ayudan en el diseño, pero ahora solo estorban, así que necesitamos eliminarlos.

 

8. Volvamos a la vista que creamos y hagamos clic en el enlace Theme: information. Aparecerá una lista de plantillas donde podemos cambiar la salida de los datos.

En negrita están las plantillas que muestran los datos por defecto. Estas plantillas están en la carpeta del tema del módulo Views. En fuente normal, junto a las plantillas en negrita, están los nombres de los archivos donde puedes sobrescribir la plantilla predeterminada. Para sobrescribir la plantilla, necesitas crear un archivo con el nombre correspondiente, por ejemplo views-view-fields--view-banner.tpl.php.

Miremos primero el contenido del archivo views-view-fields.tpl.php:

La parte superior contiene un comentario, destacado en verde. Todo el contenido de la plantilla está envuelto en un ciclo foreach, por lo que se muestra cada entrada hasta que todas las entradas sean mostradas. Luego, están los $field->separator - los separadores, que no necesitamos en la salida, por lo que los eliminaremos, pero no los eliminaremos en el archivo views-view-fields.tpl.php, sino que crearemos un archivo de plantilla separado para nuestra vista views-view-fields--view-banner.tpl.php y lo copiaremos en la carpeta del tema. $field->label es el título de nuestro campo, que no tenemos, así que también lo eliminaremos. Luego, el código contiene field->inline_html, que normalmente es un div que envuelve cada entrada, lo eliminamos y eliminamos la línea que es el tag de cierre del div de field->inline_html:

<?php print $field->inline_html;?>

Ahora guardamos esta plantilla, actualizamos la caché de Drupal y revisamos el código de nuestra salida nuevamente con Firebug:

Bueno, ahora nuestros

• tags están mucho más cerca de las imágenes, solo falta eliminar los tags . En nuestro caso, en el código de la plantilla es:

   

  
  <?php print $field->element_type; ?> class="field-content">

  y

  
  <?php print $field->element_type; ?>

  Después de limpiar nuestra plantilla, este es el código resultante:

  

  Queda poco del template predeterminado, pero es suficiente para nosotros. Guardamos y vemos cómo queda el código:

  

  Ahora está mucho mejor, pronto nuestro slider funcionará. Ahora usemos otro template para eliminar:

  
  <div class="view-content"><div class="item-list">

  Lo haremos mediante otro template views-view--view-banner.tpl.php, que crearemos en la carpeta del tema, y tomaremos el código de views-view.tpl.php.
  En este template hay muchas cosas útiles, como el bloque con las clases que envuelven todo el template:

  
  <div class="<?php print $classes; ?>">

  El título de la vista (no el título del campo, sino el título de la vista, que se establece por separado)

  
  <?php if ($header): ?>
    <div class="view-header">
      <?php print $header; ?>
    </div>
  <?php endif; ?>

  filtros expuestos - no sé cómo traducirlo mejor al español, son esos filtros que permiten formar dinámicamente la salida de la vista.
    <?php if ($exposed): ?>

  
    <div class="view-filters">
      <?php print $exposed; ?>
    </div>
  <?php endif; ?>

  Adjuntos a la vista antes de la salida:

  
  <?php if ($attachment_before): ?>
    <div class="attachment attachment-before">
      <?php print $attachment_before; ?>
    </div>
  <?php endif; ?>

  Campos mostrados a través de la vista:

  
  <?php if ($rows): ?>
      <div class="view-content">
        <?php print $rows; ?>
      </div>
    <?php elseif ($empty): ?>
      <div class="view-empty">
        <?php print $empty; ?>
      </div>
    <?php endif; ?>

  Pager - paginación de los campos mostrados

  
  <?php if ($pager): ?>
    <?php print $pager; ?>
  <?php endif; ?>

  Adjuntos a la vista después de la salida:

  
  <?php if ($attachment_after): ?>
    <div class="attachment attachment-after">
      <?php print $attachment_after; ?>
    </div>
  <?php endif; ?>

  Enlace leer más (más información, continuar leyendo):

  
  <?php if ($more): ?>
    <?php print $more; ?>
  <?php endif; ?>

  Pie de la vista, configurado con un campo separado:

  
  <?php if ($footer): ?>
    <div class="view-footer">
      <?php print $footer; ?>
    </div>
  <?php endif; ?>

  Icono de suscripción por RSS

  
  <?php if ($feed_icon): ?>
    <div class="feed-icon">
      <?php print $feed_icon; ?>
    </div>
  <?php endif; ?>

  No pensando mucho, dejo lo necesario y el resultado:

  

  Ahora eliminamos:

  
  <div class="item-list"></div>

  Este bloque se define en la plantilla views-view-list.tpl.php,  lo reemplazamos por la plantilla views-view-list--view-banner.tpl.php.

  

  Ahora, para eliminar todos los demás divs innecesarios, necesitamos agregar código en la plantilla block.tpl.php. Si no tienes esta plantilla en el tema, puedes copiarla del módulo Block y agregarla al tema, de modo que puedas sobrescribir esta plantilla para el tema.

  Modificamos el código de esta plantilla block.tpl.php para eliminar los bloques innecesarios y agregar un bloque con id="slider", añadiendo la condición if:

  

  La variable $block->delta se genera en Drupal según el módulo que crea el bloque. En mi caso, esta variable para el banner es (destacada en azul):

  

  Ahora limpiamos la caché y revisamos la página, debería verse así:

  

  Como se mencionó anteriormente, primero aparece el div id="slider", luego la lista (etiqueta ul), y dentro de la ul los elementos li.

  Ahora solo queda añadir un pequeño javascript para inicializar el slider:

  

  El javascript se puede agregar directamente en page.tpl.php o en un archivo separado como js/custom.js.

  Como resultado, easySlider debería funcionar, pero aún es necesario configurar el CSS para que se muestre correctamente:

  

  Por supuesto, es más fácil usar un módulo para mostrar cualquier tipo de carrusel o slider de presentación. Pero, ¿y si no hay un módulo así, pero sí un complemento jQuery? En ese caso, no tienes que esperar a que alguien escriba un módulo para ti.