Chapter 9: Creating Listings with Views

• Concept: Uses of Views
• Concept: The Parts of a View
• Creating a Content List View
• Duplicating a View
• Adding a Block Display to a View

Concept: Uses of Views

Prerequisite knowledge

• Concept: Modular Content
• Concept: Content Entities and Fields

What is a view?

A view is a listing of content on a website. The core Views module handles the display of views, and the core Views UI module allows you to create and edit them in the administrative interface. When you define views, you are interested in taking data from your website and displaying it to the user.

What types of data can be displayed using views?

You can create views to output practically any content entity that is stored in the system. For example, you can create the following lists for the farmers market site:

• Lists of vendors
• Lists of recipes
• Lists of the most recent content on the site
• Lists of users on the site

What are the ways data can be output using views?

A listing created by a view can be in any of the following forms:

• Table with sortable fields
• Grid layouts
• Teasers or pictures that link to articles
• Blocks
• JSON output
• RSS feeds
• Calendars
• On-screen slideshows

Related topics

• Concept: The Parts of a View
• Creating a Content List View

Concept: The Parts of a View

Prerequisite knowledge

• Concept: Content Entities and Fields
• Concept: Modular Content
• Concept: Uses of Views
• Concept: Paths, Aliases, and URLs
• Concept: Blocks

What are the parts of a view?

When you are editing a view in the administrative interface, you will see the following parts (or sections), which allow you to specify what data to output, in what order, and in what format:

• Display: Each view can have one or more displays, each of which produces one type of output. Options for display types include: Page;; Makes output at a particular URL, for the main page content at that URL. Block;; Makes output in a block, which can be placed on pages. Feed;; Makes an RSS or another type of feed. Attachment;; Makes output that you can attach to another display.
• Format: Depending on the display type, you can choose to output your data in a table, grid, HTML list, or another format. Some formats also give you a second choice that lets you output either rendered entities or fields; other formats do not give you this choice (for example, if you use a table format, you must always use fields).
• Fields: Depending on the format choice, you may be able to choose which content fields are output. For example, if you were making a view of recipe content items, in a block display you might show only the recipe names, while in a full page display you might also show an image field because you have more space.
• Filter criteria: Filters limit the data to be output, based on criteria such as whether the content has been published or not, the type of content, or a field value. For instance, to make a view of recipe content items, you would need to filter to the Recipe content type, and to published recipes. Filters can also be exposed, which means that users will have a form where they can choose their own filter values. You might use this on a Recipe page to let users filter for recipes with certain ingredients.
• Sort criteria: Defines the order to present the output, which can be based on any content field.
• Contextual filters: Contextual filters are like regular filters, except that the values come from the context of the view display, such as the full URL of the page being displayed, the current date or time, or some other value that can be detected by the view calculation.
• Relationships: Relationships allow you to expand what is displayed in your view, by relating the base content being displayed to other content entities. Relationships are created using fields on the base content that relate it to the other content; one example is that all regular content items have an author field, which references the user account of the person who authored the content. Once you have created a relationship, you can display fields from the referenced entity in the view.

Related topics

Creating a Content List View

Creating a Content List View

Goal

Create a page listing vendors that will be automatically updated whenever a vendor is added, deleted, or updated on the site.

Prerequisite knowledge

• Concept: Uses of Views
• Concept: The Parts of a View

Site prerequisites

• The core Views and Views UI modules must be installed. These are installed for you when you install with the core Standard installation profile.
• The Vendor content type must exist, with URL and Main image fields. Your site must have a couple of Vendor content items. See Adding a Content Type, Adding Basic Fields to a Content Type, and Creating a Content Item.
• The Medium (220x220) image style must be defined. This is created on your site when you install the core Image module (installed with the core Standard installation profile) but can be recreated if deleted. See Setting Up an Image Style.

Steps

1. In the Manage administrative menu, navigate to Structure > Views > Add view (admin/structure/views/add). The Add view wizard appears.

