# 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>

![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)
