Difference between revisions of "Drupal/C3/Menu-and-Endpoints/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title:''' Menu and Endpoints '''Keywords: Drupal, Video tutorial, URL paths, Pathauto, Token, Menu, System, Content''' {| style="border-spacing:0;" | style="border:1pt...")
 
 
Line 22: Line 22:
  
  
 +
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to set up '''URL Patterns.'''
  
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn to
 
 
* Set up URL Patterns
 
  
 
We will also learn about '''Menu management'''.
 
We will also learn about '''Menu management'''.
 
 
 
  
 
|-
 
|-
Line 36: Line 31:
  
 
System requirement
 
System requirement
 
  
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| To record this tutorial, I am using
 
| style="border:1pt solid #000000;padding:0.097cm;"| 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
+
  
 
You can use any web browser as per your choice.
 
You can use any web browser as per your choice.
Line 54: Line 47:
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| In this tutorial, we will talk about the process of creating proper''' URL paths''' for our''' website'''.
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| In this tutorial, we will talk about the process of creating proper''' URL paths''' for our''' website'''.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Slide
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| '''Endpoints''' and '''aliases'''.
  
Endpoints and aliases.
+
*'''Endpoints''' are '''URL paths''' which display a particular content.
 +
*By default in '''Drupal''', the '''endpoint''' of a '''node''' is '''node/[node:id]'''.
 +
*Sending this to a server will display the contents of the '''node'''.
 +
*A number in the '''ID''' is not human readable.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Slide
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
  
Endpoints are URL paths which display a particular content.
+
*That is, we cannot easily associate a particular content with say, '''node/278162'''
 +
*A human readable '''endpoint''' is available by creating an '''alias'''.
 +
*'''Alias''' is an alternate '''URL path''' for the same content.
 +
*We can use either the original or any one of several '''aliases,''' for displaying the same content.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Slide
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
  
By default in drupal the endpoint of a node is '''<nowiki>node/[node:id]</nowiki>'''.  
+
*For example '''node/278162''' and '''content/drupal-camp-mumbai-2015'''  
 +
*Both return the same content.
 +
*The second one is easy to remember.
  
 
+
|-
Sending this to a server will display the contents of the node.  
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Let us now create '''URL patterns''' that will apply to all the contents we have.
 
+
A number in the ID is not human readable.
+
 
+
 
+
That is we cannot easily associate a particular content with say '''node/278162'''
+
 
+
 
+
A human readable endpoint is available by creating an '''alias'''.
+
 
+
 
+
Alias is an alternate URL path for the same content.
+
 
+
 
+
We can use either the original or any one of several aliases for displaying the same content.
+
 
+
 
+
For example '''node/278162''' and '''content/drupal-camp-mumbai-2015''' both return the same content.
+
 
+
 
+
The second one is easy to remember.
+
 
+
 
+
Let us now create URL patterns that will apply to all the contents we have.
+
  
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| 00:30
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| 00:30
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Setting up''' URL paths''' requires three''' modules'''.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Setting up''' URL paths''' require three''' modules'''.
  
 
|-
 
|-
Line 125: Line 112:
  
  
Down here on the left hand side, under the''' SEARCH''' '''AND METADATA''' section, click on''' URL aliases'''.  
+
Down here on the left hand side, under the''' SEARCH''' '''AND METADATA''' section, you will see''' URL aliases'''.  
  
 
|-
 
|-
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|  
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click on '''Patterns >> Add Pathauto pattern'''
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| By default there are no URL aliases available.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| By default, there are no '''URL aliases''' available.
  
  
Line 137: Line 124:
 
Click on the '''Add Pathauto pattern '''button.
 
Click on the '''Add Pathauto pattern '''button.
  
 
+
|-
Click on the '''Pattern type''' drop down.  
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|Click on '''Pattern type''' drop down >> point to the options
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|Click on the '''Pattern type''' drop down.  
  
  
 
Here we can create separate patterns for '''Forum, Content, Taxonomy term''' and '''User'''.
 
