In the previous section, we created two entirely separate Views-powered pages to list all the News items and Blog posts, that is, those Article nodes that had been marked as News or Blog posts. As an illustration of the ease with which you can create separate blocks for content lists using the Views module, let's now create a block version of the news listing and place that block on the Basic page entitled News that you created in Chapter 5, Basic Content.
Locate the newly created Views-powered News page and hover your mouse pointer near the top of the view's output. This should reveal the contextual link for the view as a whole, allowing you to edit the view quickly and easily without even knowing its name.
Create a block version of the existing display by clicking on the +Add button and choosing to add a new Block Display.
Click on the new Display name: label entitled 'Block'
Rename the Block to News list as a Block as you did earlier:
Since this is a Block display and not a page that can be visited via a URL path, it does not have any Path settings but instead has some block-specific settings in the central region of the dialog. In order for the block to be visible to the block placement system, you must name the block specifically, so click on the word None (next to block name) now.
Set the name of the block to News listing block and click on Apply:
Save the view before continuing.
You have now created a new block and it will be available for placement on the Block layout page that you first saw back in Chapter 4, Getting Started with the UI.
Let's look again at how to do just that.
The overall goal here is to place the new News block onto the existing News page immediately underneath the Body field.
Go to Manage | Structure | Block layout.
Locate the Content region and click the Place block button.
Scroll down the page to locate the newly-created block entitled News listing block.
Let's place the block on the News page.
You'll concentrate only on the key points for now, which are essentially where, how, and when we want the News listing block to appear in simple steps.
We don't want the Title showing because we already have a title on the news page, so unclick Display title.
The default option to view 10 news items at a time seems sensible so leave that alone.
So that's the how and the where dealt with, we now need only to tell Drupal when we want that block to be displayed, and the criterion for that is that we are viewing the News page which, if you've been following along, will be node/7.
So, the two visibility settings that need adjusting within the collapsed Pages field group so as to make the block is only visible on the News page are:
Click on the left-hand side Pages section.
Enter /node/7.
Select the Show for the listed pages option:
You can now re-position the News block directly underneath the existing Main content block and then click on Save blocks:
You should only see the News listing block when you are actually viewing the original News page (node/7) that you created back in Chapter 5, Basic Content.
The visible "page" now comprises the original Basic page and the View block.
Now that you have placed the News listing block on the News page, we no longer need the second menu item that was provided by the News Page display within the News View.
This is a good opportunity to re-visit the menu management screen and to see how, rather than deleting the item, you can just temporarily disable it instead. Likewise, we could actually remove the Page display from the News View but, again, leaving it in place will prove very useful later in Chapter 7, Advanced Content, when we touch on some of the more advanced features of the Views module.
For now, just disable the second News menu item – the one provided by your News view - in the Main navigation menu.
Go to Manage | Structure | Menus.
Edit the Main navigation menu, then disable the item, and save the settings.
Let's finish by taking a look at what Views offers in terms of options for the HTML markup of its output.
Out of the box, the Views module offers four formats of output:
- Grid
- HTML List
- Table
- Unformatted list
Visit the News page (node/7) again and edit the news view directly using the contextual link, as shown in the following screenshot:
This should take you to the View edit screen centered on the News list as a Block display. Locate the FORMAT section on the left-hand side and click on the Unformatted list default.
As an exercise, we are going to change the output markup to be in a grid style, but we are only going to do this for the News block and not the News page.
So, in the next screen, dropdown the For: menu and choose This block (override), which means that any changes we are about to make will only apply to the block display and not to the original Page display.
Change the style setting from Unformatted list to Grid and below and set the Number of columns to 2. Apply the new settings:
Finally, save the View:
Save the view and go and revisit the News page.
The news article listing should now be output as a grid of two column widths like the following:
