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

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

Visual Cue	Narration
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 Displays Managing Full content display and Managing display Teaser
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.
	Let us open our website which we created earlier.

	Part 1
00:05	Now we have our content. Let’s see how it actually looks and how Drupal renders it to the page.
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 a listing of the nodes in Teaser mode, with a Read more after the Title.
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. Let’s click on Teaser.
1:55	In the Teaser mode, the only thing that is visible is the Event Description. And the Links, which is the Read more link.
2:02	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.
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. Notice there is Form modes as well.
2:29	This Form modes is the layout for how data is entered. This View modes is the layout for how data is viewed.
2:35	Click on View modes.
2:37	Under the Content View mode, we see- Full content, RSS, Search index, Search results, Teaser. 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. But all are not enabled for every Content type.
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. Click on DrupalCamp Cincinnati.
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. Let’s drag that down below Logo.
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. We will learn more about Image styles when we get to Views.
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. The Body will wrap around it.
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. We use a gear to configure something.
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 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.
2:39	Since Event Topics is presented in a column, we will choose Above. Once again, it is linked to the Referenced entity.
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. Click Save.
4:05	Then choose Full content. This is similar to what we did with our Events.
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. I prefer to keep this as Plain text.
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. 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.
5:01	I will keep this as Label.
5:06	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.
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. Here we have the Group website, the description, the Contact information. This is created by devel.
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. Notice that devel has double selected something. We will just leave it as it is for now. Lastly, the Event sponsored is DrupalCamp Cincinnati.
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. If you look at these two, they are not that bad.
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. We will hide the LABEL and change the FORMAT to Thumbnail.
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. This makes the logo as a link straight into the content. Now click Update.
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. Then click the drop down and change the option to Trimmed.
1:57	Now, our Teaser mode should have the Logo on the left, the Website, the Date and the Description on the right, with the Links.
2:06	Let’s see how it looks for now. Click Save.
2:12	Go back to the site.
2:15	You will see that DrupalCamp Cincinnati has been updated. We will update the Date field later.
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. Instead of Time ago we will choose Custom.
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. 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.
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 - the Title, the logo, the website and the Event Date.
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. With this we come to an end of this tutorial.

Slide 5: Summary	Let us summarize. In this tutorial we have learnt about Displays Managing Full content display and Managing display Teaser
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:	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 9:	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
	This is Vanessa Varkey signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst

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

Latest revision as of 17:32, 14 September 2016

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 24: / Line 24: @@
 | style="border:1pt solid #000000;padding:0.097cm;"| 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'''
 |-
@@ Line 53: / Line 51: @@
 {| 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;"| 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;"| 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;"| Now, let’s update the''' layout''' for our''' Events content type'''.
+| style="border:1pt solid #000000;padding:0.176cm;"| Now, let’s update the''' layout''' for our''' Events Content type'''.
 |-
@@ Line 107: / Line 111: @@
 |-
 | 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'''
 |-
 | 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 content type''' look better.
+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;"| 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;"| 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.'''
@@ Line 228: / Line 238: @@
 {| 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;"| First let's update the''' Full Content View'''.
@@ Line 282: / Line 296: @@
 |-
 | 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.
 |-
@@ Line 294: / Line 308: @@
 |-
 | 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.
+| 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,'''
@@ Line 347: / Line 361: @@
-Once again, it is linked to the''' referenced entity'''.
+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;"| Keep''' Group Experience Level''' as''' Above,''' because is a list of all of the experience.
+| 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;"| Click''' Content''', and click on a user group in the list.
+| 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;"| A''' Contact Email,''' this is fake id which is also created by''' devel'''.
+| 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;"| 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;"| This layout is the best that we can get, without adding any''' display''' or''' layout modules'''.
+| 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: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;"| 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;"| 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 item.
+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;"| Drag the''' links''' to the bottom.
+| 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;"| Next, let’s trim the '''Event Description'''.
 |-
@@ Line 611: / Line 631: @@
 * the''' Website''',
 * the''' Date''' and
-* the''' Description''' on the right, with the''' links'''.
+* the''' Description''' on the right, with the''' Links'''.
 |-
@@ Line 631: / Line 649: @@
-We will update the''' date field''' later.
+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;"| 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;"| 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;"| Notice here, there is a link to the''' PHP documentation''' for''' date formats.'''
+| 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 month,
-* and then the''' '''appropriate suffix '''st nd rd th'''
+* and then the appropriate suffix - '''st nd rd th'''
 * 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;"| 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.'''
 |-
@@ Line 715: / 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''', In the''' Events''' click''' Manage display.'''
+| 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;"| This one is a little different because we don’t have any images.
+| 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
-* Displays
+* '''Displays'''
-* Managing full content display and
+* Managing '''Full content display''' and
-* Managing display teaser
+* Managing display '''Teaser'''
 |-
@@ Line 806: / Line 822: @@
 * adapted from Acquia and OSTraining
 * and revised by Spoken Tutorial Project, IIT Bombay.
 |-