Miguel Rodríguez hace desarrollo de software efectivo.

Miniaturas con Título en Drupal

Este tutorial fue probado solamente en Drupal 7 con Vistas (Views) 3
Requisitos:
 
  • Vistas (Views) 3.
  • deberias saber algo básico de CSS.
Que aprenderas:
 
  • Como personalizar las Vistas usando CSS.

Que estamos buscando

 
En este tutorial vamos a crear una lista de miniaturas con el título de su respectivo contenido, hay tres vías para personalizar las vistas, tematizar la salida, reescribir el resultado de un campo, o añadiendo Clases CSS, ya hemos practicado como tematizar la salida y reescribir el resultado de un campo en este tutorial, pero esta vez estableceremos Clases CSS para personalizar las vistas y hacerlas ver de la forma que queramos, este es especialmente útil cuando el contenido no tiene que tener un estructura especifica.
a fin de hacer que esta lista de miniaturas funcione, tendremos que añadir el código siguiente:
 
  1. .thumbnails .left{
  2. position:relative;
  3. display:block;
  4. float:left;
  5. margin-right:5px;
  6. margin-bottom:5px;
  7. border:1px solid black;
  8. }
  9. .thumbnails .left .title{
  10. position:absolute;
  11. bottom:0;
  12. width:100%;
  13. background-color:rgba(00,00,00,0.4);
  14. }
  15. .thumbnails.auto .left .title{
  16. opacity:0;/*optional*/
  17. transition: opacity 2s;/*optional*/
  18. -o-transition: opacity 1s;/*optional*/
  19. -ms-transition: opacity 1s;/*optional*/
  20. -moz-transition: opacity 1s;/*optional*/
  21. -webkit-transition: opacity 1s;/*optional*/
  22. }
  23. .thumbnails.auto .left:hover .title{
  24. opacity:1;/*optional*/
  25. }
 
Esto simplemente va a hacer que cada miniatura flote a la izquierda y coloque cada título en el fondo de sus respectivas miniaturas, la clase "thumbnails" esta descrita como el contenedor de las miniaturas, la clase "left" va a ser asignada a cada miniatura (cada miniatura flotara a la izquierda, por eso la clase CSS está siendo llamada así), y la clase "title" será asignada a los títulos (obvio), adicionalmente, hay una regla extra (especificada como "auto") que hace que el título aparesca y desaparesca mientras pasamos por encima de la miniatura, por supuesto, no estas obligado a usarlo. El código CSS deberia ser cargado en el tema, manten en cuenta que esas clases CSS son las clases que asignaremos a la vista, así que si cambias el código, asegúrate que las clases CSS están coincidiendo con las clases CSS asignadas. los pasos siguientes van a describir el proceso para hacer esta lista de miniaturas:
 

Creando la Vista

 
  • Crear una nueva vista como bloque con un formato "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: 
 
  • Desmarca las opciones en la configuración de formato (esto es opcional).
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: 
 
  • Asegurate que la vista esta mostrando "campos" y desmarca las opciones en la configuración de campos (esto es opcional también).
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: 
 

Añadiendo los campos

 
  • Aplicar los flitros apropiados.
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: 
 
  • Añadir el campo de imagen relacionado con los filtros (si aplica), definir la configuración sin etiqueta, organiza los campos y colócalo de primero. Finalmente, establece los estilos de las imágenes como "miniaturas", puedes definir las imágenes con el estilo que gustes, pero, personalmente recomiendo definir las imágenes con forma cuadrada y una altura y anchura no mayor a 350px (yo preferí definir las imagenes con un estilo mediano).
Estilo de imagen (Drupal)
Establesca un estilo de imagen para modificar las imagenes mostradas.
Atribución: 
 

Añadiendo el código CSS

 
  • Tenemos que añadir las clases CSS al contenedor, a los campos y filas a fin de hacer que la lista de miniaturas funcione, recuerda que cada clase CSS que vamos a asignar debe coincidir con las clases CSS del código, primero asignaremos la clase CSS al contenedor al añadir "thumbnails" a la opción "clase CSS" en la sección "avanzado", de acuerdo al código de arriba, la clase CSS “thumbnails” está rodeando todo lo demás, así que este es la clase CSS que el contenedor deberia tener. Puedes añadir la clase CSS "auto" con "thumbnails" (separada con espacio) para especificar que cada título de la lista de miniatura debería aparecer solo cuando el usuario pasa por encima de una imagen.
Clase CSS del Contenedor (Drupal)
Añade una clase CSS al contenedor para integrar la Vista al código.
Atribución: 
 
  • Ahora, vamos a añadir una clase CSS a la fila, cada fila esta conteniendo una imagen y un título, necesitamos que cada imagen flote a la izquierda, asi que vamos a añadir la clase CSS "left".
Clase CSS de las filas (drupal)
Añada una clase CSS a cada fila para integrar a la vista a un código CSS.
Atribución: 
 
  • En conclusión, vamos a añadir una clase CSS al campo "título", la clase CSS apropiada para este campo es "title".
Configuración del Título (Views, Drupal)
Establece un contenedor en el campo para añadir una clase CSS.
Atribución: 
 
Aqui están los resultados finales:
 
Final thumbnail list
Atribución: 

 

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 .