Priyacst: Created page with "'''Title of Script:''' Modifying the Display of Content '''Keywords: video tutorial, drupal, Full content layout, Teaser layout, Default layout, Custom Display Settings, Full..."

2016-07-13T11:00:08Z

Created page with "'''Title of Script:''' Modifying the Display of Content '''Keywords: video tutorial, drupal, Full content layout, Teaser layout, Default layout, Custom Display Settings, Full..."

New page

'''Title of Script:''' Modifying the Display of Content

'''Keywords: video tutorial, drupal, Full content layout, Teaser layout, Default layout, Custom Display Settings, Full Content, Manage Display, Full content view, Managing the Teaser Display, Teaser Mode'''

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Visual Cue</center>
| style="border:1pt solid #000000;padding:0.097cm;"| <center>Narration</center>

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 1:

'''Modifying the Display of Content'''
| style="border:1pt solid #000000;padding:0.097cm;"| Welcome to the Spoken tutorial on''' Modifying the Display of Content'''

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 2:

Learning Objectives

| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about

* Displays
* Managing full content display and
* Managing display teaser

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 3:

System requirement

| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using

* Ubuntu Linux Operating System
* Drupal 8 and
* Firefox Web browser

You can use any web browser as per your choice.

|-
| style="border:1pt solid #000000;padding:0.097cm;"|
| style="border:1pt solid #000000;padding:0.097cm;"| Let us open our website which we created earlier.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.176cm;"| 00:05
| style="border:1pt solid #000000;padding:0.176cm;"| Now we have our content.

Let’s see how it actually looks and how''' Drupal''' renders it to the page.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:11
| style="border:1pt solid #000000;padding:0.176cm;"| Note that in the''' Teaser mode,''' we get the''' Title''' and the''' Body''' with a''' Read more.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:34
| style="border:1pt solid #000000;padding:0.176cm;"| As we scroll down, we can also see all of our new content here.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:41
| style="border:1pt solid #000000;padding:0.176cm;"| By default,''' Drupal''' outputs the last 10''' nodes''' created, that have been promoted to the''' Homepage'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:50
| style="border:1pt solid #000000;padding:0.176cm;"| Notice there is some pagination down here at the bottom-

page''' 1, 2, 3, Next''' and''' Last.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:55
| style="border:1pt solid #000000;padding:0.176cm;"| If we click on''' Last,''' we will see a listing of the''' nodes''' in''' Teaser mode''', with a''' Read more''' after the''' Title'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:05
| style="border:1pt solid #000000;padding:0.176cm;"| This is not appealing.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:07
| style="border:1pt solid #000000;padding:0.176cm;"| '''Drupal''' allows us to set up what it calls “'''View modes'''”.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:21
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure '''and then''' Content Types.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:26
| style="border:1pt solid #000000;padding:0.176cm;"| Now, let’s update the''' layout''' for our''' Events content type'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:31
| style="border:1pt solid #000000;padding:0.176cm;"| Click on the drop-down, then click on the''' Manage display'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:37
| style="border:1pt solid #000000;padding:0.176cm;"| Notice here at the top, on the''' Manage display''' tab, there is a''' Default''' and a''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:45
| style="border:1pt solid #000000;padding:0.176cm;"| '''Default''' is the''' default layout''' – we are going to add one for the''' Full view layout'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:51
| style="border:1pt solid #000000;padding:0.176cm;"| Next is the''' Teaser layout.''' Let’s click on''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:55
| style="border:1pt solid #000000;padding:0.176cm;"| In the''' Teaser mode''', the only thing that is visible is the''' Event Description.'''

And the''' Links,''' which is the''' Read more''' link'''.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:02
| style="border:1pt solid #000000;padding:0.176cm;"| Here it says '''Trimmed limit: 600 characters.'''

We will update some of these things to make the''' Teaser mode''' for our''' Event content type''' look better.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:13
| style="border:1pt solid #000000;padding:0.176cm;"| Before we proceed, we need to understand that''' Drupal''' gives us what is called''' Layouts'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:19
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s click on''' Structure''' and''' Display modes.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:24
| style="border:1pt solid #000000;padding:0.176cm;"| Then click on''' View modes'''. Notice there is''' Form modes''' as well.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:29
| style="border:1pt solid #000000;padding:0.176cm;"| This''' Form modes''' is the''' layout''' for how data is entered.

This''' View modes''' is the''' layout''' for how data is viewed.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:35
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' View modes'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:37
| style="border:1pt solid #000000;padding:0.176cm;"| Under the''' Content View mode''', we see''' '''

* '''Full content, RSS, Search index, Search results, Teaser.'''

