Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Creating a Content List View

0 (0 Likes / 0 Dislikes)
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.

Video Details

Duration: 4 minutes and 9 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: drupalizeme on Feb 1, 2018

Creating a Content List View

Caption and Translate

    Sign In/Register for Dotsub to translate this video.