Views function (actually it is a module) is very powerful in Drupal. Many data visualization effects can be achieved with this function. So here is how I used Views function with the Grid format to create an “Our Team” page as shown below:
From above you can see that every member has their name, photo and position. Click on the name it will bring you to each member’s web bio page, as shown here.
Based on your own needs, you can add more items, such as email, phone number, etc. The following is how we are going to do this:
Step 1: create a new content type called “Team Profile” and add different fields as needed.
To create a new content type, go to Structure -> Content Types. In this new content type, you want to have the title as people’s full names. Then you want to add an image field “Photo” and set its type as image. After this you want to add other text fields, based on your website needs. In this case, I only added three more text fields: Last Name, Position, and About. I set Last Name and Position as short text, and About as Long text, since About will be a short web bio for each person. I also deleted the body field.
Step 2: set display options for the new content type “People Profile”.
Click on “Manage Display” tab for this content type of “People Profile”, you will see there are dropdown lists for each label and format. Select “Hidden” for the labels of Photo and Last Name. Select “Inline” for the label of Position. Select “Hidden” for the format of Last Name. Leave all other settings as is.
Step 3: fill in each member’s information.
Go to Content -> Add Content, click on “People Profile” and you will see a blank member’s profile for you to fill in. Type in the name, position and bio. Upload the member’s photo. Click on Save.
Step 4: create a new View for the “Our Team” Page.
Go to Structure -> Views -> Add new view. Type in “Our Team” as the view name. For Machine readable name, type in the same words but without spaces ( a machine readable name must only contain lowercase letters, numbers, and underscores.).
Check “Create a page”. You can now give a page tile to this view page. Here we give it the name of “Our Team”. You will see the path to this page is http://yourdrupalsite.com/ourteam. Change the value for “Items to display” as 0 if you want all members to be displayed on the same page.
Check “Create a menu link”.
We don’t need to check “Create a block” since we are not creating a views block here.
Click on “Continue and edit”.
Step 5: set up the view.
On the next page, under Format, choose Show: Fields, then choose “Grid”.
Click on Settings to set the “Number of Columns” for this grid view as 3. You can change it to other numbers depending on your needs of the page.
After that, click on “Filter Criteria”, then search for “type” to find “Content: Type”. Select “Content: Type” then click on “Apply”. Then on the next page, choose Operator as “Is one of”. Choose Content types as “Team Profile”. Click on “Apply (this display)”.
On the edit views page, on the right of “Fields”, click on “Add”. Add fields of “Content: Title”, “Content: Photo” and “Content: Position”. Uncheck “Create a label” for content: Title and Content: Photo.
To list all members alphabetically by their last names, click on “Add” next to “Sort criteria”. Search “Content: Last Name”. Select Content: Last Name (field_profilename) and click on “Apply (this display)”. On the next page, you can choose either ascending or descending. Click on “Apply (all displays)”.
Click on “Save” to save the new view page.
Step 6: styling the grid view.
Now you have the Our Team page with every member’s information. But you find it has the table borders. Also the columns are not evenly distributed. We need to get rid of the borders of the grid and set the table columns as evenly distributed- because the grid view is basically a table. To solve these problems, we need to add CSS styles for this view grid. The way to do it, is to add several lines of css in the css file under your theme folder:
.views-view-grid {
border:0 !important;
width:100%;
}
.views-view-grid tr, .views-view-grid td {
border:0;
}
.views-view-grid td{
width: 33%;
}
Note: here I defined the table width as 100% and each column width as 33% because I set the grid as 3 item per row.
Step 7: configure where you want this new views page to be linked.
Now you have already created the new views page of “Our Team”. You have also created a menu link for this page. The next step is to go to Structure -> menus -> main menu, and move this Our Team menu link to wherever you want.
Now you have a dynamic auto-generated “Our Team” page on your site. Any time when you need to add, edit, or delete a member’s profile, you only need to go to that member’s profile page and make the changes there. The changes will automatically appear on your “Our Team” page.