We can also add a new''' Content View mode'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:47
| style="border:1pt solid #000000;padding:0.176cm;"| The key thing is - we are not limited to what''' Drupal''' gives us out of the box.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:53
| style="border:1pt solid #000000;padding:0.176cm;"| We also have''' Blocks, Comments, Taxonomy terms''' and''' Users'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:57
| style="border:1pt solid #000000;padding:0.176cm;"| We can add our own''' View modes''' to any of these.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:01
| style="border:1pt solid #000000;padding:0.176cm;"| Please make a note of that.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:05
| style="border:1pt solid #000000;padding:0.176cm;"| It is an important thing to remember.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:08
| style="border:1pt solid #000000;padding:0.176cm;"| These are the ones that are available.

But all are not enabled for every''' Content type'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:14
| style="border:1pt solid #000000;padding:0.176cm;"| Let us go back and do that.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:16
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s go back to''' Structure''' and click''' Content types.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:20
| style="border:1pt solid #000000;padding:0.176cm;"| On the''' Events Content type''', click''' Manage display.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:25
| style="border:1pt solid #000000;padding:0.176cm;"| Once again, we’re on this page where we have''' Default''' and''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:29
| style="border:1pt solid #000000;padding:0.176cm;"| Scroll down to the bottom and click on''' CUSTOM DISPLAY SETTINGS'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:33
| style="border:1pt solid #000000;padding:0.176cm;"| Put a checkmark in''' Full content'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:36
| style="border:1pt solid #000000;padding:0.176cm;"| This will allow us to manipulate how the fields are laid out, when we are actually looking at a''' node'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:44
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:46
| style="border:1pt solid #000000;padding:0.176cm;"| Now here at the top, we have''' Full content''' and''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:50
| style="border:1pt solid #000000;padding:0.176cm;"| Next, we will learn how to update both of these''' View modes'''.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.176cm;"| 00:11
| style="border:1pt solid #000000;padding:0.176cm;"| First let's update the''' Full Content View'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:34
| style="border:1pt solid #000000;padding:0.176cm;"| These are the fields in our''' Full Content layout''' and the order they’re in and how the''' LABELs''' appear.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:41
| style="border:1pt solid #000000;padding:0.176cm;"| As a reminder, let’s go back and take a look at an''' event. '''

Click on''' DrupalCamp Cincinnati.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:47
| style="border:1pt solid #000000;padding:0.176cm;"| The''' body''' is at the top.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:49
| style="border:1pt solid #000000;padding:0.176cm;"| '''Event website, Date, Topics''' and the''' logo''' if we had one.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 00:54
| style="border:1pt solid #000000;padding:0.176cm;"| Now let’s clean these up to make our content look a little better.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:04
| style="border:1pt solid #000000;padding:0.176cm;"| '''Structure - Content types''' -''' Manage display''' for''' Events''' and then click on''' Full Content'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:15
| style="border:1pt solid #000000;padding:0.176cm;"| Here''' Event Description''' is in full mode.

Let’s drag that down below''' Logo.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:22
| style="border:1pt solid #000000;padding:0.176cm;"| Then let’s hide the''' LABEL''' for the''' Logo'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:27
| style="border:1pt solid #000000;padding:0.176cm;"| And change it from''' Original image''' to a''' Medium''' size.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:34
| style="border:1pt solid #000000;padding:0.176cm;"| This is an''' Image style'''.

We will learn more about''' Image styles''' when we get to''' Views'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:39
| style="border:1pt solid #000000;padding:0.176cm;"| Understand that we are able to generate any size image in an''' Image style''' that we want.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:47
| style="border:1pt solid #000000;padding:0.176cm;"| Then we can use it anywhere we want.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:49
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s click on''' Update'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:51
| style="border:1pt solid #000000;padding:0.176cm;"| Now our''' Event Logo''' will be on the left. Because this''' theme''' floats the images to the left.

The''' Body''' will wrap around it.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:00
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s put the''' Event Date''' as''' LABEL Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:05
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s change the''' Format '''now.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:07
| style="border:1pt solid #000000;padding:0.176cm;"| Click on the gear on the right.

We use a gear to configure something.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:13
| style="border:1pt solid #000000;padding:0.176cm;"| We will change this to the''' Default long date'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:20
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Update'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:22
| style="border:1pt solid #000000;padding:0.176cm;"| This is nicer.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:24
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s keep''' Event Sponsors''' as''' Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:27
| style="border:1pt solid #000000;padding:0.176cm;"| You will notice that the output is linked to the''' referenced entity.'''

That means''','''

* if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,'''
* that will be a link to the''' User Group page.'''

