Drupal: Views Challenge

This week, we had our regular Apprenticeship Training. We were set a task called the “Drupal Views Challenge”.

 

What was it?

We had to replicate the above illustration using the Drupal Views Module. We had to have a post at the top, displaying as Full-Width, followed by two posts displaying side-by-side. Finally, we had to have 4 posts displaying in 4 columns.

To begin with, I created 7 ‘dummy’ posts that could be used specifically for the Challenge. With this completed, I then went to the Views settings page, found in Structure > Views. I proceeded to ‘Add View’.

On the next window, I created a name for the View – “Views Challenge” and decided to show content of type: article sorted by: oldest first. Then I checked the ‘Create a Block’ checkbox and clicked Save and Edit.

This view is for the top post, displaying full-width so, I set the format to Grid and set it to show Content of Teaser. In the Pager settings, I then set it to display a specified number of items, 1.

Next, I moved onto the second row. Same as before, I navigated to Structure > Views > Add View. I created the name ‘Views Challenge 2’ and set it to show content of type: article sorted by: oldest first and checked the Create a Block checkbox. Here, again same as before, I set the format to Grid and set it to show Content of Teaser. In the Pager settings, I then set it to display a specified number of items, but this time, 2 and because we want it to skip the first item as this is in the previous view, I set the offset to 1.

Now for the final row. Same steps as before I named my View ‘Views Challenge 3’, and set it to show Content type Article, Oldest First and checked the Create a Block checkbox. On the next screen, I set the format to Grid and set it to show Content of Teaser. In the Pager settings, I then set it to display a specified number of items, but this time, 4 and because we want it to skip the first 3, I set the offset to 3.

Now for the final step. I then created a page called “Views Challenge” which is where I wanted my Views challenge to be presented. I then went to Structure > Block Layout. I looked for the three “Views Challenge Blocks” we had just created and moved them into Content.

To ensure they only displayed on the Views Challenge page I had just created, I then clicked Configure next to each Block, Clicked the Pages tab and typed in the page path which is /views-challenge ensuring I checked the “Show for listed pages” radio button and clicking “save block”. I then navigated to my Views Challenge page:

You can see the Live Version of my Views Challenge here.