CMS

Week 8

Basic Views

What are views?

Views?

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.

Views?

Using the Views module, you can fetch content from the database of your site and present it to the user as lists, posts, galleries, tables, maps, graphs, menu items, blocks, reports, forum posts, etc.

 

Different content types including nodes, users, and other bundles can be displayed.

 

 

https://www.drupal.org/docs/8/core/modules/views​

Types of view

Pages

  • Have their own /path-url

 

Blocks

  • Are placed through /stucture/blocks

 

(There's more!)

Settings

UI

How to

How to

Let's create a new View to display all of our cars.

 

We will create a Page view to display all of our cars in Teaser form on the url /cars

How to: Page view

  1. Go to /admin/structure/views
  2. Click Add view
    1. Enter a name: Cars
    2. Set Show content to Cars
    3. Click Create a page
    4. Set Display format to Unformatted list of Teaser
    5. Set Items to display to 20
    6. Click Create a menu link
    7. Set Menu to Main navigation
  3. Hit Save and edit

How to: Page view

  1. You can now go visit your new view over at /cars
  2. You will probably want to change the order/display of your car teasers
    1. Go to /admin/structure/types/manage/car/display/teaser
    2. Re-arrange/Change display options

How to

Now that we have a page showing teasers on /cars, we want to add a small list to our homepage showing the latest entries.

 

For this we will create a new block-view.

How to: Block view

  1. Go to /admin/structure/views
  2. Find the view Cars and hit Edit
  3. Under displays, click Add -> Block
  4. Set block name: Latest cars
  5. Change pager options:
    1. For: This block (override)*
    2. ​Use pager:  Display a specified number of items
    3. Set items to 5
  6. Hit Save

 

*IMPORTANT

How to: Block view

  1. Go to /admin/structure/block
  2. On Content hit Place block
  3. Find your new Cars block and hit Place
    1. Uncheck Show page title
    2. Set page restriction to: show on <front> only
  4. ​Hit Save

 

The new block is now available on the home page.

Opt.: How to: Block view

  1. You can add row/column classes through the UI
    1. ​Next to Format:Unformatted list, hit Settings
    2. Set row class: 'col-md-6', 'col-sm-12', etc
  2. Under Advanced
    1. ​CSS class
      1. ​Enter 'row'
Made with Slides.com