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

Revision as of 17:08, 7 September 2016

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 item. 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

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

Revision as of 17:08, 7 September 2016

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 5: / Line 5: @@
 |-
 | 00:01
-| Welcome to the '''Spoken tutorial''' on''' Modifying the Display of Content'''
+| Welcome to the '''Spoken tutorial''' on''' Modifying the Display of Content'''.
 |-
@@ Line 31: / Line 31: @@
 |-
 | 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
-| In the''' Teaser mode''', the only thing that is visible is the''' Event Description.''' And the''' Links,''' which is the''' Read more''' link.
+| 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
-| We will update some of these things to make the''' Teaser mode''' for our''' Event Content type''' look better.
+| 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
-| 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
-| This''' Form modes''' is the''' layout''' for how data is entered.
+| This''' Form modes''' is the layout for how data is entered.
 |-
@@ Line 143: / Line 143: @@
 |-
 | 03:22
-| Please make a note of that.  It is an important thing to remember.
+| Please make a note of that. It is an important thing to remember.
 |-
@@ Line 175: / Line 175: @@
 |-
 | 04:00
-| This will allow us to manipulate how the fields are laid out, when we are actually looking at a node.
+| 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
-| First, let's update the''' Full Content View'''.
+| First, let's update the''' Full Content''' view.
 |-
@@ Line 215: / Line 215: @@
 |-
 | 04:50
-| '''Structure - Content types''' -''' Manage display''' for''' Events''' and then click on''' Full Content'''.
+| '''Structure > Content types > Manage display''' for''' Events''' and then click on''' Full Content'''.
 |-
 | 04:58
-| Here''' Event Description''' is in full mode.
+| Here,''' Event Description''' is in full mode.
 |-
@@ Line 227: / Line 227: @@
 |-
 | 05:05
-| Then let’s hide the''' LABEL''' for the''' Logo'''.
+| Then, let’s hide the''' LABEL''' for the''' Logo'''
 |-
 | 05:09
-| And change it from''' Original image''' to a''' Medium''' size.
+| and change it from''' Original image''' to a''' Medium''' size.
 |-
@@ Line 287: / Line 287: @@
 |-
 | 06:15
-| That means,  if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,'''  that will be a link to the''' User Group page.'''
+| 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
-| Let’s take a look at one of our''' nodes''' in''' Full View''' mode.
+| Let’s take a look at one of our nodes in''' Full View''' mode.
 |-
@@ Line 339: / Line 339: @@
 |-
 | 07:12
-| '''Event Website'''
+| '''Event Website''', '''Event Date''', '''Event Sponsors'''.
-'''Event Date'''
-'''Event Sponsors'''.
 |-
@@ Line 355: / Line 351: @@
 |-
 | 07:29
-| Let’s update the full display for our''' User Group Content type.'''
+| Let’s update the full display for our''' User Groups Content type.'''
 |-
 | 07:34
-| Click on''' Structure, Content types''' and then click on''' Manage display''' in the''' User Groups'''.
+| Click on''' Structure > Content types''' and then  on''' Manage display''', in the''' User Groups'''.
 |-
@@ Line 383: / Line 379: @@
 |-
 | 08:12
-| Put the''' Group Contact''' and''' Email''' together, again making their''' LABELs Inline'''.
+| Put the''' Group Contact''' and''' Email''' together again, making their''' LABELs Inline'''.
 |-
@@ Line 399: / Line 395: @@
 |-
 | 08:33
-| Keep''' Group Experience Level''' as''' Above,''' because its a list of all of the experience.
+| 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.
+| Finally, keep''' Events sponsored''' as "Above" as well.
 |-
 | 08:45
-| Leave the''' FORMAT''' as''' Label'''.
+| Leave the''' FORMAT''' as "Label".
 |-
@@ Line 419: / Line 415: @@
 |-
 | 08:58
-| I will keep this as''' Label.'''
+| I will keep this as "Label".
 |-
 | 09:01
-| Here is the''' Link to the referenced entity. '''
+| Here is the''' "Link to the referenced entity". '''
 |-
@@ Line 459: / Line 455: @@
 |-
 | 09:51
-| Lastly, the''' Event sponsored''' is''' DrupalCamp Cincinnati.'''
+| Lastly, the''' Event sponsored''' is "DrupalCamp Cincinnati".
 |-
@@ Line 471: / Line 467: @@
 |-
 | 10:07
-| Next, let us learn to update our''' Teaser modes.''' If you look at these two, they are not that bad.
+| 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.
+| But as you scroll down, our''' Teaser''' modes are not very nice.
 |-
@@ Line 523: / Line 519: @@
 |-
 | 11:13
-| Change the''' Link image to''' as''' Content.'''
+| Change the''' Link image ''' as''' Content.'''
 |-
@@ Line 552: / Line 548: @@
 | 11:47
 | Now, our ''' Teaser mode''' should have:
 * the''' Logo''' on the left,
 * the''' Website''',
@@ Line 572: / Line 567: @@
 |-
 | 12:09
-| We will update the''' Date field''' later.
+| We will update the''' Date''' field later.
 |-
@@ Line 580: / Line 575: @@
 |-
 | 12:16
-| Click on '''Structure'''.  Click''' Content types, Events, Manage display''' and''' Teaser'''.
+| 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'''.
+| Most of this is OK except for''' Event Date.'''  Instead of''' Time ago''' we will choose''' Custom'''.
 |-
@@ Line 624: / Line 619: @@
 |-
 | 13:11
-| Let’s hide the''' Event Description '''for now.
+| Let’s hide the''' Event Description, '''for now.
 |-
@@ Line 636: / Line 631: @@
 |-
 | 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
-| Let’s update the''' Teaser mode''' for our''' User Groups'''.
+| Let’s update the''' Teaser''' mode for our''' User Groups'''.
 |-
 | 13:32
-| Click on''' Structure, Content types''' and then click on''' Manage display''' in the''' User Groups'''.
+| Click on''' Structure > Content types''' and then  on''' Manage display''' in the''' User Groups'''.
 |-
@@ Line 672: / Line 667: @@
 |-
 | 14:00
-| And change the label''' Group Website''' and''' Contact Email''' to''' Inline'''.
+| 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.'''
+| 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.'''
+| This is a very simple''' Teaser''' mode.
 |-
@@ Line 688: / Line 683: @@
 |-
 | 14:18
-| Back to our''' site'''.
+| Back to our site.
 |-
@@ Line 696: / Line 691: @@
 |-
 | 14:27
-| That is how we update the''' View modes''' for both the''' Full content''' and the''' Teaser mode.'''
+| This is how we update the''' View modes''' for both the''' Full content''' and the''' Teaser mode.'''
 |-
@@ Line 704: / Line 699: @@
 |-
 | 14:41
-| With this we come to an end of this tutorial.  Let us summarize.
+| With this. we come to the end of this tutorial.  Let us summarize.
 |-
@@ Line 712: / Line 707: @@
 * '''Displays'''
 * Managing '''Full content display''' and
-* Managing display '''Teaser'''
+* Managing display '''Teaser'''.
 |-
@@ Line 731: / Line 726: @@
 * NMEICT, Ministry of Human Resource Development and
-* NVLI, Ministry of Culture
+* NVLI, Ministry of Culture, Government of India.
-Government of India.
 |-