# Exercise 8.8: Create a list of users

In this exercise, you’ll make a grid display of user profile pictures like this:

![Image of Grid display user profile images](https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-9bf7bf900043cda7617256a6f9a3d2a3c917f489%2FEx-8-8-User-List-6.png?alt=media)

1. Go to _Structure_ → _Views_ → **Add view**.
2.  Configure your view with the following settings:

    * **View name:** Members
    * **Show** Users **sorted by** Newest first.
    * Under _Create a page_, ensure the _Display format_ is Unformatted list of _Fields_.

    <img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-acec41c3b5962bd57e449856925a47d4f3ae739e%2FEx-8-8-User-List-2.png?alt=media" alt="Image of Create View" data-size="original">
3.  Keep the remaining defaults and click **Save and edit**. You are now in the **Advanced settings**. At the bottom, you can see a **Preview** of your new view. What do you see? We will change to show usernames and user pictures.

    <img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-eb1f9df0528a8c3cfee30f9f25a1c7cc205196b4%2FEx-8-8-User-List-3.png?alt=media" alt="Image of Members View settings" data-size="original">
4. Under **Format** - Click to “Unformatted list”. This opens a dialog window. **Format** to _Grid._
5. Select _Grid_.
6. Set **Number of columns** to 2.
7. Leave the other settings as their defaults.
8. Click **Apply**.

## Add user picture

Next, we’ll add the user picture.

1. Under the **Fields** settings, click **Add.**.
2. Search for “profile” and select _Profile Image_.
3. Click **Add and configure fields.**.
4. Select **Medium (220 x 220)** _Image style_.
5. Set the image to **Link to** _Content_.
6. Click **Apply**.

![Image of Add image to Member view](https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-471dfc6182baa5dbae20a5f484a8bb7dccad586d%2FEx-8-8-User-List-4.png?alt=media)

## Add link to Main navigation

Finally, we’ll add a link to the main navigation.

1. Under _Page settings_ → _Menu_ click the **“No menu”** link.
2. **Type:** Normal menu entry.
3. Add a _menu link title_ **Members**.
4. Scroll down to **Menu** to select _\<Main navigation>._
5.  Click **Apply.**

    <img src="https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-fc32668edb341421fc1bcd9b1308d1c3acfad14a%2FEx-8-8-User-List-5.png?alt=media" alt="Image of Add menu to Main navigation" data-size="original">
6. Scroll down to the Views **Preview** and review if the results are as expected. Click **Save**.
7. Test your new view. In the main navigation, you should have a menu link to “Members”, and a page available at [http://example.com/members](http://example.com/members)

![Image of Grid display user profile images](https://3186608908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzAsrTcKaHnLDg-7ALW%2Fuploads%2Fgit-blob-9bf7bf900043cda7617256a6f9a3d2a3c917f489%2FEx-8-8-User-List-6.png?alt=media)
