Difference between revisions of "Drupal/C2/Modifying-the-Display-of-Content/English"
Nancyvarkey (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
(2 intermediate revisions by 2 users not shown) | |||
Line 24: | Line 24: | ||
| style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about | | style="border:1pt solid #000000;padding:0.097cm;"| In this tutorial, we will learn about | ||
− | * Displays | + | * '''Displays''' |
− | * Managing | + | * Managing '''Full content display''' and |
− | * Managing display | + | * Managing display '''Teaser''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 53: | Line 51: | ||
{| style="border-spacing:0;" | {| style="border-spacing:0;" | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| '''Part 1''' | ||
+ | |||
+ | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 00:05 | | style="border:1pt solid #000000;padding:0.176cm;"| 00:05 | ||
| style="border:1pt solid #000000;padding:0.176cm;"| Now we have our content. | | style="border:1pt solid #000000;padding:0.176cm;"| Now we have our content. | ||
Line 79: | Line 81: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 00:55 | | 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;"| If we click on''' Last,''' we will see |
+ | *a listing of the''' nodes''' in''' Teaser mode''', | ||
+ | *with a''' Read more''' after the''' Title'''. | ||
|- | |- | ||
Line 95: | Line 99: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:26 | | 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 | + | | style="border:1pt solid #000000;padding:0.176cm;"| Now, let’s update the''' layout''' for our''' Events Content type'''. |
|- | |- | ||
Line 111: | Line 115: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:51 | | 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;"| Next is the''' Teaser layout.''' |
+ | |||
+ | |||
+ | Let’s click on''' Teaser'''. | ||
|- | |- | ||
Line 118: | Line 125: | ||
− | And the''' Links,''' which is the''' Read more''' link | + | And the''' Links,''' which is the''' Read more''' link. |
|- | |- | ||
Line 125: | Line 132: | ||
− | We will update some of these things to make the''' Teaser mode''' for our''' Event | + | We will update some of these things to make the''' Teaser mode''' for our''' Event Content type''' look better. |
|- | |- | ||
Line 137: | Line 144: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 2:24 | | 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;"| Then click on''' View modes'''. |
+ | |||
+ | |||
+ | Notice there is''' Form modes''' as well. | ||
|- | |- | ||
Line 152: | Line 162: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 2:37 | | 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 | + | | style="border:1pt solid #000000;padding:0.176cm;"| Under the''' Content View mode''', we see- |
* '''Full content, RSS, Search index, Search results, Teaser.''' | * '''Full content, RSS, Search index, Search results, Teaser.''' | ||
Line 228: | Line 238: | ||
{| style="border-spacing:0;" | {| style="border-spacing:0;" | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| '''Part 2''' | ||
+ | |||
+ | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 00:11 | | 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;"| First let's update the''' Full Content View'''. | ||
Line 294: | Line 308: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:51 | | 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 | + | | 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. |
Line 335: | Line 349: | ||
− | That means | + | That means, |
* if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,''' | * if the''' Cincinnati User Group''' is sponsoring''' DrupalCamp Cincinnati,''' | ||
Line 347: | Line 361: | ||
− | Once again, it is linked to the''' | + | Once again, it is linked to the''' Referenced entity'''. |
|- | |- | ||
Line 452: | Line 466: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 4:41 | | 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 | + | | style="border:1pt solid #000000;padding:0.176cm;"| Keep''' Group Experience Level''' as''' Above,''' because its a list of all of the experience. |
|- | |- | ||
Line 485: | Line 499: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 5:15 | | style="border:1pt solid #000000;padding:0.176cm;"| 5:15 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| Click''' Content''', and click on a | + | | style="border:1pt solid #000000;padding:0.176cm;"| Click''' Content''', and click on a '''User Group''' in the list. |
Line 495: | Line 509: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 5:28 | | style="border:1pt solid #000000;padding:0.176cm;"| 5:28 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| A''' Contact Email | + | | 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;"| 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;"| The key thing here is, it works! |
|- | |- | ||
Line 513: | Line 527: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 5:48 | | 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''' | + | | style="border:1pt solid #000000;padding:0.176cm;"| This layout is the best that we can get, without adding any''' Display''' or''' Layout modules'''. |
|- | |- | ||
Line 522: | Line 536: | ||
{| style="border-spacing:0;" | {| style="border-spacing:0;" | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| | ||
+ | | style="border:1pt solid #000000;padding:0.176cm;"| '''Part 3''' | ||
+ | |||
+ | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 00:05 | | 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.''' | | style="border:1pt solid #000000;padding:0.176cm;"| Next let us learn to update our''' Teaser modes.''' | ||
Line 569: | Line 587: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:04 | | 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;"| We can create''' Image styles''' for any image on our''' site'''. |
+ | |||
+ | But we will learn about it later. | ||
|- | |- | ||
Line 576: | Line 596: | ||
− | This makes the''' logo''' as a''' link''' straight into the content | + | This makes the''' logo''' as a''' link''' straight into the content. |
Line 587: | Line 607: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:26 | | style="border:1pt solid #000000;padding:0.176cm;"| 1:26 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| Drag the''' | + | | 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;"| 1.33 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| Next, let’s trim the | + | | style="border:1pt solid #000000;padding:0.176cm;"| Next, let’s trim the '''Event Description'''. |
|- | |- | ||
Line 611: | Line 631: | ||
* the''' Website''', | * the''' Website''', | ||
* the''' Date''' and | * the''' Date''' and | ||
− | * the''' Description''' on the right, with the''' | + | * the''' Description''' on the right, with the''' Links'''. |
− | + | ||
− | + | ||
|- | |- | ||
Line 631: | Line 649: | ||
− | We will update the''' | + | 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;"| 2:25 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| You will notice that, the''' | + | | 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;"| 2:42 | ||
− | | style="border:1pt solid #000000;padding:0.176cm;"| | + | | style="border:1pt solid #000000;padding:0.176cm;"| Click on '''Structure'''. |
+ | |||
+ | Click''' Content types, Events, Manage display''', and''' Teaser'''. | ||
|- | |- | ||
Line 650: | Line 670: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 2:59 | | 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''' | + | | style="border:1pt solid #000000;padding:0.176cm;"| Notice here, there is a link to the''' PHP documentation''' for''' Date Formats.''' |
|- | |- | ||
Line 672: | Line 692: | ||
* the day of the week, | * the day of the week, | ||
* the day of the month, | * the day of the month, | ||
− | * and then the | + | * and then the appropriate suffix - '''st nd rd th''' |
* and the four digit year. | * and the four digit year. | ||
− | |||
− | |||
|- | |- | ||
Line 691: | Line 709: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 3:41 | | 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;"| Let’s hide the''' Event Description '''for now. |
|- | |- | ||
Line 706: | Line 724: | ||
* the''' Title''', the''' logo''', the''' website''' and the''' Event Date.''' | * the''' Title''', the''' logo''', the''' website''' and the''' Event Date.''' | ||
− | |||
− | |||
|- | |- | ||
Line 715: | Line 731: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 4:15 | | 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''' |
+ | |||
+ | and then click on''' Manage display''' in the''' User Groups'''. | ||
|- | |- | ||
Line 723: | Line 741: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 4:23 | | 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 | + | | style="border:1pt solid #000000;padding:0.176cm;"| This one is a little different because we do not have any images. |
|- | |- | ||
Line 789: | Line 807: | ||
In this tutorial we have learnt about | In this tutorial we have learnt about | ||
− | * Displays | + | * '''Displays''' |
− | * Managing | + | * Managing '''Full content display''' and |
− | * Managing display | + | * Managing display '''Teaser''' |
− | + | ||
− | + | ||
|- | |- | ||
Line 806: | Line 822: | ||
* 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. | ||
− | |||
− | |||
|- | |- |
Latest revision as of 17:32, 14 September 2016
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
|
|
Slide 1:
Modifying the Display of Content |
Welcome to the Spoken tutorial on Modifying the Display of Content |
Slide 2:
Learning Objectives
|
In this tutorial, we will learn about
|
Slide 3:
System requirement
|
To record this tutorial, I am using
You can use any web browser as per your choice. |
Let us open our website which we created earlier. |
Part 1 | |
00:05 | Now we have our content.
|
00:11 | Note that in the Teaser mode, we get the Title and the Body with a Read more. |
00:34 | As we scroll down, we can also see all of our new content here. |
00:41 | By default, Drupal outputs the last 10 nodes created, that have been promoted to the Homepage. |
00:50 | Notice there is some pagination down here at the bottom-
page 1, 2, 3, Next and Last. |
00:55 | If we click on Last, we will see
|
1:05 | This is not appealing. |
1:07 | Drupal allows us to set up what it calls “View modes”. |
1:21 | Click on Structure and then Content Types. |
1:26 | Now, let’s update the layout for our Events Content type. |
1:31 | Click on the drop-down, then click on the Manage display. |
1:37 | Notice here at the top, on the Manage display tab, there is a Default and a Teaser. |
1:45 | Default is the default layout – we are going to add one of the Full view layout |
1:51 | Next is the Teaser layout.
|
1:55 | In the Teaser mode, the only thing that is visible is the Event Description.
|
2:02 | Here it says Trimmed limit: 600 characters.
|
2:13 | Before we proceed, we need to understand that Drupal gives us what is called Layouts. |
2:19 | Let’s click on Structure and Display modes. |
2:24 | Then click on View modes.
|
2:29 | This Form modes is the layout for how data is entered.
|
2:35 | Click on View modes. |
2:37 | Under the Content View mode, we see-
We can also add a new Content View mode. |
2:47 | The key thing is - we are not limited to what Drupal gives us out of the box. |
2:53 | We also have Blocks, Comments, Taxonomy terms and Users. |
2:57 | We can add our own View modes to any of these. |
3:01 | Please make a note of that. |
3:05 | It is an important thing to remember. |
3:08 | These are the ones that are available.
|
3:14 | Let us go back and do that. |
3:16 | Let’s go back to Structure and click Content types. |
3:20 | On the Events Content type, click Manage display. |
3:25 | Once again, we’re on this page where we have Default and Teaser. |
3:29 | Scroll down to the bottom and click on CUSTOM DISPLAY SETTINGS. |
3:33 | Put a checkmark in Full content. |
3:36 | This will allow us to manipulate how the fields are laid out, when we are actually looking at a node. |
3:44 | Click Save. |
3:46 | Now here at the top, we have Full content and Teaser. |
3:50 | Next, we will learn how to update both of these View modes. |
Part 2 | |
00:11 | First let's update the Full Content View. |
00:34 | These are the fields in our Full Content layout and the order they’re in and how the LABELs appear. |
00:41 | As a reminder, let’s go back and take a look at an event.
|
00:47 | The body is at the top. |
00:49 | Event website, Date, Topics and the logo if we had one. |
00:54 | Now let’s clean these up to make our content look a little better. |
1:04 | Structure - Content types - Manage display for Events and then click on Full Content. |
1:15 | Here Event Description is in full mode.
|
1:22 | Then let’s hide the LABEL for the Logo. |
1:27 | And change it from Original image to a Medium size. |
1:34 | This is an Image style.
|
1:39 | Understand that we are able to generate any size image in any Image style that we want. |
1:47 | Then we can use it anywhere we want. |
1:49 | Let’s click on Update. |
1:51 | Now our Event Logo will be on the left because this Theme floats the images to the left.
|
2:00 | Let’s put the Event Date as LABEL Inline. |
2:05 | Let’s change the Format now. |
2:07 | Click on the gear on the right.
|
2:13 | We will change this to the Default long date. |
2:20 | Click Update. |
2:22 | This is nicer. |
2:24 | Let’s keep Event Sponsors as Inline. |
2:27 | You will notice that the output is linked to the referenced entity.
That is exactly what we want. |
2:39 | Since Event Topics is presented in a column, we will choose Above.
|
2:48 | Now, please pause the tutorial and check that your screen looks like mine. |
2:57 | Click on Save. |
3:01 | Let’s take a look at one of our nodes in Full View mode. |
3:05 | Click on Content and then on any event here. |
3:08 | The names of your Events and the text will be very different from mine. |
3:12 | That’s just because devel uses Lorem Ipsum. |
3:15 | Click on any Event here. |
3:17 | You should now see a layout that looks something like this. |
3:21 | This looks very nice. |
3:25 | Event Website
Event Date Event Sponsors |
3:29 | There is a little problem with the Event Topics, but for that we can just use some CSS. |
3:34 | Their links point to the correct places. |
3:38 | Let’s update the full display for our User Group Content type. |
3:43 | Click on Structure, Content types, and then click on Manage display in the User Groups. |
3:50 | Once again, we need to update our Views. |
3:53 | Scroll down, click “CUSTOM DISPLAY SETTINGS”, and choose Full content. |
3:59 | We can update any of these displays as per our preference.
|
4:05 | Then choose Full content.
|
4:12 | Let’s put the Group Website above Description and the site Inline. |
4:19 | Put the Group Contact and Email together, again making their LABELs Inline. |
4:27 | I prefer to leave the Email as Plain text, rather than Email link. |
4:32 | This is because I don’t use my default Email programme to send email anymore.
|
4:41 | Keep Group Experience Level as Above, because its a list of all of the experience. |
4:47 | Finally, keep Events sponsored as Above, as well. |
4:50 | Leave the FORMAT as Label.
|
5:01 | I will keep this as Label. |
5:06 | Here is the Link to the referenced entity.
|
5:11 | Let’s click on Save, and check what we did. |
5:15 | Click Content, and click on a User Group in the list.
|
5:28 | A Contact Email - this is fake id which is also created by devel. |
5:33 | The key thing here is, it works! |
5:36 | Here is Group Experience Level.
|
5:48 | This layout is the best that we can get, without adding any Display or Layout modules. |
5:56 | We have done the Full content successfully. |
Part 3 | |
00:05 | Next let us learn to update our Teaser modes.
|
0:12 | But as you scroll down, our Teaser modes are not very nice. |
0:16 | We can fix it easily. |
0:19 | Click on Structure and Content types. |
0:22 | In the Events click on Manage display, then on Teaser. |
0:31 | Drupal gives us links and Event Description, which is the body field. |
0:35 | Let’s now update our Teaser mode for this. |
0:38 | Just drag the Event Website to the top and choose Inline. |
0:45 | Then drag Event Date up as well, because it is important. |
0:52 | Next, drag the Event Logo and put it at the top, as well.
|
1:04 | We can create Image styles for any image on our site.
But we will learn about it later. |
1:12 | Change the Link image to as Content.
|
1:21 | We have the logo, the website, and the date. |
1:26 | Drag the Links to the bottom. |
1.33 | Next, let’s trim the Event Description. |
1:44 | Click the gear and change this to 400 characters. |
1:55 | Click Update.
|
1:57 | Now, our Teaser mode should have
|
2:06 | Let’s see how it looks for now.
|
2:12 | Go back to the site. |
2:15 | You will see that DrupalCamp Cincinnati has been updated.
|
2:25 | You will notice that, the Body has been trimmed. |
2:42 | Click on Structure.
Click Content types, Events, Manage display, and Teaser. |
2:52 | Most of this is ok, except for Event Date.
|
2:59 | Notice here, there is a link to the PHP documentation for Date Formats. |
3:03 | Let’s update Date-Time format now. |
3:07 | First of all, delete that. |
3:09
|
Lowercase l comma capital F jS comma and capital Y.
|
3:29 | Click Update. |
3:32 | We can now see a preview of the date here. |
3:40 | Click Save. |
3:41 | Let’s hide the Event Description for now. |
3:52 | Click on Save. |
3:55 | Let’s take a look at our site. |
3:57 | Now our Teaser for our Event can be seen here -
|
4:11 | Let’s update the Teaser mode for our User Groups. |
4:15 | Click on Structure, Content types
and then click on Manage display in the User Groups. |
4:21 | Then click on Teaser. |
4:23 | This one is a little different because we do not have any images. |
4:27 | We could have had a User Group logo. |
4:29 | Let’s put the User Group Website at the top. |
4:32 | We will not display the User Group Description. |
4:35 | Let’s keep the Group Contact email. |
4:41 | And change the label Group Website and Contact Email to Inline. |
4:45 | Here again, I like to keep the FORMAT as Plain text, because I don’t use my default email. |
4:52 | This is a very simple Teaser mode. |
4:54 | Click Save. |
4:57 | Back to our site. |
5:00 | The Cincinnati User Group has a Group Website and the Contact Email with a Read more. |
5:11 | That is how we update the View modes for both the Full content and the Teaser mode. |
5:18 | In subsequent tutorials, we will go to our landing pages and get our content out, in a usable form.
|
Slide 5:
Summary
|
Let us summarize.
|
Slide 6:
Acknowledgement
|
This video is
|
Slide 7:
Acknowledgement
|
The video at this link summarises the Spoken Tutorial project.
|
Slide 8:
|
The Spoken Tutorial Project Team conducts workshops and gives certificates.
|
Slide 9:
|
Spoken Tutorial Project is funded by
Government of India. |
This is Vanessa Varkey signing off.
|