Creando un view con un elemento destacado o featured

June 18, 2021
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. Creando un view con un elemento destacado o featured - Paso 1 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.) Creando un view con un elemento destacado o featured - Paso 2 Es hora de crear el View. Lo creamos como un bloque y le asignamos el nombre de Estudiantes Destacados. Creando un view con un elemento destacado o featured - Paso 3 Configuramos lo básico del view: campos, orden, nombre del bloque. Creando un view con un elemento destacado o featured - Paso 4 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. Creando un view con un elemento destacado o featured - Paso 5 El elemento destacado. Creamos ahora un nuevo item del view, que se llama attachment Creando un view con un elemento destacado o featured - Paso 6 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. Creando un view con un elemento destacado o featured - Paso 7 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. Creando un view con un elemento destacado o featured - Paso 8 Finalmente, usamos un poco de CSS para estilizar y ordenar el contenido. Creando un view con un elemento destacado o featured - Paso 9 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.