As seen in the screenshot from the previous exercise, the view we built shows the site administrator user. If we had multiple users in the Site Administrator role, all administrators would be listed here, in our view. In this exercise we hide those administrator users, by adding a role filter to our view.
Go to Structure → Views and locate our Members view. Click the Edit button.
Click the Add button next to the Filter Criteria section.
Search for “roles” and select Roles filter. Apply the changes.
In the next screen, select Is none of operator and select the Site Builder in the Options list.
Apply your changes and preview the result below.
Save the view and review the Members page. You shouldn’t see any users who have the Site Builder role.
With the member list you created a grid-based view of members’ profiles. Now, create a gallery of images from the News and Media published on your site.
If you don’t have News and Media articles with images, use the Devel Generate tool to create them.
Alter the display of the Thumbnails to show up as square images.
Make a view to display the images in a grid to create a simple gallery.
Previously, you added fields to content types. You can also add fields to user profiles. This means you can let users share information about themselves and then you can display it. You can also control permissions so only trusted users can see profiles. Below you can see the profiles will have a text field for description and also a list of interests and a profile picture.
Go to Configuration → People → Account settings → Manage fields.
This interface is similar to the one for adding fields to content, now you can Add a new field with the following settings:
Type: Text → Text (plain, long)
Label: About me
Machine Name: field_about_me
Go to the Manage form display tab and set the Widget for About me to: Text area (multiple rows).
Review the User settings. We will keep all the default settings, however, review the options before you save.
Click Save settings.
We need to create a new “Interests” vocabulary we can use in this case.
Go to Structure → Taxonomy → Add vocabulary.
Name: Interests
Save the vocabulary
At this stage we can decide not to add any terms to the vocabulary, rather rely on users to add them when they create or update their profile.
Go back to Configuration → People → Account settings → Manage fields.
Add a new field:
Type: Reference → Taxonomy term
Label: Interests
Allowed number of values: Unlimited
Create referenced entities if they don't already exist: Yes
Vocabulary: Interests
Widget: Select Autocomplete (Tags style). This can be configured after you add the field, from the Manage form display tab.
Save settings.
Return to the front page.
Click Your username in the top administration menu, then View profile, then the Edit profile tab.
At the bottom of the form you can see the options available.
Fill in some text for About me and type in tags (comma-separated for multiple tags) for Interests, such as Jogging, Sailing, Drupal.
Under Picture, upload an image if you haven't already.
Save.
Click the View tab and now you can view the admin profile.
You can also manage the display of the fields, for example hiding the label. As your Drupal skills improve, you can make changes to the site design through Theming to alter the way this information looks; or change what displays through Manage display configuration pages.
User profiles currently list all content in one column. In this exercise we’ll re-arrange the profile information into two columns. We’ll change the layout of user profiles using Display suite.
Review the current layout. Click on a member profile.
Go to Administration → Configuration → People → Account settings and click Manage display tab.
You’ll see that the secondary tabs are missing and we cannot select a custom view mode. Let’s separate our display into a custom view mode User account. This separation could allow us to reuse the new View mode later on, if we needed to.
Click the Custom display settings vertical tab and select to enable the User account view mode:
Scroll down and click Save. After saving your changes, you’ll notice the secondary tabs appear, allowing you to switch to customise the User account view mode:
Click the User account tab.
Change the layout to Two columns (Display suite):
After saving your changes, review the Field section, you’ll see that it now shows additional regions, such as:
Left
Right
Disabled (this special area shows any fields excluded from display)
The Current layout thumbnail shows the layout of current view mode
When the manage display page reloads, you can reorder the fields to match the screenshot:
Move any fields not shown in the screenshot into the disabled region.
Adjust label display as displayed in the screenshot above.
Save your changes and review the outcome by reviewing your own profile page
Site visitors would like to see who else is a member on the site. This also promotes a sense of community. This list should show profile images displayed in a grid and username, and link to the user’s account page.
As you work, consider how you can use a similar process to make an image gallery on a site.
In this exercise, you’ll make a grid display of user profile pictures like this:
Go to Structure → Views → Add view.
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.
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.
Under Format - Click to “Unformatted list”. This opens a dialog window. Format to Grid.
Select Grid.
Set Number of columns to 2.
Leave the other settings as their defaults.
Click Apply.
Next, we’ll add the user picture.
Under the Fields settings, click Add..
Search for “profile” and select Profile Image.
Click Add and configure fields..
Select Medium (220 x 220) Image style.
Set the image to Link to Content.
Click Apply.
Finally, we’ll add a link to the main navigation.
Under Page settings → Menu click the “No menu” link.
Type: Normal menu entry.
Add a menu link title Members.
Scroll down to Menu to select <Main navigation>.
Click Apply.
Scroll down to the Views Preview and review if the results are as expected. Click Save.
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
