Drupal 8 User Guide: 9.3. Creating a Content List View

Drupal 8 User Guide: 9.3. Creating a Content List View


Creating a Content List View
with Blake Hall In this tutorial, we’re going to cover
how to create a content listing view. Our goal is that by the end
of this tutorial, you’ll know how to create
a page, listing vendors from our Anytown Farmers’ Market
site that will be automatically updated whenever a new vendor is added,
deleted or updated on the site. Before you get started
with this tutorial, you’ll probably want to make sure
you know what Views are from a conceptual level. You’ll also want to understand
the main parts that make up a View. Your site will need the core Views
and Views UI modules installed. They’re already installed, if you use the core standard installation
profile though. Another requirement is to have
a vendor content type with a URL and main image fields on your site. You can see the written version
of this tutorial for links to each of these prerequisites, if they’re unfamiliar to you. From our site, we’re going to start
the process of adding our View by going to Structure, Views,
and then the Add view button. When we click this button,
the Add view wizard appears. We’ll now fill in the fields
that we want to appear in our listing. The View name will be the label that is applied to this view
on Administration pages. Here, we’re going to use Vendors. The View settings, the type of information
that will be shown in this view is Content. Specifically, we’re going to restrict
our view to Vendor content items. We’re also going to specify that we’re going to sort
these vendor items by their title. Now we’re ready to move on
to the Page settings. We’re going to create a page to
display our view with the title Vendors. We’ll also use Vendors for the Path
this page will be available at. On our page,
we’re going to display a table listing with 10 items visible per page. We’ll also make sure
that we’ve enabled a pager so that users can view
the complete list of vendors. We’ll also create a menu link and
add our view to the main navigation menu. This menu link in main navigation
will have the link title Vendors. With our basic View settings
properly configured, we can now click Save and edit. Clicking Save and edit will take us
to the full View configuration page. Now, we’re ready to specify which fields will actually appear
in our table listing. Under Fields, we’ll click Add
from the dropdown button; the Add fields popup appears. We’ll enter the word Image
in the search field. We’ll check the main image
in the table and click Add and configure fields. The Configure fields popup then appears. We’ll configure this image
by removing the label value and using the Medium image style. Then we’ll make sure
the image links to the Content item. With these configuration settings
in place we can click Apply. Now, we’re going to add
the Body field to our view. Again, we’ll click Add
from the dropdown button, we’ll search for the Body,
check the box in the main table and click Add and configure fields. For the Body field configuration
we’ll again remove the label, we’ll set the formatter
to Summary or Trimmed, and then we’ll set the Trimmed limit
to 120-character maximum, and click Apply. Now, we’re back
at the View configuration page. You may notice that the title is
already provided by the default view in our field listing. We can configure the title by clicking
on Title under the field section here. On the Title configuration form
we’ll remove the label and then click Apply
to save our settings. Back at the View configuration page
you may notice that our fields
are not in the right order. Under this Add dropdown button,
if we click the dropdown arrow, we can rearrange our fields
by clicking rearrange. The correct order
we want to use is image first and then title and then body. With those changes made
we’ll click Apply to save our changes and go back
to the View configuration page. With our View settings in place
we’re ready to click Save to see our view in action. After our view has been saved, we’ll navigate back to the homepage
to see it on our website. Back on the homepage, notice in the main navigation menu
we now have this Vendors link. We can click Vendors in the main nav
and be taken to our view listing that shows our table display
that we just created. To recap, in this tutorial we created a
new view that displays a table listing with particular fields
from our Vendor content type.

Leave a Reply

Your email address will not be published. Required fields are marked *