That is exactly what we want.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:39
| style="border:1pt solid #000000;padding:0.176cm;"| Since '''Event Topics '''is presented in a column, we will choose''' Above.'''

Once again, it is linked to the''' referenced entity'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:48
| style="border:1pt solid #000000;padding:0.176cm;"| Now, please pause the tutorial and check that your screen looks like mine.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:57
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:01
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s take a look at one of our''' nodes''' in''' Full View mode'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:05
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Content''' and then on any''' event''' here.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:08
| style="border:1pt solid #000000;padding:0.176cm;"| The names of your '''Events''' and the text will be very different from mine.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:12
| style="border:1pt solid #000000;padding:0.176cm;"| That’s just because''' devel''' uses''' Lorem Ipsum'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:15
| style="border:1pt solid #000000;padding:0.176cm;"| Click on any '''Event''' here.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:17
| style="border:1pt solid #000000;padding:0.176cm;"| You should now see a '''layout''' that looks something like this.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:21
| style="border:1pt solid #000000;padding:0.176cm;"| This looks very nice.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:25
| style="border:1pt solid #000000;padding:0.176cm;"| '''Event Website'''

'''Event Date'''

'''Event Sponsors'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:29
| style="border:1pt solid #000000;padding:0.176cm;"| There is a little problem with the''' Event Topics,''' but for that we can just use some''' CSS'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:34
| style="border:1pt solid #000000;padding:0.176cm;"| Their '''links''' point to the correct places.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:38
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s update the full display for our''' User Group Content type.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:43
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types''', and then click on''' Manage display''' in the''' User Groups'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:50
| style="border:1pt solid #000000;padding:0.176cm;"| Once again, we need to update our''' Views'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:53
| style="border:1pt solid #000000;padding:0.176cm;"| Scroll down, click “'''CUSTOM DISPLAY SETTINGS'''”, and choose''' Full content'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:59
| style="border:1pt solid #000000;padding:0.176cm;"| We can update any of these displays as per our preference.

Click''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:05
| style="border:1pt solid #000000;padding:0.176cm;"| Then choose''' Full content'''.

This is similar to what we did with our''' Events'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:12
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s put the''' Group Website''' above''' Description''' and the''' site Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:19
| style="border:1pt solid #000000;padding:0.176cm;"| Put the''' Group Contact''' and''' Email''' together, again making their''' LABELs Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:27
| style="border:1pt solid #000000;padding:0.176cm;"| I prefer to leave the''' Email''' as''' Plain text''', rather than '''Email''' link.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:32
| style="border:1pt solid #000000;padding:0.176cm;"| This is because I don’t use my default''' Email''' programme to send''' email''' anymore.

I prefer to keep this as''' Plain text.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:41
| style="border:1pt solid #000000;padding:0.176cm;"| Keep''' Group Experience Level''' as''' Above,''' because is a list of all of the experience.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:47
| style="border:1pt solid #000000;padding:0.176cm;"| Finally, keep''' Events sponsored''' as''' Above,''' as well.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:50
| style="border:1pt solid #000000;padding:0.176cm;"| Leave the''' FORMAT''' as''' Label'''.

We could choose''' Entity ID''' or''' Rendered entity,''' also.

But, on doing so, we will end up with a whole bunch of''' Event pages''' there.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:01
| style="border:1pt solid #000000;padding:0.176cm;"| I will keep this as''' Label.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:06
| style="border:1pt solid #000000;padding:0.176cm;"| Here is the''' Link to the referenced entity. '''

Using this, we can click the link to go to''' DrupalCamp Cincinnati''' in the''' Cincinnati User Group.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:11
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s click on''' Save''', and check what we did.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:15
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Content''', and click on a user group in the list.

Here we have the''' Group website''', the description, the''' Contact information'''.

This is created by''' devel'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:28
| style="border:1pt solid #000000;padding:0.176cm;"| A''' Contact Email,''' this is fake id which is also created by''' devel'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:33
| style="border:1pt solid #000000;padding:0.176cm;"| The key thing here is, it works.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:36
| style="border:1pt solid #000000;padding:0.176cm;"| Here is''' Group Experience Level'''.

Notice that''' devel''' has double selected something. We will just leave it as it is for now.

Lastly, the''' Event sponsored''' is''' DrupalCamp Cincinnati.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:48
| style="border:1pt solid #000000;padding:0.176cm;"| This layout is the best that we can get, without adding any''' display''' or''' layout modules'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:56
| style="border:1pt solid #000000;padding:0.176cm;"| We have done the''' Full content''' successfully.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.176cm;"| 00:05
| style="border:1pt solid #000000;padding:0.176cm;"| Next let us learn to update our''' Teaser modes.'''