Here we can create separate patterns for '''Forum, Content, Taxonomy term''' and '''User'''.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click '''Content >> Path pattern field'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| For example, I will select '''Content'''.
  
For example I will select '''Content'''.
 
  
 +
In the '''Path pattern field''', we have to provide the pattern template.
  
In the '''Path pattern''' field, we have to provide the pattern template.
+
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Template variables are called as '''tokens'''.  
  
  
Template variables are called as '''tokens'''.  
+
They are dynamically generated for each '''entity'''.  
  
 
+
|-
They are dynamically generated for each entity.  
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Point to '''Browse available tokens'''
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| '''Token module''' provides these variables.
 
+
'''Token''' module provides these variables.
+
  
  
 
When you see '''Browse available tokens''' in any input form, you can insert pre-defined '''tokens'''.  
 
When you see '''Browse available tokens''' in any input form, you can insert pre-defined '''tokens'''.  
  
 
+
|-
Click on the '''Path pattern''' box where you want to insert a '''token'''.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click '''Path pattern''' box >> Type '''content/.''' >> Click '''Browse available tokens'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click on the '''Path pattern''' box where you want to insert a '''token'''.
  
  
Line 170: Line 162:
 
Then click on the '''Browse available tokens''' link.
 
Then click on the '''Browse available tokens''' link.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| A popup window opens up to show the '''Available tokens'''.
  
A popup window opens up to show the '''Available''' '''tokens'''.
+
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Point to '''Nodes'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Suppose we want a pattern like '''content/[title of the page]'''
  
  
Suppose we want a pattern like '''<nowiki>content/[title of the page].</nowiki>'''
+
The '''token''' for the title of the page is under the '''Nodes''' section.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click on the right arrow
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click on the right arrow button of the '''Nodes '''section.
  
The '''token''' for the title of the page is under the '''nodes''' section.
+
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Choose '''token [node:title]'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Choose the '''token [node:title]''' which will be replaced by the '''Title '''of the page.  
  
  
Click on the right arrow button of the '''Nodes '''section.  
+
This will insert '''[node:title]'''at the cursor location in the form box.
  
 
+
|-
Choose the '''<nowiki>token [node:title] </nowiki>'''which will be replaced by the '''Title '''of the page.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Select '''token'''
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| If this does not happen, make sure to click on the box and position the cursor as required.  
 
+
This will insert '''<nowiki>[node:title] </nowiki>'''at the cursor location in the form box.
+
 
+
 
+
If this does not happen, make sure to click on the box and position the cursor as required.  
+
  
  
 
Then select the '''token''' again.  
 
Then select the '''token''' again.  
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Point to '''Content type'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Under '''Content type''', we can select to which '''entity type''' this pattern should be applied.
  
Under '''Content''' '''type''', we can select to which entity type this pattern should be applied.
 
  
 +
Let us select all the '''types''' so that this pattern is default for all of them.
  
Let us select all the types so that this pattern is default for all of them.
+
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| This setting can also be overridden for a particular '''type'''.
  
  
This setting can also be overridden for a particular type.
+
Example: we can create '''usergroup/[node:title]'''and apply it only for '''User Group.'''
  
 
+
|-
Example: we can create '''<nowiki>usergroup/[node:title] </nowiki>'''and apply it only for '''User Group.'''
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| '''Label field'''>>type '''Content Title,''' >> click '''Save'''
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| In the '''Label field''', type '''Content Title,''' then click on the '''Save''' button.
 
+
In the '''Label''' field, type '''Content Title,''' then click on the '''Save''' button.
+
  
  
 
Here, we can check the new pattern we just created.
 
Here, we can check the new pattern we just created.
  
 
+
|-
This pattern will be applied to generate '''URL aliases''' for all newly added content.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| This pattern will be applied to generate '''URL aliases''' for all newly added content.
  
  
 
But it will not create the '''URL aliases''' for existing contents.
 
But it will not create the '''URL aliases''' for existing contents.
  
 +
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click '''Bulk generate''' >> select '''Content type''' >> click on '''Update'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| To apply it for the existing contents, click on the '''Bulk generate''' tab.
  
To apply it for the existing contents, click on the '''Bulk generate''' tab.
 
  
 +
Select '''Content type''' and click on the '''Update''' button.
  
Select '''Content''' type and click on the '''Update''' button.
+
|-
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| It is started generating the '''URL aliases'''.
It is started generating the '''URL aliases'''.
+
  
  
 
It can take a while depending on the number of existing contents.
 
It can take a while depending on the number of existing contents.
  
 
+
|-
Now click on the '''List''' tab.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click '''List'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Now click on the '''List''' tab.
  
  
 
We can see that the''' URL aliases''' for our content.
 
We can see that the''' URL aliases''' for our content.
  
 
+
|-
Each''' node''' on our''' site''' has a system path of''' /node/nodeid'''.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"|
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Each''' node''' on our''' site''' has a system path of''' /node/nodeid'''.
  
  
 
The newly generated '''URL alias '''is there in the first '''Alias''' column.
 
The newly generated '''URL alias '''is there in the first '''Alias''' column.
  
 
+
|-
We can see that all the''' aliases''' follow the same''' pattern.'''
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Scroll and show all the '''aliases'''
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| We can see that all the''' aliases''' follow the same''' pattern.'''
  
  
 
You have to do this each time you create a new''' Content type.'''
 
You have to do this each time you create a new''' Content type.'''
  
 
+
|-
Use the following thumb rules to create '''patterns'''.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Slide
 
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Use the following thumb rules to create '''patterns'''.
  
 
* Use lower case words  
 
* Use lower case words  
 
* Do not give space between words  
 
* Do not give space between words  
* Separate words by hyphen and not underscore
+
* Separate words by hyphen and not '''underscore'''
* Use meaningful, human readable words in the URL for search engine optimisation (SEO)
+
* Use meaningful, human readable words in the '''URL''' for '''search engine optimisation (SEO)'''
 
* Use '''date tokens''' for contents classified by time  
 
* Use '''date tokens''' for contents classified by time  
  
There are more options available to control the URL alias pattern in the '''Settings''' tab.
+
|-
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Click on '''Settings''' >> point to the options
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| There are more options available to control the '''URL alias''' pattern in the '''Settings''' tab.
  
  
Here we can see default S'''eparator, length''' etc.
+
Here we can see default '''Separator, length''' etc.
  
 
+
|-
We also see that by default several common words are removed from the pattern.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| Scroll to show
 +
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.159cm;padding-right:0.185cm;"| We also see that by default several common words are removed from the pattern.
  
  
This is to keep the endpoint compact and meaningful.
+
This is to keep the '''endpoint''' compact and meaningful.
  
 
|-
 
|-
Line 319: Line 328:
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 00:41
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 00:41
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Here we will be able to click and drag and re-order our''' menu links'''.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Here we will be able to click and drag and re-order our''' Menu links'''.
  
 
|-
 
|-
Line 359: Line 368:
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 1:27
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 1:27
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Please remember, not all''' themes''' is''' Drupal''' support''' sub menus''' or''' dropdown menus.'''
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Please remember, not all''' themes''' in''' Drupal''' support''' sub menus''' or''' dropdown menus.'''
  
  
Line 366: Line 375:
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 1:40
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 1:40
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| For now, go back to''' Structure, Menus''' and edit the''' main menu.'''
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| For now, go back to''' Structure, Menus''' and edit the''' Main menu.'''
  
  
Line 396: Line 405:
  
  
And all the''' nodes''' that start with that letter, will show up.
+
All the''' nodes''' that start with that letter, will show up.
  
 
|-
 
|-
Line 423: Line 432:
 
|-
 
|-
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 3:58
 
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| 3:58
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Click''' Save. '''Let’s just double check if that works and indeed it does.
+
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0.185cm;padding-bottom:0.185cm;padding-left:0.132cm;padding-right:0.185cm;"| Click''' Save. '''
 +
 
 +
Let’s just double check if that works and indeed it does.
  
 
|-
 
|-
Line 430: Line 441:
  
  
With this in our''' menu system,''' it will be easier to create''' menu item''' for a''' View''' or a''' content item.'''
+
With this in our''' menu system,''' it will be easier to create''' Menu item''' for a''' View''' or a''' Content Type.'''
  
 
|}
 
|}
Line 449: Line 460:
 
In this tutorial we learnt about
 
In this tutorial we learnt about
  
* Setting up URL Patterns
+
* Setting up '''URL Patterns'''
* Menu management
+
* '''Menu management'''
 
+
 
+
  
 
|-
 
|-
Line 458: Line 467:
  
 
Acknowledgement
 
Acknowledgement
 
 
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| This video is
 
| style="border:1pt solid #000000;padding:0.097cm;"| This video is
Line 465: Line 472:
 
* adapted from Acquia and OSTraining
 
* adapted from Acquia and OSTraining
 
* and revised by Spoken Tutorial Project, IIT Bombay.
 
* and revised by Spoken Tutorial Project, IIT Bombay.
 
 
  
 
|-
 
|-
Line 496: Line 501:
  
 
Acknowledgement
 
Acknowledgement
 
 
  
 
| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is funded by
 
| style="border:1pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is funded by

Latest revision as of 12:14, 22 July 2016

Title: Menu and Endpoints


Keywords: Drupal, Video tutorial, URL paths, Pathauto, Token, Menu, System, Content


Visual Cue
Narration
Slide 1:

Menu and Endpoints

Welcome to the Spoken tutorial on Menu and Endpoints.
Slide 2:

Learning Objectives


In this tutorial, we will learn to set up URL Patterns.


We will also learn about Menu management.

Slide 3:

System requirement


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.

00:18 In this tutorial, we will talk about the process of creating proper URL paths for our website.
Slide Endpoints and aliases.
  • Endpoints are URL paths which display a particular content.
  • By default in Drupal, the endpoint of a node is node/[node:id].
  • Sending this to a server will display the contents of the node.
  • A number in the ID is not human readable.
Slide
  • That is, we cannot easily associate a particular content with say, node/278162
  • A human readable endpoint is available by creating an alias.
  • Alias is an alternate URL path for the same content.
  • We can use either the original or any one of several aliases, for displaying the same content.
Slide
  • For example node/278162 and content/drupal-camp-mumbai-2015
  • Both return the same content.
  • The second one is easy to remember.
Let us now create URL patterns that will apply to all the contents we have.
00:30 Setting up URL paths require three modules.
00:35 Those three modules are the Pathauto, Token and CTools.
1:03 Pls go ahead and get the Pathauto installed on your machine.
1:06 Come back to the Pathauto project page.


Here, you will notice that Pathauto requires Token and CTools.

1:22 Install Token and CTools.


Once you have installed these these modules, turn them on.

1:29 Once we have done that, we are ready to go.
1:33 Click on Configuration.


Down here on the left hand side, under the SEARCH AND METADATA section, you will see URL aliases.

Click on Patterns >> Add Pathauto pattern By default, there are no URL aliases available.


Click on the Patterns tab.


Click on the Add Pathauto pattern button.

Click on Pattern type drop down >> point to the options Click on the Pattern type drop down.


Here we can create separate patterns for Forum, Content, Taxonomy term and User.

Click Content >> Path pattern field For example, I will select Content.


In the Path pattern field, we have to provide the pattern template.

Template variables are called as tokens.


They are dynamically generated for each entity.

Point to Browse available tokens Token module provides these variables.


When you see Browse available tokens in any input form, you can insert pre-defined tokens.

Click Path pattern box >> Type content/. >> Click Browse available tokens Click on the Path pattern box where you want to insert a token.


Type content/.


Then click on the Browse available tokens link.

A popup window opens up to show the Available tokens.
Point to Nodes Suppose we want a pattern like content/[title of the page]


The token for the title of the page is under the Nodes section.

Click on the right arrow Click on the right arrow button of the Nodes section.
Choose token [node:title] Choose the token [node:title] which will be replaced by the Title of the page.


This will insert [node:title]at the cursor location in the form box.

Select token If this does not happen, make sure to click on the box and position the cursor as required.


Then select the token again.

Point to Content type Under Content type, we can select to which entity type this pattern should be applied.


Let us select all the types so that this pattern is default for all of them.

This setting can also be overridden for a particular type.


Example: we can create usergroup/[node:title]and apply it only for User Group.

Label field>>type Content Title, >> click Save In the Label field, type Content Title, then click on the Save button.


Here, we can check the new pattern we just created.

This pattern will be applied to generate URL aliases for all newly added content.


But it will not create the URL aliases for existing contents.

Click Bulk generate >> select Content type >> click on Update To apply it for the existing contents, click on the Bulk generate tab.


Select Content type and click on the Update button.

It is started generating the URL aliases.


It can take a while depending on the number of existing contents.

Click List Now click on the List tab.


We can see that the URL aliases for our content.

Each node on our site has a system path of /node/nodeid.


The newly generated URL alias is there in the first Alias column.

Scroll and show all the aliases We can see that all the aliases follow the same pattern.


You have to do this each time you create a new Content type.

Slide Use the following thumb rules to create patterns.
  • Use lower case words
  • Do not give space between words
  • Separate words by hyphen and not underscore
  • Use meaningful, human readable words in the URL for search engine optimisation (SEO)
  • Use date tokens for contents classified by time
Click on Settings >> point to the options There are more options available to control the URL alias pattern in the Settings tab.


Here we can see default Separator, length etc.

Scroll to show We also see that by default several common words are removed from the pattern.


This is to keep the endpoint compact and meaningful.

3:16 To summarise -

Pathauto and Token modules allow us to

  • set up URL patterns
  • delete aliases and
  • bulk generate aliases

at any time.

3:29 From now onwards, every new node will use the patterns that we have established.
00:05 Now, we will talk about the Menus.
00:07 We have been adding menus to our site, in a random order, mostly based on the Views and basic pages.
00:18 Now, let’s see how we can manage the menu system.
00:22 Go to Structure, scroll down and click on Menus.
00:28 We have a number of different menus here that comes with Drupal, by default.


We have six menus, to be exact.

00:34 We are interested in the Main navigation menu.


So click on Edit menu.

00:41 Here we will be able to click and drag and re-order our Menu links.
00:48 Let’s drag Home and Upcoming Events to the top.
00:54 You can re-order these, in any way you want.


Once done, click Save.

1:01 Now we have got Events and Upcoming Events.


Let’s click and drag Events to the top and then drag Upcoming Events to the right.


This will create a sub menu.

1:12 That’s pretty simple.


Click Save and take a look at our front page.

1:19 Notice that now, we have got four menus.
1:23 Where did our Event sub menu go?
1:27 Please remember, not all themes in Drupal support sub menus or dropdown menus.


Bartick theme is one of them.

1:40 For now, go back to Structure, Menus and edit the Main menu.


Drag Upcoming Event back over here and click Save.

2:16 What if we need a link to a particular node or to a particular section of our site?
2:36 For instance if I wanted a menu link for my Forums, I would first go back to the site.
2:41 Go to the Forums page and copy the actual URL, which is just /forum
2:53 Then come back over and click on Edit menu and then on Add link.
2:58 Give it a title called Forum and paste the copied link.
3:03 If you are looking at a specific piece of content, just type a letter like F or G.


All the nodes that start with that letter, will show up.

3:15 Say for instance if we type an a , all the nodes that have a in the title, will show up.
3:22 We can just select the one we are looking for and it will tell us that its node id number 1.
3:28 If we want an internal path, such as the ability to add a node, then it would be /node/add.
3:36 If we want to link it to the Homepage, it will be front.


But we want /forum here, which is a link to the Forum.

3:51 Click Save and now we have a link to the Forum
3:58 Click Save.

Let’s just double check if that works and indeed it does.

4:06 So play around a little bit, to understand it better.


With this in our menu system, it will be easier to create Menu item for a View or a Content Type.

With this we come to the end of this tutorial.
Slide 5:

Summary


Let us summarize.


In this tutorial we learnt about

  • Setting up URL Patterns
  • Menu management
Slide 6:

Acknowledgement

This video is
  • adapted from Acquia and OSTraining
  • and revised by Spoken Tutorial Project, IIT Bombay.
Slide 7:

Acknowledgement


The video at this link summarises the Spoken Tutorial project.


Pls download and watch it.

Slide 8:

Spoken Tutorial Workshops


The Spoken Tutorial Project Team conducts workshops and gives certificates.


For more details, please write to us.

Slide 9:

Acknowledgement

Spoken Tutorial Project is funded by
  • NMEICT, Ministry of Human Resource Development and
  • NVLI, Ministry of Culture

Government of India.

This is Calvin Nikhil Tomy signing off.


Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst