Pratik kamble at 12:13, 24 March 2017

2017-03-24T12:13:50Z

Pratik kamble at 05:35, 7 October 2016

2016-10-07T05:35:16Z

Nancyvarkey at 12:15, 14 September 2016

2016-09-14T12:15:19Z

Sandhya.np14 at 11:38, 7 September 2016

2016-09-07T11:38:17Z

Show changes

Sandhya.np14 at 19:11, 31 August 2016

2016-08-31T19:11:52Z

Show changes

PoojaMoolya: Created page with "{| border = 1 | Time | Narration |- | 00:01 | Welcome to the Spoken tutorial on''' Modifying the Display of Content''' |- | 00:06 | In this tutorial, we will learn about *..."

2016-08-30T10:27:26Z

Created page with "{| border = 1 | Time | Narration |- | 00:01 | Welcome to the Spoken tutorial on''' Modifying the Display of Content''' |- | 00:06 | In this tutorial, we will learn about *..."

New page

{| border = 1
| 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 checkmark 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''' programme 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 summarises 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.

|}

@@ Line 1: / Line 1: @@
 {| border = 1
-| Time
+| '''Time'''
-| Narration
+| '''Narration'''
 |-

@@ Line 10: / Line 10: @@
 | 00:06
 | 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
 | 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 548: / Line 548: @@
 | 11:47
 | 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
 | 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
 | 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.
 |-