# 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 more jobs. Below is what the layout of the page will look like.

<figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FHI72igZ5wRn7xVbOCL0T%2Fimage.png?alt=media&#x26;token=400a667e-96d2-483e-ae82-43557ad96cc7" alt=""><figcaption><p>Showing 3 jobs, the more jobs</p></figcaption></figure>

There are seven stages in this process:

1. Locate the View
2. Change the number of items to display
3. Add a new display: an attached list
4. Add a header to the attachment
5. Change the offset to exclude the first three articles
6. Change the attachment setting
7. Review your changes

## 1. Locate the View

1.  Navigate to the _admin/structure/views_ and edit the Employment news view.\


    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FlK2aB9z8dE2et1CeciZt%2Fimage.png?alt=media&#x26;token=bd65dfeb-fe92-4972-a0f5-9058476df48b" alt=""><figcaption><p>Showing the edit button in the Views listing page</p></figcaption></figure>

## 2. Change the number of items to display

1. Under Pager click "mini" to change the settings.
2. Select "Display a specified number of items".
3. Click **Apply**.
4. Change Items per page: 3.
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.\
\


<figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FNAM2407n2FJjWRfaBO9k%2Fimage.png?alt=media&#x26;token=ff5c3339-6df1-44fb-a8b7-09b07b9b400d" alt=""><figcaption><p>Showing preview results</p></figcaption></figure>

## 3. Add a new display: an attached list

Next we'll add a list of seven more recent jobs to the bottom of this view.

1. At the top, click the **+Add** button and select "Attachment".
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.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FznMuGzAJFKLI7NRpi5kb%2Fimage.png?alt=media&#x26;token=a0586580-4947-4019-bbb9-60c9023414c5" alt=""><figcaption><p>Highlighting the Attachment display tab</p></figcaption></figure>
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.\


    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FL2gw0a8xiVWOUCZTi5Dk%2Fimage.png?alt=media&#x26;token=0b3cc2af-9ab0-46ba-abab-95e4df2972a1" alt=""><figcaption><p>Field settings</p></figcaption></figure>
4. Select "This attachment".
5. Select "HTML list".
6. Click the Apply (this display) button.
7.  The next screen is “Attachment: Style options”. Leave all settings as default and click the **Apply** button.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FfwQO8U0FzeQsE2gZd5sX%2Fimage.png?alt=media&#x26;token=b11aee84-dc06-447f-bc92-2d223b2c4f76" alt=""><figcaption><p>Attachment style settings</p></figcaption></figure>
8.  Under **Format** → **Show,** click **Content** to change the settings. Select the **Fields** radio button.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2F9kFPlxEdHiUCqgMSUyPm%2Fimage.png?alt=media&#x26;token=6f7a5024-ae8b-4730-a7e6-d917055db2d4" alt=""><figcaption><p>Attachment row style settings</p></figcaption></figure>
9.  Then click **Apply** on the final screen, leaving the settings as they are.



    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-d3fb3eb55d6b5aebf30978b03a45f8a430412fd8%2FEx-6-3-Customised-News-9.png?alt=media" alt=""><figcaption></figcaption></figure>
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.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fw1HUAHX4FTWI4eB9sSK2%2Fimage.png?alt=media&#x26;token=a21a6144-70a4-48b4-904a-5977ad02bfe4" alt=""><figcaption><p>Title field in View</p></figcaption></figure>
11. Check the Preview pane at the bottom of the page to confirm our display is correct.

## 4.Add a header to the attachment

1. Under the _Header_ section on the View page click **Add**.
2. Make sure you’re editing "This attachment (override)".
3.  Search for and select "Text area". Apply changes.



    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-34c72a7fc566d2c2537d30aa6f342461bc6d07c8%2FEx-6-3-Customised-News-12.png?alt=media" alt=""><figcaption></figcaption></figure>
4.  Make sure the _Text format_ for the **Content** field is _Rich Text_. Then type in the **Content** field: \<p>More Jobs\</p>

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FPYMEbZF3tZvXykHbVLlM%2Fimage.png?alt=media&#x26;token=4a2dbcdc-0717-494e-8750-b0cf10e008d4" alt=""><figcaption><p>Adding content to global text area</p></figcaption></figure>
5. Apply the changes.
6.  Check that the preview shows text ‘More Jobs’ above the list.\


    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FrVVym8TtjJE9xFoA14ar%2Fimage.png?alt=media&#x26;token=81755a98-6ef1-4183-93cb-e961c2cfbfea" alt=""><figcaption><p>Preview of new header</p></figcaption></figure>

## 5. Change the offset to exclude the first three Jobs

Our Attachment view will be displayed below the first three Jobs, so we need to exclude those from our list to avoid displaying duplicate content:

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.  Change the “Items to display” to 7 and the "Offset" to 3. Apply the changes.\
    \


    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2F5xlzrM0uLyWLbdINxLOT%2Fimage.png?alt=media&#x26;token=61e3446a-2a8e-4b82-a5ea-eec3b414a21d" alt=""><figcaption><p>Pager options settings</p></figcaption></figure>

## 6. Change the attachment settings

1.  Under "Attachment settings" in the centre column click the option: "Attach to:" **Not defined**.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FXzKD8ySBvNnEFO9fgm84%2Fimage.png?alt=media&#x26;token=5a653cf7-9d0e-4372-8a67-ec1e0f2c68be" alt=""><figcaption><p>Attach to "not defined" link</p></figcaption></figure>
2.  Select "Page". Apply the changes.

    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FfdHUMlOg0sCUzss2nw6H%2Fimage.png?alt=media&#x26;token=2a46bae0-8994-4ddd-9d16-6ecc6eb6d82f" alt=""><figcaption><p>Select Page</p></figcaption></figure>
3. Click "Attachment position:Before".
4. Select "After". Apply the changes.

![Image of Position: After](https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-f51575b6e5b001c1972fdc362b796ea3e03ad4e8%2FEx-6-3-Customised-News-17.png?alt=media)

## 7. Review your changes

1. Click the **Save** button to save your changes.
2. Return to the _Employment news_ page and review the changes.
3.  You may create more Jobs content to test it. Make sure you publish any new content before reviewing the _Employment news_ page.\
    \


    <figure><img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2FrbswRCpIhpx4dZ0S658G%2Fimage.png?alt=media&#x26;token=e7f57b14-28de-4e6c-8a75-1d74aa98fc7a" alt=""><figcaption><p>Final Views page</p></figcaption></figure>
