Difference between revisions of "Drupal/C2/Modifying-the-Display-of-Content/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
|||
(3 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{| border = 1 | {| border = 1 | ||
− | | Time | + | | '''Time''' |
− | | Narration | + | | '''Narration''' |
|- | |- | ||
| 00:01 | | 00:01 | ||
− | | Welcome to the '''Spoken tutorial''' on''' Modifying the Display of Content''' | + | | Welcome to the '''Spoken tutorial''' on''' Modifying the Display of Content'''. |
|- | |- | ||
| 00:06 | | 00:06 | ||
| In this tutorial, we will learn about: | | In this tutorial, we will learn about: | ||
− | + | '''Displays''' | |
− | + | Managing '''Full content display''' and | |
− | + | 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 | |
− | + | '''Drupal 8''' and | |
− | + | '''Firefox''' Web browser. | |
|- | |- | ||
Line 31: | Line 31: | ||
|- | |- | ||
| 00:35 | | 00:35 | ||
− | | Now we have our content. Let’s see how it actually looks and how''' Drupal''' renders it to the page. | + | | Now, we have our content. Let’s see how it actually looks and how''' Drupal''' renders it to the page. |
|- | |- | ||
Line 87: | Line 87: | ||
|- | |- | ||
| 02:00 | | 02:00 | ||
− | | In the''' Teaser | + | | In the''' Teaser''' mode, the only thing that is visible is the''' Event Description.''' And the''' Links,''' which is the''' Read more''' link. |
|- | |- | ||
Line 95: | Line 95: | ||
|- | |- | ||
| 02:14 | | 02:14 | ||
− | | We will update some of these things to make the''' Teaser | + | | We will update some of these things to make the''' Teaser''' mode for our''' 'Event' Content type''' look better. |
|- | |- | ||
Line 107: | Line 107: | ||
|- | |- | ||
| 02:32 | | 02:32 | ||
− | | Then click on''' View modes'''. Notice there is''' Form modes''' as well. | + | | Then click on''' View modes'''. Notice, there is''' Form modes''' as well. |
|- | |- | ||
| 02:38 | | 02:38 | ||
− | | This''' Form modes''' is the | + | | This''' Form modes''' is the layout for how data is entered. |
|- | |- | ||
Line 143: | Line 143: | ||
|- | |- | ||
| 03:22 | | 03:22 | ||
− | | Please make a note of that. | + | | Please make a note of that. It is an important thing to remember. |
|- | |- | ||
Line 175: | Line 175: | ||
|- | |- | ||
| 04:00 | | 04:00 | ||
− | | This will allow us to manipulate how the | + | | This will allow us to manipulate how the '''field'''s are laid out, when we are actually looking at a node. |
|- | |- | ||
Line 191: | Line 191: | ||
|- | |- | ||
| 04:19 | | 04:19 | ||
− | | First, let's update the''' Full Content | + | | First, let's update the''' Full Content''' view. |
|- | |- | ||
Line 215: | Line 215: | ||
|- | |- | ||
| 04:50 | | 04:50 | ||
− | | '''Structure | + | | '''Structure > Content types > Manage display''' for''' Events''' and then click on''' Full Content'''. |
|- | |- | ||
| 04:58 | | 04:58 | ||
− | | Here''' Event Description''' is in full mode. | + | | Here,''' Event Description''' is in full mode. |
|- | |- | ||
Line 227: | Line 227: | ||
|- | |- | ||
| 05:05 | | 05:05 | ||
− | | Then let’s hide the''' LABEL''' for the''' Logo''' | + | | Then, let’s hide the''' LABEL''' for the''' Logo''' |
|- | |- | ||
| 05:09 | | 05:09 | ||
− | | | + | | and change it from''' Original image''' to a''' Medium''' size. |
|- | |- | ||
Line 287: | Line 287: | ||
|- | |- | ||
| 06:15 | | 06:15 | ||
− | | That means, if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,''' that will be a link to the''' User Group | + | | That means, if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,''' that will be a link to the''' User Group''' page. |
|- | |- | ||
Line 311: | Line 311: | ||
|- | |- | ||
| 06:45 | | 06:45 | ||
− | | Let’s take a look at one of our | + | | Let’s take a look at one of our nodes in''' Full View''' mode. |
|- | |- | ||
Line 339: | Line 339: | ||
|- | |- | ||
| 07:12 | | 07:12 | ||
− | | '''Event Website''' | + | | '''Event Website''', '''Event Date''', '''Event Sponsors'''. |
− | + | ||
− | '''Event Date''' | + | |
− | + | ||
− | '''Event Sponsors'''. | + | |
|- | |- | ||
Line 355: | Line 351: | ||
|- | |- | ||
| 07:29 | | 07:29 | ||
− | | Let’s update the full display for our''' User | + | | Let’s update the full display for our''' User Groups Content type.''' |
|- | |- | ||
| 07:34 | | 07:34 | ||
− | | Click on''' Structure | + | | Click on''' Structure > Content types''' and then on''' Manage display''', in the''' User Groups'''. |
|- | |- | ||
Line 383: | Line 379: | ||
|- | |- | ||
| 08:12 | | 08:12 | ||
− | | Put the''' Group Contact''' and''' Email''' together | + | | Put the''' Group Contact''' and''' Email''' together again, making their''' LABELs Inline'''. |
|- | |- | ||
Line 399: | Line 395: | ||
|- | |- | ||
| 08:33 | | 08:33 | ||
− | | Keep''' Group Experience Level''' as | + | | Keep''' Group Experience Level''' as "Above", because its a list of all of the experience. |
|- | |- | ||
| 08:40 | | 08:40 | ||
− | | Finally, keep''' Events sponsored''' as | + | | Finally, keep''' Events sponsored''' as "Above" as well. |
|- | |- | ||
| 08:45 | | 08:45 | ||
− | | Leave the''' FORMAT''' as | + | | Leave the''' FORMAT''' as "Label". |
|- | |- | ||
Line 419: | Line 415: | ||
|- | |- | ||
| 08:58 | | 08:58 | ||
− | | I will keep this as | + | | I will keep this as "Label". |
|- | |- | ||
| 09:01 | | 09:01 | ||
− | | Here is the''' Link to the referenced entity. ''' | + | | Here is the''' "Link to the referenced entity". ''' |
|- | |- | ||
Line 459: | Line 455: | ||
|- | |- | ||
| 09:51 | | 09:51 | ||
− | | Lastly, the''' Event sponsored''' is | + | | Lastly, the''' Event sponsored''' is "DrupalCamp Cincinnati". |
|- | |- | ||
Line 471: | Line 467: | ||
|- | |- | ||
| 10:07 | | 10:07 | ||
− | | Next, let us learn to update our''' Teaser | + | | Next, let us learn to update our''' Teaser''' modes. If you look at these two, they are not that bad. |
|- | |- | ||
| 10:16 | | 10:16 | ||
− | | But as you scroll down, our''' Teaser | + | | But as you scroll down, our''' Teaser''' modes are not very nice. |
|- | |- | ||
Line 523: | Line 519: | ||
|- | |- | ||
| 11:13 | | 11:13 | ||
− | | Change the''' Link image | + | | Change the''' Link image ''' as''' Content.''' |
|- | |- | ||
| 11:17 | | 11:17 | ||
− | | This makes the''' logo''' as a''' link''' straight into the content | + | | This makes the''' logo''' as a''' link''' straight into the content. Now click''' Update'''. |
|- | |- | ||
Line 552: | Line 548: | ||
| 11:47 | | 11:47 | ||
| Now, our ''' Teaser mode''' should have: | | Now, our ''' Teaser mode''' should have: | ||
− | + | the''' Logo''' on the left, | |
− | + | the''' Website''', | |
− | + | the''' Date''' and | |
− | + | the''' Description''' on the right, with the''' Links'''. | |
− | + | ||
|- | |- | ||
Line 572: | Line 567: | ||
|- | |- | ||
| 12:09 | | 12:09 | ||
− | | We will update the''' Date | + | | We will update the''' Date''' field later. |
|- | |- | ||
Line 580: | Line 575: | ||
|- | |- | ||
| 12:16 | | 12:16 | ||
− | | Click on '''Structure'''. Click''' Content types | + | | Click on '''Structure'''. Click''' Content types > Events > Manage display''' and''' Teaser'''. |
|- | |- | ||
| 12:24 | | 12:24 | ||
− | | Most of this is | + | | Most of this is OK except for''' Event Date.''' Instead of''' Time ago''' we will choose''' Custom'''. |
|- | |- | ||
Line 624: | Line 619: | ||
|- | |- | ||
| 13:11 | | 13:11 | ||
− | | Let’s hide the''' Event Description '''for now. | + | | Let’s hide the''' Event Description, '''for now. |
|- | |- | ||
Line 636: | Line 631: | ||
|- | |- | ||
| 13:19 | | 13:19 | ||
− | | Now our''' Teaser''' for our''' Event''' can be seen here - the''' Title''', the''' logo''', the''' website''' and the''' Event Date.''' | + | | Now, our''' Teaser''' for our''' Event''' can be seen here - the''' Title''', the''' logo''', the''' website''' and the''' Event Date.''' |
|- | |- | ||
| 13:28 | | 13:28 | ||
− | | Let’s update the''' Teaser | + | | Let’s update the''' Teaser''' mode for our''' User Groups'''. |
|- | |- | ||
| 13:32 | | 13:32 | ||
− | | Click on''' Structure | + | | Click on''' Structure > Content types''' and then on''' Manage display''' in the''' User Groups'''. |
|- | |- | ||
Line 672: | Line 667: | ||
|- | |- | ||
| 14:00 | | 14:00 | ||
− | | And change the label''' Group Website''' and''' Contact Email''' to | + | | And change the label''' Group Website''' and''' Contact Email''' to "Inline". |
|- | |- | ||
| 14:06 | | 14:06 | ||
− | | Here again, I like to keep the''' FORMAT''' as''' Plain text''', because I don’t use my default | + | | Here again, I like to keep the''' FORMAT''' as''' Plain text''', because I don’t use my default email. |
|- | |- | ||
| 14:13 | | 14:13 | ||
− | | This is a very simple''' Teaser | + | | This is a very simple''' Teaser''' mode. |
|- | |- | ||
Line 688: | Line 683: | ||
|- | |- | ||
| 14:18 | | 14:18 | ||
− | | Back to our | + | | Back to our site. |
|- | |- | ||
Line 696: | Line 691: | ||
|- | |- | ||
| 14:27 | | 14:27 | ||
− | | | + | | This is how we update the''' View modes''' for both the''' Full content''' and the''' Teaser mode.''' |
|- | |- | ||
Line 704: | Line 699: | ||
|- | |- | ||
| 14:41 | | 14:41 | ||
− | | With this we come to | + | | With this. we come to the end of this tutorial. Let us summarize. |
|- | |- | ||
| 14:46 | | 14:46 | ||
| In this tutorial, we have learnt about: | | In this tutorial, we have learnt about: | ||
− | + | '''Displays''' | |
− | + | Managing '''Full content display''' and | |
− | + | Managing display '''Teaser'''. | |
− | + | ||
|- | |- | ||
Line 729: | 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 | |
− | + | NVLI, Ministry of Culture, Government of India. | |
− | + | ||
− | 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. |