Creando un view con un elemento destacado o featured
Como notarán, nos encanta hablar de Views. En lo personal creo que es uno de los módulos uno de los más útiles y usados en Drupal junto con CCK. Con Views podemos hacer slideshows, bloques que nos muestren los contenidos más visitados, contenidos más populares, etc.
Hoy vamos a hacer que el primer elemento que despliegue un view se destaque de los demás. Si usamos <li> para cada fila del view, a lo mejor pensemos en usar li:first-child y le demos estilo al primer elemento, lo cual es una solución totalmente válida si sólo fueramos a cambiar estilos. Para los que no saben que es :first-child, es una pseudo-clase con el que seleccionamos solamente el primer elemento hijo del elemento padre. En este caso li:first-child estaría eligiendo al primer elemento dentro de un ol o un ul. Un ejemplo que pueden probar es el siguiente
HTML
<ul> <li>Este es el item 1</li> <li>Este es el item 2</li> </ul>
CSS
li:first-child {
color: #FF3333;
font-weight: bold;
}
A manera de referencia les dejo éste sitio para que revisen más del tema: http://reference.sitepoint.com/css/pseudoclass-firstchild
Regresando a nuestro caso, digamos que queremos que el primer elemento, además de tener ciertas diferencias en el estilo, despliegue uno o dos campos adicionales. ¿Cómo lo podemos hacer?
En nuestro caso vamos a tener un content type creado, que se llame estudiante. Cada estudiante tiene los siguientes datos: nombre, apellido, salón, foto y promedio.
Vamos a usar dos de los estilos para imágenes que Drupal ya trae y que se encuentran en admin/config/media/image-styles (medium para la imágen del elemento destacado y thumbnail para a los demás.)
Es hora de crear el View.
Lo creamos como un bloque y le asignamos el nombre de Estudiantes Destacados.
Configuramos lo básico del view: campos, orden, nombre del bloque.
Para crear el elemento destacado, lo primero que hacemos es cambiar la cantidad de elementos que vamos a traer. En este caso, tendremos 3 estudiantes en este view y el primero será el destacado. Esto lo hacemos en la sección de Pager, presionando el enlace que dice 3 items. En la ventana emergente, ponemos 3 en quantity y 1 en offset. El valor de offset quiere decir que de los 3 elementos en total que se van a desplegar en el view, el primero no lo va a desplegar.
El elemento destacado.
Creamos ahora un nuevo item del view, que se llama attachment
Le asignamos los mismos campos que tenemos en nuestra vista de bloque o bien podemos traer o quitar los campos que queramos. En este caso, vamos a usar los mismos campos. Los valores que tenemos que configurar adicionalmente son:
Attachment Settings
1) Attach to: En ésta opción escogemos la vista a la que vamos a adjuntarle el attachment que estamos creando. (Seleccionamos la vista de bloque que hemos creado anteriormente)
2) Attachment Position: Ésta opción escoge si el attachment será desplegado antes o después de la vista a la que se está adjuntando. Before (Viene por defecto Before, así que lo podemos dejar así).
Pager
3) Items to display: Escogemos cuántos elementos vamos a usar en éste attachment. Debe ser igual al valor de offset que seleccionamos en la ventana anterior.
Ya que habíamos decidido el estilo de imagen medium para la imágen del elemento destacado, vamos a aplicarlo al campo de imagen del estudiante.
Ojo Cuando vayamos a editar un campo, tenemos que fijarnos en la opción superior y seleccionar que solamente estamos editando ese attachment.
Finalmente, usamos un poco de CSS para estilizar y ordenar el contenido.
Hemos creado nuestra vista con un elemento destacado. Podemos jugar con los valores de configuración y poner más campos en el attachment. Podemos usar éste tipo de vistas por ejemplo, crear una vista de productos en oferta del dia, o algo similar. Cualquier pregunta o sugerencia que tengan pueden escribirla en los comentarios y les ayudaré con gusto.
