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

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.

   
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.

   
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

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.

   
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