If you look at these two, they are not that bad.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:12
| style="border:1pt solid #000000;padding:0.176cm;"| But as you scroll down, our''' Teaser modes''' are not very nice.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:16
| style="border:1pt solid #000000;padding:0.176cm;"| We can fix it easily.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:19
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure''' and''' Content types.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:22
| style="border:1pt solid #000000;padding:0.176cm;"| In the''' Events''' click on''' Manage display''', then on''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:31
| style="border:1pt solid #000000;padding:0.176cm;"| '''Drupal''' gives us''' links''' and''' Event Description''', which is the''' body''' field.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:35
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s now update our''' Teaser mode''' for this.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:38
| style="border:1pt solid #000000;padding:0.176cm;"| Just drag the''' Event Website''' to the top and choose''' Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:45
| style="border:1pt solid #000000;padding:0.176cm;"| Then drag''' Event Date''' up as well, because it is important.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 0:52
| style="border:1pt solid #000000;padding:0.176cm;"| Next, drag the''' Event Logo''' and put it at the top, as well.

We will hide the''' LABEL''' and change the''' FORMAT''' to''' Thumbnail.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:04
| style="border:1pt solid #000000;padding:0.176cm;"| We can create''' Image styles''' for any image on our''' site'''. But we will learn about it later.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:12
| style="border:1pt solid #000000;padding:0.176cm;"| Change the''' Link image to''' as''' Content.'''

This makes the''' logo''' as a''' link''' straight into the content item.

Now click''' Update'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:21
| style="border:1pt solid #000000;padding:0.176cm;"| We have the''' logo''', the''' website''', and the''' date'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:26
| style="border:1pt solid #000000;padding:0.176cm;"| Drag the''' links''' to the bottom.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1.33
| style="border:1pt solid #000000;padding:0.176cm;"| Next, let’s trim the event description.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:44
| style="border:1pt solid #000000;padding:0.176cm;"| Click the gear and change this to''' 400 characters'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:55
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Update'''.

Then click the drop down and change the option to '''Trimmed'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 1:57
| style="border:1pt solid #000000;padding:0.176cm;"| Now, our''' Teaser mode''' should have

* the''' Logo''' on the left,
* the''' Website''',
* the''' Date''' and
* the''' Description''' on the right, with the''' links'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:06
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s see how it looks for now.

Click''' Save.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:12
| style="border:1pt solid #000000;padding:0.176cm;"| Go back to the''' site'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:15
| style="border:1pt solid #000000;padding:0.176cm;"| You will see that''' DrupalCamp Cincinnati''' has been updated.

We will update the''' date field''' later.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:25
| style="border:1pt solid #000000;padding:0.176cm;"| You will notice that, the''' body''' has been trimmed.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:42
| style="border:1pt solid #000000;padding:0.176cm;"| Once again, click on '''Structure'''. Click''' Content types, Events, Manage display''', and''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:52
| style="border:1pt solid #000000;padding:0.176cm;"| Most of this is ok, except for''' Event Date.'''

Instead of''' Time ago''' we will choose''' Custom'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 2:59
| style="border:1pt solid #000000;padding:0.176cm;"| Notice here, there is a link to the''' PHP documentation''' for''' date formats.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:03
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s update''' Date-Time format''' now.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:07
| style="border:1pt solid #000000;padding:0.176cm;"| First of all, delete that.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:09

| style="border:1pt solid #000000;padding:0.176cm;"| '''Lowercase l comma capital F jS comma '''and '''capital Y'''.

This means

