Difference between revisions of "Drupal/C2/Displaying-Contents-using-Views/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of Script:''' Displaying Contents using Views '''Keywords:''' Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added events {| style="border-spa...")
 
 
Line 24: Line 24:
 
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about
 
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about
  
* Views
+
* '''Views'''
* A page with teaser and
+
* A page with '''teaser''' and
* A Simple block view
+
* A simple '''block view'''
 
+
 
+
  
 
|-
 
|-
Line 35: Line 33:
 
System requirement
 
System requirement
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 
  
 
* '''Ubuntu Linux Operating System'''
 
* '''Ubuntu Linux Operating System'''
Line 58: Line 55:
 
* It can''' select, order, filter''', and''' present''' our contents, based on the criteria we define
 
* It can''' select, order, filter''', and''' present''' our contents, based on the criteria we define
 
* '''Views''' are essentially''' Reports''' or''' Query Results''' as known in other software
 
* '''Views''' are essentially''' Reports''' or''' Query Results''' as known in other software
 
 
  
 
|-
 
|-
Line 76: Line 71:
 
* where the book has 100 or more pages and
 
* where the book has 100 or more pages and
 
* the covers are red
 
* the covers are red
 
 
  
 
|-
 
|-
Line 103: Line 96:
 
* Apply a''' Filter''' and then
 
* Apply a''' Filter''' and then
 
* '''Sort''' the results
 
* '''Sort''' the results
 
 
  
 
|-
 
|-
Line 244: Line 235:
 
* in the '''Block regions'''
 
* in the '''Block regions'''
 
* or sidebars of our website.
 
* or sidebars of our website.
 
 
  
 
|-
 
|-
Line 253: Line 242:
 
* come out on the''' sidebar''' on every''' page''' that it’s on,
 
* come out on the''' sidebar''' on every''' page''' that it’s on,
 
* and update the''' sidebar'''.
 
* and update the''' sidebar'''.
 
 
  
 
|-
 
|-
Line 403: Line 390:
 
In this tutorial we have learnt about
 
In this tutorial we have learnt about
  
* Views
+
* '''Views'''
* A page with teaser and
+
* A page with '''teaser''' and
* A Simple block view
+
* A simple '''block view'''
 
+
 
+
  
 
|-
 
|-
Line 420: Line 405:
 
* adapted from Acquia and OSTraining
 
* adapted from Acquia and OSTraining
 
* and revised by Spoken Tutorial Project, IIT Bombay.
 
* and revised by Spoken Tutorial Project, IIT Bombay.
 
 
  
 
|-
 
|-

Latest revision as of 18:21, 15 July 2016

Title of Script: Displaying Contents using Views

Keywords: Drupal, Video Tutorial, Views, Page, Teasers, Block View, Recently added events


Visual Cue
Narration
Slide 1:

Displaying Contents using Views

Welcome to the Spoken tutorial on Displaying Contents using Views
Slide 2:

Learning Objectives


In this tutorial, we will learn about
  • Views
  • A page with teaser and
  • A simple block view
Slide 3:

System requirement

To record this tutorial, I am using
  • Ubuntu Linux Operating System
  • Drupal 8 and
  • Firefox Web browser

You can use any web browser as per your choice.

Slides 4:

Views


First let us learn about Views.
  • Views is used for displaying a collection of similar content
  • Views can be displayed in various formats, such as -
  • Tables
  • Lists
  • Gallery etc.
  • It can select, order, filter, and present our contents, based on the criteria we define
  • Views are essentially Reports or Query Results as known in other software
Slides 5:

Example


For example,

If you go to a library and ask the librarian for a stack of books with the following criteria:

  • published before 1905
  • whose authors last name starts with “M”
  • where the book has 100 or more pages and
  • the covers are red
You will be sent out of the library for asking that.


But in Drupal, it can be done very easily with Views.

Slides 6:

The workflow of Views is


We have a simple 5-step process for setting up our Views.


The workflow of Views is

  • Choose your Display
  • Set your Format
  • Figure out your Fields
  • Apply a Filter and then
  • Sort the results
Now let us open our website which we created earlier.
Time Narration
00:05 Let’s learn to create the standard Views on a simple Drupal site.
00:33 Click on Structure, and then click on Views.
00:37 Drupal has many built-in Views.


For example - the Content View allows administrators to administer the content.

