Exercise 6.3: A customised News and Media page

In this exercise we’ll customise the Employment news View page we created earlier, making it show three items of recent content, then a bulleted list of titles of seven recent News and Media articles. Below is what the layout of the page will look like.
Image of Employment news page
There are seven stages in this process:
  1. 1.
    Locate the View and edit using contextual links
  2. 2.
    Change the number of items to display
  3. 3.
    Add a new display: an attached list
  4. 4.
    Add a header to the attachment
  5. 5.
    Change the offset to exclude the first three articles
  6. 6.
    Change the attachment setting
  7. 7.
    Review your changes
  1. 1.
    Navigate to the Employment news page we created earlier.
  2. 2.
    Locate and click the Contextual links pencil and click Edit view..
Image of Employment news edit View page

2. Change the number of items to display

  1. 1.
    Under Pager click "mini" to change the settings.
  2. 2.
    Select "Display a specified number of items".
  3. 3.
    Click Apply.
  4. 4.
    Change Items per page: 3.
  5. 5.
    Click Apply.
Now check your preview to confirm three items are displayed. Scroll down to the Preview section to check only three items are displayed.
Image of Employment news edit View page

3. Add a new display: an attached list

Next we'll add a list of seven more recent articles to the bottom of this view.
  1. 1.
    At the top, click the +Add button and select "Attachment".
  2. 2.
    You’ll now have more than one display available, with the one you’re editing highlighted. Make sure the correct one is always highlighted when you’re editing views.
  3. 3.
    Next click Unformatted list under Format in the left column. A new window will pop up, giving you the option to select the display you're changing.
  4. 4.
    Select "This attachment".
  5. 5.
    Select "HTML list".
  6. 6.
    Click the Apply (this display) button.
  7. 7.
    The next screen is “Attachment: Style options”. Leave all settings as default and click the Apply button.
  8. 8.
    Under FormatShow, click Content to change the settings. Select the Fields radio button.
  9. 9.
    Then click Apply on the final screen, leaving the settings as they are.
  10. 10.
    You'll see that Views added a Title field for us. If we needed more fields to be displayed, we could have added them using the Add button. Let’s continue with only the Title field for now.
  11. 11.
    Check the Preview pane at the bottom of the page to confirm our display is correct:
Imag of Preview pane

4.Add a header to the attachment

  1. 1.
    Under the Header section on the View page click Add.
  2. 2.
    Make sure you’re editing "This attachment (override)".
  3. 3.
    Search for and select "Text area". Apply changes.
  4. 4.
    Make sure the Text format for the Content field is Rich Text. Then type in the Content field: <p>More articles from our contributors</p>
  5. 5.
    Apply the changes.
  6. 6.
    Check that the preview shows text ‘More articles from our contributors’ above the list.
Image of Preview

5. Change the offset to exclude the first three articles

Our Attachment view will be displayed below the first three News and Media articles, so we need to exclude those from our list to avoid displaying duplicate content:
  1. 1.
    Make sure you're still editing the Attachment display. Under the Pager settings in the centre column, click "10 items" to change the setting.
  2. 2.
    Change the “Items to display” to 7 and the "Offset" to 3. Apply the changes.
Image of Number of items and Offset

6. Change the attachment settings

  1. 1.
    Under "Attachment settings" in the centre column click the option: "Attach to:" Not defined.
  2. 2.
    Select "page". Apply the changes.
  3. 3.
    Click "Attachment position:Before".
  4. 4.
    Select "After". Apply the changes.
Image of Position: After

7. Review your changes

  1. 1.
    Click the Save button to save your changes.
  2. 2.
    Return to the Employment news page and review the changes.
  3. 3.
    You may create more News and Media content to test it. Make sure you publish any new content before reviewing the Employment news page.
Image of Position: After