Creando un view con un elemento destacado o featured

June 18, 2021

Share

Table of contents

Quick Access

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: https://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.