2. Fill in the fields as shown below.

   Field name	Explanation	Example value
   View basic information > View name	Name of the view that will be visible in the administration pages	Vendors
   View settings > Show	Type of information listed in the view	Content
   View settings > of type	Specify content type	Vendor
   View settings > sorted by	List order	Title
   Page settings > Create a page	Create a page that displays the view	Checked
   Page settings > Page title	Title show above the view	Vendors
   Page settings > Path	Address of the page	vendors
   Page settings > Page display settings > Display format	Type of list	Table
   Page settings > Items to display	Number of items visible on the page	10
   Page settings > Use a pager	Split up the list in several pages if there are more items	Checked
   Page settings > Create a menu link	Add the view page to the menu	Checked
   Page settings > Menu > Type	Type of menu item to create	Normal menu entry
   Page settings > Menu > Menu link title	Label of the link in the menu	Vendors
   Page settings > Menu > Parent	Menu in which to add the link	Main navigation

   

3. Click Save and edit. The view configuration page appears.

4. Under Fields, click Add from the dropdown button. The Add fields pop-up appears.

5. Enter the word "image" in the search field.

6. Check Main image in the table.

7. Click Apply. The Configure field: Content: Main Image pop-up appears.

8. Fill in the fields as shown below.

   Field name	Explanation	Example value
   Create a label	Add a label before the field value	Unchecked
   Image style	The format of the image	Medium (220x220)
   Link image to	Add a link to the content item	Content

9. Click Apply. The view configuration page appears.

10. Under Fields, click Add from the dropdown button. The Add fields pop-up appears.

11. Enter the word "body" in the search field.

12. Select Body in the table.

13. Click Apply. The Configure field: Content: Body pop-up appears.

14. Fill in the fields as shown below.

    Field name	Explanation	Example value
    Create a label	Add a label before the field value	Unchecked
    Formatter	The presentation of the field value	Summary or trimmed
    Trimmed limit:	The number of maximum characters shown	120

15. Click Apply. The view configuration page appears.

16. Under Fields, click Content: Title (Title). The Configure field: Content: Title pop-up appears.

17. Uncheck Create a label. This will remove the label that was created by the wizard.

18. Click Apply. The view configuration page appears.

19. Under Fields, click Rearrange in the dropdown button. The Rearrange fields pop-up appears.

20. Drag the cross bar handles of fields to put them into the right order: Image, Title, Body. As an alternative to dragging, you can click the Show row weights link at the top of the table and enter numerical weights (fields with lower or more negative weights will be shown first).

21. Click Apply. The view configuration page appears.

22. Optionally, click Update preview for a preview.

23. Click Save.

24. Navigate to the homepage and click Vendors from the main navigation to see the result.

Expand your understanding

The link to the view in the main navigation will probably not be in the right place. Change the order of the menu links in the main navigation. See Changing the Order of Navigation.

Videos

Creating a Content List View

Duplicating a View

Goal

Create a page listing recipes by duplicating the existing Vendors view. Modify the page so that the recipes are displayed in a grid and can be filtered by ingredients.

Prerequisite knowledge

• Concept: Uses of Views
• Concept: The Parts of a View
• Creating a Content List View

Site prerequisites

• The Vendor and Recipe content types must exist; both must have Main image fields, and the Recipe content type must have an Ingredients field. Your site must also have a couple of Recipe content items. See Adding a Content Type, Adding Basic Fields to a Content Type, Setting Up a Taxonomy, Changing Content Entry Forms, and Creating a Content Item.
• The Vendors view must exist. See Creating a Content List View.

Steps

1. In the Manage administrative menu, navigate to Structure > Views (admin/structure/views). Find the view "Vendors" and click Duplicate in its dropdown button. (Note that the names of views that came with your installation profile are shown in English on this page; see Concept: User Interface, Configuration, and Content translation for an explanation.)

2. Name the duplicate "Recipes" and click Duplicate. The view configuration page appears.

3. To change the title of the view page to "Recipes", click Vendors in the Title field under Title. The Page: The title of this view pop-up appears. Enter "Recipes". Click Apply.

4. To change from a table to a grid format, click Table in the Format field under Format. The Page: How should this view be styled pop-up appears. Check Grid and click Apply. The Page: Style options pop-up appears. Retain the default values and click Apply.

5. To retain only the title and image fields for the Recipes view, click Content: Body under Fields. Click Remove in the pop-up that appears.

6. To change the content type filter to use the Recipe content type, click Content: Type (=Vendor) under Filter criteria. In the Configure filter criterion: Content: Type pop-up, check Recipe and uncheck Vendor. Click Apply.

7. To add a further filter that is exposed to visitors, click Add in the dropdown button under Filter criteria. Search for "ingredients" and check "Ingredients (field_ingredients)". Click Add and configure filter criteria.

