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

Revision as of 00:41, 1 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 Group Content type.
07:34	Click on Structure, Content types and then click 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 to 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 click 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	That 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 an 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 00:41, 1 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'''
 |-
 | 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'''
+* Managing display '''Teaser'''.
 |-
 | 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 44: / Line 43: @@
 |-
 | 00:55
-| By default,''' Drupal''' outputs the last 10''' nodes''' created, that have been promoted to the''' Homepage'''.
+| 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.'''
+| 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'''.
+| If we click on''' Last,''' we will see a listing of the nodes in''' Teaser mode''', with a''' Read more''' after the''' Title'''.
 |-
@@ Line 60: / Line 59: @@
 |-
 | 01:22
-| '''Drupal''' allows us to set up what it calls “'''View modes'''”.
+| '''Drupal''' allows us to set up what it calls “View modes”.
 |-
@@ Line 68: / Line 67: @@
 |-
 | 01:31
-| Now, let’s update the''' layout''' for our''' Events Content type'''.
+| Now, let’s update the layout for our''' 'Events' Content type'''.
 |-
@@ Line 80: / Line 79: @@
 |-
 | 01:48
-| '''Default''' is the''' default layout''' – we are going to add one of the''' Full view layout'''
+| '''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'''.
+| Next is the''' Teaser''' layout. Let’s click on''' Teaser'''.
 |-
@@ Line 92: / Line 91: @@
 |-
 | 02:09
-| Here it says '''Trimmed limit: 600 characters.'''
+| Here it says "Trimmed limit: 600 characters".
 |-
@@ Line 100: / Line 99: @@
 |-
 | 02:21
-| Before we proceed, we need to understand that''' Drupal''' gives us what is called''' Layouts'''.
+| Before we proceed, we need to understand that Drupal gives us what is called''' Layouts'''.
 |-
@@ Line 116: / Line 115: @@
 |-
 | 02:43
-| This''' View modes''' is the''' layout''' for how data is viewed.
+| This''' View modes''' is the layout for how data is viewed.
 |-
@@ Line 172: / Line 171: @@
 |-
 | 03:57
-| Put a checkmark in''' Full content'''.
+| 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'''.
+| This will allow us to manipulate how the fields are laid out, when we are actually looking at a node.
 |-
@@ Line 184: / Line 183: @@
 |-
 | 04:09
-| Now here at the top, we have''' Full content''' and''' Teaser'''.
+| Now, here at the top, we have''' Full content''' and''' Teaser'''.
 |-
@@ Line 192: / Line 191: @@
 |-
 | 04:19
-| First let's update the''' Full Content View'''.
+| 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.
+| These are the fields in our''' Full Content''' layout and the order they’re in and how the''' LABEL'''s appear.
 |-
@@ Line 212: / Line 211: @@
 |-
 | 04:45
-| Now let’s clean these up to make our content look a little better.
+| Now, let’s clean these up to make our content look a little better.
 |-
@@ Line 312: / 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 344: / Line 343: @@
 '''Event Date'''
-'''Event Sponsors'''
+'''Event Sponsors'''.
 |-
@@ Line 360: / Line 359: @@
 |-
 | 07:34
-| Click on''' Structure, Content types''', and then click on''' Manage display''' in the''' User Groups'''.
+| Click on''' Structure, Content types''' and then click on''' Manage display''' in the''' User Groups'''.
 |-
@@ Line 368: / Line 367: @@
 |-
 | 07:46
-| Scroll down, click “'''CUSTOM DISPLAY SETTINGS'''”, and choose''' Full content'''.
+| Scroll down, click '''CUSTOM DISPLAY SETTINGS''' and choose''' Full content'''.
 |-
@@ Line 392: / Line 391: @@
 |-
 | 08:24
-| This is because I don’t use my default''' Email''' programme to send''' email''' anymore.
+| This is because I don’t use my default''' Email''' program to send''' email''' anymore.
 |-
@@ Line 404: / Line 403: @@
 |-
 | 08:40
-| Finally, keep''' Events sponsored''' as''' Above,''' as well.
+| Finally, keep''' Events sponsored''' as''' Above''' as well.
 |-
@@ Line 412: / Line 411: @@
 |-
 | 08:47
-| We could choose''' Entity ID''' or''' Rendered entity,''' also.
+| We could choose''' Entity ID''' or''' Rendered entity''' also.
 |-
@@ Line 432: / Line 431: @@
 |-
 | 09:12
-| Let’s click on''' Save''', and check what we did.
+| Let’s click on''' Save''' and check what we did.
 |-
 | 09:16
-| Click''' Content''', and click on a '''User Group''' in the list.
+| Click''' Content''' and click on a '''User Group''' in the list.
 |-
@@ Line 472: / Line 471: @@
 |-
 | 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.
 |-
@@ Line 488: / Line 487: @@
 |-
 | 10:28
-| In the''' Events''' click on''' Manage display''', then on''' Teaser'''.
+| In the''' Events''', click on''' Manage display''', then on''' Teaser'''.
 |-
 | 10:33
-| '''Drupal''' gives us''' links''' and''' Event Description''', which is the''' body''' field.
+| '''Drupal''' gives us''' links''' and''' Event Description''' which is the''' body''' field.
 |-
@@ Line 504: / Line 503: @@
 |-
 | 10:49
-| Then drag''' Event Date''' up as well, because it is important.
+| 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.
+| Next, drag the''' Event Logo''' and put it at the top as well.
 |-
@@ Line 532: / Line 531: @@
 |-
 | 11:23
-| We have the''' logo''', the''' website''', and the''' date'''.
+| We have the '''logo''', the '''website''' and the''' date'''.
 |-
@@ Line 548: / Line 547: @@
 |-
 | 11:40
-| Click''' Update'''. Then click the drop down and change the option to '''Trimmed'''.
+| Click''' Update'''. Then click the drop-down and change the option to '''Trimmed'''.
 |-
 | 11:47
-| Now, our ''' Teaser mode''' should have
+| Now, our ''' Teaser mode''' should have:
 * the''' Logo''' on the left,
@@ Line 577: / Line 576: @@
 |-
 | 12:12
-| You will notice that, the''' Body''' has been trimmed.
+| You will notice that the''' Body''' has been trimmed.
 |-
 | 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 601: / Line 600: @@
 |-
 | 12:44
-| '''Lowercase l comma capital F jS comma '''and '''capital Y'''.
+| Lowercase l comma capital F jS comma and capital Y.
 |-
@@ Line 609: / Line 608: @@
 |-
 | 12:55
-| And then the appropriate suffix - '''st nd rd th'''  and the four digit year.
+| and then the appropriate suffix - '''st nd rd th'''  and the four digit year.
 |-
@@ Line 617: / Line 616: @@
 |-
 | 13:06
-| We can now see a preview of the date here.
+| We can now see a '''preview''' of the date here.
 |-
@@ Line 709: / Line 708: @@
 |-
 | 14:46
-| In this tutorial we have learnt about
+| In this tutorial, we have learnt about:
 * '''Displays'''
@@ Line 717: / Line 716: @@
 |-
 | 15:11
-| This video is  adapted from Acquia and OSTraining  and revised by Spoken Tutorial Project, IIT Bombay.
+| This video is  adapted from '''Acquia''' and '''OSTraining'''  and revised by '''Spoken Tutorial Project, IIT Bombay'''.
 |-
 | 15:21
-| The video at this link summarises the Spoken Tutorial project.Please download and watch it.
+| 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.
+| 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
+| 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.
+|This is Vanessa Varkey, signing off. Thanks for joining.
 |}