00:47 Same thing with Custom block library, Files, Frontpage, People, Recent comments, Recent content, Taxonomy terms, Who’s new and Who’s online.
00:59 These are all Views that come with Drupal, which we can update or edit.
01:22 First, we will create a simple page with Teasers.


It will be a landing page for our Events Content type.

01:30 Click Add new view and let’s name it as Events Sponsored.
01:37 Change the Content of type from All to Events and sorted by as Newest first.
01:45 Click Create a page.


Leave Display format as Unformatted list of teasers.


This is because we’ve already set up the Teaser mode in our Manage display.

1:55 Check Create a menu link.


Then under the Menu drop-down, choose Main navigation.

01:59 This will help us to see all the Events that we have added to our site.
02:04 Click Save and edit.


Now we have access to the screen that we mentioned in the introduction.

02:12 This screen displays a Page, whose Format is an Unformatted list of Teasers.
2:17 We don’t need any fields here because we have set up our Teaser mode.


The FILTER CRITERIA is Published events.


And the SORT CRITERIA is the publication date in descending order.

02:31 If we scroll down, we can see a quick preview here.
02:36 If you don’t like this, it’s simple to change.


We’ll cover that in another tutorial.

02:42 For now, let us click on Save.


Click on Back to site.


We have a new tab in the main menu called Events, with a listing of all of our Events.

02:59 Here are all the Event logos with different shapes and sizes.
03:03 We have the Event Website and the Event Date.


Remember, we can update this in our Teaser mode for the Events Content type, if we want to change it.

03:15 That’s it! This is the landing page for all of our Events.
Time Narration
00:05 One of key features in Drupal is the ability to place information
  • in the Block regions
  • or sidebars of our website.
00:14 Previously, if we added a new Event, we would have to
  • come out on the sidebar on every page that it’s on,
  • and update the sidebar.
00:22 Now, Views updates our content automatically.
00:28 Click on Structure and then on Views.
00:33 Since we’re coming back here a lot, let’s add it to our shortcuts by clicking the star.


Now click on Add new view.

00:42 In the View name, type Recent Events Added.


This’ll be a list of the latest Events we’ve added to our site.

00:52 Now, change Content of type from All to Events.
00:56 Choose Create a block.


Leave the sorted by as Newest First.

01:04 In Block title, type Recently Added Events, just to show that we can have a different name and title.
01:13 Drupal allows us to create different styles of Views.


We’ll leave this as an Unformatted list of titles, with 5 Items per block.

01:23 Don’t check Use a pager.


If we do, we will get page numbers like Page one of three, two of three, etc., at the bottom of our block.

01:31 Click Save and edit.


Let’s look at our preview.


It displays a list of titles of the most recently added Events.

01:42 Here, we can see that it displays a Block.


FORMAT is an Unformatted list.


FIELDS are the Title fields.


And the FILTER CRITERIA is the Published Events in descending order of their publication date.

01:55 Let’s click Save.


This will not show up anywhere, because we haven’t placed the block yet.

02:06 Click on Structure, and Block layout.


Let’s place the block in the Sidebar first region.

02:16 Click on Place block.
02:20 When we scroll down, we can see the block called Recent Events Added.


Click Place block.

02:27 Since we haven’t learnt about blocks in detail yet, we will just click Save for now.


It will show up on every page. We will edit that later.

02:35 It’s going to appear in the order after Search.


Click Save blocks.

02:43 Click Back to site.


And we have a new block on every page that gives us the most recently added Events on our site.

02:52 There’s no need to configure this again.


You can place it wherever you want, and it will always be up-to-date.

03:02 So that’s an example of a Block view using our Events Content type in publication date order.


With this we come to the end of this tutorial.

Slide 7:

Summary


Let us summarize.


In this tutorial we have learnt about

  • Views
  • A page with teaser and
  • A simple block view
Slide 8:

Acknowledgement


This video is
  • adapted from Acquia and OSTraining
  • and revised by Spoken Tutorial Project, IIT Bombay.
Slide 9:

Acknowledgement


The video at this link summarises the Spoken Tutorial project.


Pls download and watch it.

Slide 10:

Spoken Tutorial Workshops


The Spoken Tutorial Project Team conducts workshops and gives certificates.


For more details, please write to us.

Slide 11:

Acknowledgement


Spoken Tutorial Project is funded by
  • NMEICT, Ministry of Human Resource Development and
  • NVLI, Ministry of Culture

Government of India.

This is Varsha Venkatesh signing off.


Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst