Difference between revisions of "Drupal/C2/Modifying-the-Display-of-Content/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{| border = 1
 
{| border = 1
−
| Time
+
| '''Time'''
−
| Narration
+
| '''Narration'''
  
 
|-
 
|-
Line 10: Line 10:
 
| 00:06
 
| 00:06
 
| In this tutorial, we will learn about:
 
| In this tutorial, we will learn about:
−
* '''Displays'''
+
'''Displays'''
−
* Managing '''Full content display''' and
+
Managing '''Full content display''' and
−
* Managing display '''Teaser'''.
+
Managing display '''Teaser'''.
  
 
|-
 
|-
 
| 00:16
 
| 00:16
 
| To record this tutorial, I am using:
 
| To record this tutorial, I am using:
−
* '''Ubuntu Linux''' Operating System
+
'''Ubuntu Linux''' Operating System
−
* '''Drupal 8''' and
+
'''Drupal 8''' and
−
* '''Firefox''' Web browser.
+
'''Firefox''' Web browser.
  
 
|-
 
|-
Line 523: Line 523:
 
|-
 
|-
 
| 11:17
 
| 11:17
−
| This makes the''' logo''' as a''' link''' straight into the content item. Now click''' Update'''.
+
| This makes the''' logo''' as a''' link''' straight into the content. Now click''' Update'''.
  
 
|-
 
|-
Line 548: Line 548:
 
| 11:47
 
| 11:47
 
| Now, our ''' Teaser mode''' should have:  
 
| Now, our ''' Teaser mode''' should have:  
−
* the''' Logo''' on the left,  
+
the''' Logo''' on the left,  
−
* the''' Website''',  
+
the''' Website''',  
−
* the''' Date''' and  
+
the''' Date''' and  
−
* the''' Description''' on the right, with the''' Links'''.
+
the''' Description''' on the right, with the''' Links'''.
  
 
|-
 
|-
Line 704: Line 704:
 
| 14:46
 
| 14:46
 
| In this tutorial, we have learnt about:
 
| In this tutorial, we have learnt about:
−
 
+
'''Displays'''
−
* '''Displays'''
+
Managing '''Full content display''' and
−
* Managing '''Full content display''' and
+
Managing display '''Teaser'''.
−
* Managing display '''Teaser'''.
+
  
 
|-
 
|-
Line 724: Line 723:
 
| 15:36
 
| 15:36
 
| Spoken Tutorial Project is funded by-
 
| Spoken Tutorial Project is funded by-
−
 
+
NMEICT, Ministry of Human Resource Development and
−
* NMEICT, Ministry of Human Resource Development and
+
NVLI, Ministry of Culture, Government of India.
−
* NVLI, Ministry of Culture, Government of India.
+
  
 
|-
 
|-

Latest revision as of 17:43, 24 March 2017

Time Narration
00:01 Welcome to the Spoken tutorial on Modifying the Display of Content.
00:06 In this tutorial, we will learn about:

Displays Managing Full content display and Managing display Teaser.

00:16 To record this tutorial, I am using:

Ubuntu Linux Operating System Drupal 8 and Firefox Web browser.

00:26 You can use any web browser as per your choice.
00:31 Let us open our website which we created earlier.
00:35 Now, we have our content. Let’s see how it actually looks and how Drupal renders it to the page.
00:42 Note that in the Teaser mode, we get the Title and the Body with a Read more.
00:49 As we scroll down, we can also see all of our new content here.
00:55 By default, Drupal outputs the last 10 nodes created that have been promoted to the Homepage.
01:03 Notice, there is some pagination down here at the bottom- page 1, 2, 3, Next and Last.
01:12 If we click on Last, we will see a listing of the nodes in Teaser mode, with a Read more after the Title.
01:20 This is not appealing.
01:22 Drupal allows us to set up what it calls “View modes”.
01:27 Click on Structure and then Content Types.
01:31 Now, let’s update the layout for our 'Events' Content type.
01:36 Click on the drop-down, then click on the Manage display.
01:41 Notice here at the top, on the Manage display tab, there is a Default and a Teaser.
01:48 Default is the default layout – we are going to add one of the Full view layout.
01:55 Next is the Teaser layout. Let’s click on Teaser.
02:00 In the Teaser mode, the only thing that is visible is the Event Description. And the Links, which is the Read more link.
02:09 Here it says "Trimmed limit: 600 characters".
02:14 We will update some of these things to make the Teaser mode for our 'Event' Content type look better.
02:21 Before we proceed, we need to understand that Drupal gives us what is called Layouts.
02:28 Let’s click on Structure and Display modes.
02:32 Then click on View modes. Notice, there is Form modes as well.
02:38 This Form modes is the layout for how data is entered.
02:43 This View modes is the layout for how data is viewed.
02:48 Click on View modes.
02:51 Under the Content View mode, we see Full content, RSS, Search index, Search results, Teaser.
03:02 We can also add a new Content View mode.
03:06 The key thing is - we are not limited to what Drupal gives us out of the box.
03:12 We also have Blocks, Comments, Taxonomy terms and Users.
03:18 We can add our own View modes to any of these.
03:22 Please make a note of that. It is an important thing to remember.
03:27 These are the ones that are available. But all are not enabled for every Content type.
03:34 Let us go back and do that.
03:36 Let’s go back to Structure and click Content types.
03:42 On the Events Content type, click Manage display.
03:46 Once again, we’re on this page where we have Default and Teaser.
03:52 Scroll down to the bottom and click on CUSTOM DISPLAY SETTINGS.
03:57 Put a check-mark in Full content.
04:00 This will allow us to manipulate how the fields are laid out, when we are actually looking at a node.
04:07 Click Save.
04:09 Now, here at the top, we have Full content and Teaser.
04:14 Next, we will learn how to update both of these View modes.
04:19 First, let's update the Full Content view.
04:23 These are the fields in our Full Content layout and the order they’re in and how the LABELs appear.
04:30 As a reminder, let’s go back and take a look at an event. Click on DrupalCamp Cincinnati.
04:37 The body is at the top.
04:39 Event website, Date, Topics and the logo if we had one.
04:45 Now, let’s clean these up to make our content look a little better.
04:50 Structure > Content types > Manage display for Events and then click on Full Content.
04:58 Here, Event Description is in full mode.
05:02 Let’s drag that down below Logo.
05:05 Then, let’s hide the LABEL for the Logo
05:09 and change it from Original image to a Medium size.
05:14 This is an Image style.
05:17 We will learn more about Image styles when we get to Views.
05:22 Understand that we are able to generate any size image in any Image style that we want.
05:29 Then we can use it anywhere we want. Let’s click on Update.
05:35 Now our Event Logo will be on the left because this Theme floats the images to the left.
05:43 The Body will wrap around it.
05:45 Let’s put the Event Date as LABEL Inline.
05:49 Let’s change the Format now.
05:52 Click on the gear on the right. We use a gear to configure something.
05:59 We will change this to the Default long date.
06:03 Click Update. This is nicer.
06:07 Let’s keep Event Sponsors as Inline.
06:10 You will notice that the output is linked to the referenced entity.
06:15 That means, if the Cincinnati User Group is sponsoring DrupalCamp Cincinnati, that will be a link to the User Group page.
06:24 That is exactly what we want.
06:27 Since Event Topics is presented in a column, we will choose Above.
06:33 Once again, it is linked to the Referenced entity.
06:37 Now, please pause the tutorial and check that your screen looks like mine.
06:43 Click on Save.
06:45 Let’s take a look at one of our nodes in Full View mode.
06:49 Click on Content and then on any event here.
06:54 The names of your Events and the text will be very different from mine.
06:59 That’s just because devel uses Lorem Ipsum.
07:03 Click on any Event here.
07:06 You should now see a layout that looks something like this.
07:10 This looks very nice.
07:12 Event Website, Event Date, Event Sponsors.
07:18 There is a little problem with the Event Topics, but for that we can just use some CSS.
07:26 Their links point to the correct places.
07:29 Let’s update the full display for our User Groups Content type.
07:34 Click on Structure > Content types and then on Manage display, in the User Groups.
07:42 Once again, we need to update our Views.
07:46 Scroll down, click CUSTOM DISPLAY SETTINGS and choose Full content.
07:52 We can update any of these displays as per our preference. Click Save.
07:59 Then choose Full content. This is similar to what we did with our Events.
08:06 Let’s put the Group Website above Description and the site Inline.
08:12 Put the Group Contact and Email together again, making their LABELs Inline.
08:19 I prefer to leave the Email as Plain text, rather than Email link.
08:24 This is because I don’t use my default Email program to send email anymore.
08:30 I prefer to keep this as Plain text.
08:33 Keep Group Experience Level as "Above", because its a list of all of the experience.
08:40 Finally, keep Events sponsored as "Above" as well.
08:45 Leave the FORMAT as "Label".
08:47 We could choose Entity ID or Rendered entity also.
08:52 But, on doing so, we will end up with a whole bunch of Event pages there.
08:58 I will keep this as "Label".
09:01 Here is the "Link to the referenced entity".
09:04 Using this, we can click the link to go to DrupalCamp Cincinnati in the Cincinnati User Group.
09:12 Let’s click on Save and check what we did.
09:16 Click Content and click on a User Group in the list.
09:22 Here we have the Group website, the description, the Contact information. This is created by devel.
09:31 A Contact Email - this is fake id which is also created by devel.
09:38 The key thing here is, it works!
09:41 Here is Group Experience Level. Notice that devel has double selected something.
09:48 We will just leave it as it is for now.
09:51 Lastly, the Event sponsored is "DrupalCamp Cincinnati".
09:56 This layout is the best that we can get, without adding any Display or Layout modules.
10:03 We have done the Full content successfully.
10:07 Next, let us learn to update our Teaser modes. If you look at these two, they are not that bad.
10:16 But as you scroll down, our Teaser modes are not very nice.
10:21 We can fix that easily.
10:24 Click on Structure and Content types.
10:28 In the Events, click on Manage display, then on Teaser.
10:33 Drupal gives us links and Event Description which is the body field.
10:39 Let’s now update our Teaser mode for this.
10:43 Just drag the Event Website to the top and choose Inline.
10:49 Then drag Event Date up as well because it is important.
10:55 Next, drag the Event Logo and put it at the top as well.
11:00 We will hide the LABEL and change the FORMAT to Thumbnail.
11:05 We can create Image styles for any image on our site.
11:10 But we will learn about it later.
11:13 Change the Link image as Content.
11:17 This makes the logo as a link straight into the content. Now click Update.
11:23 We have the logo, the website and the date.
11:28 Drag the Links to the bottom.
11:31 Next, let’s trim the Event Description.
11:35 Click the gear and change this to 400 characters.
11:40 Click Update. Then click the drop-down and change the option to Trimmed.
11:47 Now, our Teaser mode should have:

the Logo on the left, the Website, the Date and the Description on the right, with the Links.

11:58 Let’s see how it looks for now. Click Save.
12:03 Go back to the site.
12:05 You will see that DrupalCamp Cincinnati has been updated.
12:09 We will update the Date field later.
12:12 You will notice that the Body has been trimmed.
12:16 Click on Structure. Click Content types > Events > Manage display and Teaser.
12:24 Most of this is OK except for Event Date. Instead of Time ago we will choose Custom.
12:32 Notice here, there is a link to the PHP documentation for Date Formats.
12:38 Let’s update Date-Time format now.
12:41 First of all, delete that.
12:44 Lowercase l comma capital F jS comma and capital Y.
12:51 This means the day of the week, the day of the month,
12:55 and then the appropriate suffix - st nd rd th and the four digit year.
13:04 Click Update.
13:06 We can now see a preview of the date here.
13:09 Click Save.
13:11 Let’s hide the Event Description, for now.
13:14 Click on Save.
13:16 Let’s take a look at our site.
13:19 Now, our Teaser for our Event can be seen here - the Title, the logo, the website and the Event Date.
13:28 Let’s update the Teaser mode for our User Groups.
13:32 Click on Structure > Content types and then on Manage display in the User Groups.
13:39 Then click on Teaser.
13:42 This one is a little different because we do not have any images.
13:47 We could have had a User Group logo.
13:50 Let’s put the User Group Website at the top.
13:53 We will not display the User Group Description.
13:57 Let’s keep the Group Contact email.
14:00 And change the label Group Website and Contact Email to "Inline".
14:06 Here again, I like to keep the FORMAT as Plain text, because I don’t use my default email.
14:13 This is a very simple Teaser mode.
14:16 Click Save.
14:18 Back to our site.
14:20 The Cincinnati User Group has a Group Website and the Contact Email with a Read more.
14:27 This is how we update the View modes for both the Full content and the Teaser mode.
14:33 In subsequent tutorials, we will go to our landing pages and get our content out, in a usable form.
14:41 With this. we come to the end of this tutorial. Let us summarize.
14:46 In this tutorial, we have learnt about:

Displays Managing Full content display and Managing display Teaser.

15:11 This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
15:21 The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
15:28 The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
15:36 Spoken Tutorial Project is funded by-

NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.

15:47 This is Vanessa Varkey, signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Pratik kamble, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C2/Modifying-the-Display-of-Content/English-timed&oldid=34132"