8. The appearing pop-up offers extra settings on vocabulary and selection type. Click Apply and continue. The next pop-up allows you to expose this filter to visitors. Fill in the fields as shown below, and click Apply.

   Field name	Explanation	Example value
   Expose this filter to visitors, to allow them to change it	Allow visitors to filter and search	Checked
   Required	Whether a value has to be provided or not	Unchecked
   Label	Label shown for this filter on the view page	Find recipes using...

   

9. To change the Path label field to "Recipes", click "/vendors" in the Path field under Page settings. In the pop-up that appears, enter the path "recipes" and click Apply. Note that when editing a view, you enter paths without the leading "/", unlike on other administrative pages (such as when providing a path to a content item page).

10. To change the menu link title, click "Normal: Vendors" in the Menu field under Page settings. In the pop-up that appears, change the title to "Recipes" and click Apply.

11. In order to use Ajax (see Ajax entry in the Glossary) to make filtering and paging faster for users, under Advanced > Other, click No in the Use AJAX field. Check Use AJAX in the pop-up that appears, and click Apply.

12. Click Save to save the view.

13. Go back to the home page and click Recipes in the navigation to view the new Recipes page.

Expand your understanding

The link to the view in the main navigation will probably not be in the right place. Change the order of the menu links in the main navigation. See Changing the Order of Navigation.

Related concepts

• Planning your Content Structure
• Ajax entry in the Glossary

Videos

Duplicating a View

Adding a Block Display to a View

Goal

Add a block display to the Recipes view to display the most recent recipes in a sidebar, and change its configuration without changing the existing Recipes page view.

Prerequisite knowledge

• Concept: Uses of Views
• Concept: The Parts of a View
• Creating a Content List View

Site prerequisites

• The Recipe content type must exist, it must have a Main image field, and your site must have a couple of Recipe content items. See Adding a Content Type, Adding Basic Fields to a Content Type, Changing Content Entry Forms, and Creating a Content Item.
• The Thumbnail (100x100) image style must be defined. This is created on your site when you install the core Image module (installed with the core Standard installation profile) but can be recreated if deleted. See Setting Up an Image Style.
• The Recipes view must exist. See Creating a Content List View and Duplicating a View.

Steps

1. In the Manage administrative menu, navigate to Structure > Views (admin/structure/views). Find the view "Recipes" and click Edit from its dropdown button. Alternatively, navigate to the Recipes page in the main site navigation, and click the Edit view contextual link in the main area of the page. See Concept: Administrative Overview for information about contextual links.
2. Create a new block display by clicking Add under Displays. Click Block from the list of links that appears. The new display is created, and the focus is automatically switched to its configuration.
3. To change the title of this display, click Block in the Display name field. The Block: The name and the description of this display pop-up appears. Change the Administrative name to "Recent recipes". Click Apply.
4. To change the title of the block, click Recipes in the Title field under Title. In the pop-up that appears, select This block (override) from the For select list. Change the Title field to "New recipes" and click Apply (this display).
5. To change the block's style, click Grid in the Format field under Format. In the pop-up that appears, select This block (override) from the For select list. Select Unformatted list and Click Apply (this display). You can further configure the style options in the next pop-up that appears. Then click Apply.
6. To configure the image field, click Content: Main image under Fields. In the pop-up that appears, select This block (override) from the For select list. Select Image style Thumbnail (100x100). Click Apply (this display).
7. To remove ingredients as a filter, click Content: Ingredients (exposed) under Filter criteria. In the pop-up that appears, select This block (override) from the For select list. Click Remove at the bottom.
8. To configure how you want the content to be sorted in the view, click Add from the dropdown button under Sort criteria. In the pop-up that appears, select This block (override) from the For select list. Check Authored on (in the Content category), and then click Add and configure sort criteria.
9. In the appearing configuration pop-up, select Sort descending to have the most recent recipes appear first. Click Apply.
10. To specify the number of items to be displayed, click Mini in the Use pager field under Pager. In the pop-up that appears, select This block (override) from the For select list. Under Pager, select Display a specified number of items. Click Apply (this display). In the Block: Pager options pop-up, provide "5" as the value for Items to display. Click Apply.
11. Click Save. You will either see the view editing page again, or the Recipes page, depending on what you did in step 1. You should also see a message saying that the view has been saved.
12. Place the "Recipes: Recent Recipes" block in the Sidebar second region. See Placing a Block in a Region. Navigate to the site's home page to see the block.

Videos

Adding a Block Display to a View