* the day of the week,
* the day of the month,
* and then the''' '''appropriate suffix '''st nd rd th'''
* and the four digit year.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:29
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Update.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:32
| style="border:1pt solid #000000;padding:0.176cm;"| We can now see a preview of the date here.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:40
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:41
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s hide the''' Event Description '''for now'''.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:52
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Save'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:55
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s take a look at our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 3:57
| style="border:1pt solid #000000;padding:0.176cm;"| Now our''' Teaser''' for our''' Event''' can be seen here -

* the''' Title''', the''' logo''', the''' website''' and the''' Event Date.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:11
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s update the''' Teaser mode''' for our''' User Groups'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:15
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types''', In the''' Events''' click''' Manage display.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:21
| style="border:1pt solid #000000;padding:0.176cm;"| Then click on''' Teaser'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:23
| style="border:1pt solid #000000;padding:0.176cm;"| This one is a little different because we don’t have any images.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:27
| style="border:1pt solid #000000;padding:0.176cm;"| We could have had a''' User Group logo.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:29
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s put the''' User Group Website''' at the top.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:32
| style="border:1pt solid #000000;padding:0.176cm;"| We will not display the''' User Group Description.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:35
| style="border:1pt solid #000000;padding:0.176cm;"| Let’s keep the''' Group Contact email.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:41
| style="border:1pt solid #000000;padding:0.176cm;"| And change the label''' Group Website''' and''' Contact Email''' to''' Inline'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:45
| style="border:1pt solid #000000;padding:0.176cm;"| Here again, I like to keep the''' FORMAT''' as''' Plain text''', because I don’t use my default''' email.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:52
| style="border:1pt solid #000000;padding:0.176cm;"| This is a very simple''' Teaser mode.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:54
| style="border:1pt solid #000000;padding:0.176cm;"| Click''' Save.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 4:57
| style="border:1pt solid #000000;padding:0.176cm;"| Back to our''' site'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:00
| style="border:1pt solid #000000;padding:0.176cm;"| The''' Cincinnati User Group''' has a''' Group Website''' and the''' Contact Email '''with a''' Read more'''.

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:11
| style="border:1pt solid #000000;padding:0.176cm;"| That is how we update the''' View modes''' for both the''' Full content''' and the''' Teaser mode.'''

|-
| style="border:1pt solid #000000;padding:0.176cm;"| 5:18
| style="border:1pt solid #000000;padding:0.176cm;"| In subsequent tutorials, we will go to our landing pages and get our content out, in a usable form.

With this we come to an end of this tutorial.

|}

{| style="border-spacing:0;"
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 5:

Summary

| style="border:1pt solid #000000;padding:0.097cm;"| Let us summarize.

In this tutorial we have learnt about

* Displays
* Managing full content display and
* Managing display teaser

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 6:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| This video is

* adapted from Acquia and OSTraining
* and revised by Spoken Tutorial Project, IIT Bombay.

|-
| style="border:1pt solid #000000;padding:0.097cm;"| Slide 7:

Acknowledgement

| style="border:1pt solid #000000;padding:0.097cm;"| The video at this link summarises the Spoken Tutorial project.

Pls download and watch it.

|-
| style="border-top:1pt solid #000000;border-bottom:0.75pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| Slide 8:

| style="border-top:1pt solid #000000;border-bottom:0.75pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

|-
| style="border:0.75pt solid #000000;padding:0.106cm;"| Slide 9:

| style="border:0.75pt solid #000000;padding:0.106cm;"| Spoken Tutorial Project is funded by

* NMEICT, Ministry of Human Resource Development and
* NVLI, Ministry of Culture

Government of India.

|-
| style="border-top:0.75pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"|
| style="border-top:0.75pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.097cm;"| This is Vanessa Varkey signing off.

Thanks for joining.

|}

← Older revision		Revision as of 12:02, 14 September 2016
Line 596:		Line 596:


−	This makes the''' logo''' as a''' link''' straight into the content ~~item~~.	+	This makes the''' logo''' as a''' link''' straight into the content.

Drupal/C2/Modifying-the-Display-of-Content/English - Revision history

Nancyvarkey at 12:02, 14 September 2016

Priyacst at 06:27, 1 August 2016

Nancyvarkey at 09:14, 20 July 2016

Nancyvarkey at 13:24, 19 July 2016

Priyacst: Created page with "'''Title of Script:''' Modifying the Display of Content '''Keywords: video tutorial, drupal, Full content layout, Teaser layout, Default layout, Custom Display Settings, Full..."

@@ Line 731: / Line 731: @@
 |-
 | style="border:1pt solid #000000;padding:0.176cm;"| 4:15
-| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types'''.
+| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types'''
-In the''' Events,''' click''' Manage display.'''
+and then click on''' Manage display''' in the''' User Groups'''.
 |-

@@ Line 107: / Line 107: @@
 |-
 | style="border:1pt solid #000000;padding:0.176cm;"| 1:45
-| style="border:1pt solid #000000;padding:0.176cm;"| '''Default''' is the''' default layout''' – we are going to add one for the''' Full view layout'''
+| style="border:1pt solid #000000;padding:0.176cm;"| '''Default''' is the''' default layout''' – we are going to add one of the''' Full view layout'''
 |-
@@ Line 282: / Line 282: @@
 |-
 | style="border:1pt solid #000000;padding:0.176cm;"| 1:39
-| style="border:1pt solid #000000;padding:0.176cm;"| Understand that we are able to generate any size image in an''' Image style''' that we want.
+| style="border:1pt solid #000000;padding:0.176cm;"| Understand that we are able to generate any size image in any''' Image style''' that we want.
 |-