[[views-create]]
=== Creating a Content List View

[role="summary"]
How to create a content list view.

(((View,creating)))
(((Content list view,creating)))
(((Views module,creating a view)))
(((Listing content,using Views module to)))
(((Image module,creating a view)))
(((Module,Views)))
(((Module,Image)))

==== Goal

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

==== Prerequisite knowledge

* <<views-concept>>
* <<views-parts>>

==== 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 <<structure-content-type>>,
<<structure-fields>>, and <<content-create>>.

* 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
<<structure-image-style-create>>.

==== Steps

. In the _Manage_ administrative menu, navigate to _Structure_ > _Views_ > _Add
view_ (_admin/structure/views/add_). The _Add view_ wizard appears.

. Fill in the fields as shown below.
+
[width="100%",frame="topbot",options="header"]
|================================
| Field name | Explanation| Example value
| View name | Name of the view that will be visible in the administration pages | Vendors
| Show | Type of information listed in the view | Content
| of type | Specify content type | Vendor
| sorted by | List order | Title
| Create a page | Create a page that displays the view | Checked
| Page title | Title show above the view | Vendors
| Path | Address of the page | vendors
| Display format | Type of list | Table
| Items to display | Number of items visible on the page | 10
| Use a pager | Split up the list in several pages if there are more items | Checked
| Create a menu link | Add the view page to the menu | Checked
| Menu | Menu in which to add the link | Main navigation
| Link text | Label of the link in the menu | Vendors
|================================
+
--
// Add view wizard.
image:images/views-create-wizard.png["Add new view wizard",width="100%"]
--

. Click _Save and edit_. The view configuration page appears.

. Click _Add_ from the dropdown button in the _Fields_ section. The _Add
fields_ pop-up appears.

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

. Check Main image in the table.

. Click _Apply_. The _Configure field: Content: Main Image_
pop-up appears.

. Fill in the fields as shown below.
+
[width="100%",frame="topbot",options="header"]
|================================
| 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
|================================

. Click _Apply_. The view configuration page appears.

. Click _Add_ from the dropdown button in the _Fields_ section. The _Add
fields_ pop-up appears.

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

. Select _Body_ in the table.

. Click _Apply_. The _Configure field: Content: Body_ pop-up
appears.

. Fill in the fields as shown below.
+
[width="100%",frame="topbot",options="header"]
|================================
| 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
|================================

. Click _Apply_. The view configuration page appears.

. Click _Content: Title (Title)_ in the _Fields_ list. The
_Configure field: Content: Title_ pop-up appears.

. Uncheck _Create a label_. This will remove the label that was created by the
wizard.

. Click _Apply_. The view configuration page appears.

. Click _Rearrange_ from the dropdown button in the _Fields_ section. The
_Rearrange fields_ pop-up appears.

. Drag the fields into the right order: Image, Title. Body.

. Click _Apply_. The view configuration page appears.

. Optionally, click _Update preview_ for a preview.

. Click _Save_.
+
--
// Completed vendors view administration page.
image:images/views-create-view.png["Vendors view configuration page", width="100%"]
--

. Navigate to the homepage and click Vendors from the main navigation to see
the result.
+
--
// Completed vendors view output.
image:images/views-create-view-output.png["Vendors view output", width="100%"]
--

==== 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 items in the main navigation. See
<<menu-reorder>>.

//==== Related concepts

// ==== Additional resources


*Attributions*

Written/edited by https://www.drupal.org/u/batigolix[Boris Doesborg]
and https://www.drupal.org/u/jhodgdon[Jennifer Hodgdon].
