Drupal/C2/Modifying-the-Display-of-Content/English-timed

Time	Narration
00:01	Welcome to the Spoken tutorial on Modifying the Display of Content.
00:06	In this tutorial, we will learn about: Displays Managing Full content display and Managing display Teaser.
00:16	To record this tutorial, I am using: Ubuntu Linux Operating System Drupal 8 and Firefox Web browser.
00:26	You can use any web browser as per your choice.
00:31	Let us open our website which we created earlier.
00:35	Now, we have our content. Let’s see how it actually looks and how Drupal renders it to the page.
00:42	Note that in the Teaser mode, we get the Title and the Body with a Read more.
00:49	As we scroll down, we can also see all of our new content here.
00:55	By default, Drupal outputs the last 10 nodes created that have been promoted to the Homepage.
01:03	Notice, there is some pagination down here at the bottom- page 1, 2, 3, Next and Last.
01:12	If we click on Last, we will see a listing of the nodes in Teaser mode, with a Read more after the Title.
01:20	This is not appealing.
01:22	Drupal allows us to set up what it calls “View modes”.
01:27	Click on Structure and then Content Types.
01:31	Now, let’s update the layout for our 'Events' Content type.
01:36	Click on the drop-down, then click on the Manage display.
01:41	Notice here at the top, on the Manage display tab, there is a Default and a Teaser.
01:48	Default is the default layout – we are going to add one of the Full view layout.
01:55	Next is the Teaser layout. Let’s click on Teaser.
02:00	In the Teaser mode, the only thing that is visible is the Event Description. And the Links, which is the Read more link.
02:09	Here it says "Trimmed limit: 600 characters".
02:14	We will update some of these things to make the Teaser mode for our 'Event' Content type look better.
02:21	Before we proceed, we need to understand that Drupal gives us what is called Layouts.
02:28	Let’s click on Structure and Display modes.
02:32	Then click on View modes. Notice, there is Form modes as well.
02:38	This Form modes is the layout for how data is entered.
02:43	This View modes is the layout for how data is viewed.
02:48	Click on View modes.
02:51	Under the Content View mode, we see Full content, RSS, Search index, Search results, Teaser.
03:02	We can also add a new Content View mode.
03:06	The key thing is - we are not limited to what Drupal gives us out of the box.
03:12	We also have Blocks, Comments, Taxonomy terms and Users.
03:18	We can add our own View modes to any of these.
03:22	Please make a note of that. It is an important thing to remember.
03:27	These are the ones that are available. But all are not enabled for every Content type.
03:34	Let us go back and do that.
03:36	Let’s go back to Structure and click Content types.
03:42	On the Events Content type, click Manage display.
03:46	Once again, we’re on this page where we have Default and Teaser.
03:52	Scroll down to the bottom and click on CUSTOM DISPLAY SETTINGS.
03:57	Put a check-mark in Full content.
04:00	This will allow us to manipulate how the fields are laid out, when we are actually looking at a node.
04:07	Click Save.
04:09	Now, here at the top, we have Full content and Teaser.
04:14	Next, we will learn how to update both of these View modes.
04:19	First, let's update the Full Content view.
04:23	These are the fields in our Full Content layout and the order they’re in and how the LABELs appear.
04:30	As a reminder, let’s go back and take a look at an event. Click on DrupalCamp Cincinnati.
04:37	The body is at the top.
04:39	Event website, Date, Topics and the logo if we had one.
04:45	Now, let’s clean these up to make our content look a little better.
04:50	Structure > Content types > Manage display for Events and then click on Full Content.
04:58	Here, Event Description is in full mode.
05:02	Let’s drag that down below Logo.
05:05	Then, let’s hide the LABEL for the Logo
05:09	and change it from Original image to a Medium size.
05:14	This is an Image style.
05:17	We will learn more about Image styles when we get to Views.
05:22	Understand that we are able to generate any size image in any Image style that we want.
05:29	Then we can use it anywhere we want. Let’s click on Update.
05:35	Now our Event Logo will be on the left because this Theme floats the images to the left.
05:43	The Body will wrap around it.
05:45	Let’s put the Event Date as LABEL Inline.
05:49	Let’s change the Format now.
05:52	Click on the gear on the right. We use a gear to configure something.
05:59	We will change this to the Default long date.
06:03	Click Update. This is nicer.
06:07	Let’s keep Event Sponsors as Inline.
06:10	You will notice that the output is linked to the referenced entity.
06:15	That means, if the Cincinnati User Group is sponsoring DrupalCamp Cincinnati, that will be a link to the User Group page.
06:24	That is exactly what we want.
06:27	Since Event Topics is presented in a column, we will choose Above.
06:33	Once again, it is linked to the Referenced entity.
06:37	Now, please pause the tutorial and check that your screen looks like mine.
06:43	Click on Save.
06:45	Let’s take a look at one of our nodes in Full View mode.
06:49	Click on Content and then on any event here.
06:54	The names of your Events and the text will be very different from mine.
06:59	That’s just because devel uses Lorem Ipsum.
07:03	Click on any Event here.
07:06	You should now see a layout that looks something like this.
07:10	This looks very nice.
07:12	Event Website, Event Date, Event Sponsors.
07:18	There is a little problem with the Event Topics, but for that we can just use some CSS.
07:26	Their links point to the correct places.
07:29	Let’s update the full display for our User Groups Content type.
07:34	Click on Structure > Content types and then on Manage display, in the User Groups.
07:42	Once again, we need to update our Views.
07:46	Scroll down, click CUSTOM DISPLAY SETTINGS and choose Full content.
07:52	We can update any of these displays as per our preference. Click Save.
07:59	Then choose Full content. This is similar to what we did with our Events.
08:06	Let’s put the Group Website above Description and the site Inline.
08:12	Put the Group Contact and Email together again, making their LABELs Inline.
08:19	I prefer to leave the Email as Plain text, rather than Email link.
08:24	This is because I don’t use my default Email program to send email anymore.
08:30	I prefer to keep this as Plain text.
08:33	Keep Group Experience Level as "Above", because its a list of all of the experience.
08:40	Finally, keep Events sponsored as "Above" as well.
08:45	Leave the FORMAT as "Label".
08:47	We could choose Entity ID or Rendered entity also.
08:52	But, on doing so, we will end up with a whole bunch of Event pages there.
08:58	I will keep this as "Label".
09:01	Here is the "Link to the referenced entity".
09:04	Using this, we can click the link to go to DrupalCamp Cincinnati in the Cincinnati User Group.
09:12	Let’s click on Save and check what we did.
09:16	Click Content and click on a User Group in the list.
09:22	Here we have the Group website, the description, the Contact information. This is created by devel.
09:31	A Contact Email - this is fake id which is also created by devel.
09:38	The key thing here is, it works!
09:41	Here is Group Experience Level. Notice that devel has double selected something.
09:48	We will just leave it as it is for now.
09:51	Lastly, the Event sponsored is "DrupalCamp Cincinnati".
09:56	This layout is the best that we can get, without adding any Display or Layout modules.
10:03	We have done the Full content successfully.
10:07	Next, let us learn to update our Teaser modes. If you look at these two, they are not that bad.
10:16	But as you scroll down, our Teaser modes are not very nice.
10:21	We can fix that easily.
10:24	Click on Structure and Content types.
10:28	In the Events, click on Manage display, then on Teaser.
10:33	Drupal gives us links and Event Description which is the body field.
10:39	Let’s now update our Teaser mode for this.
10:43	Just drag the Event Website to the top and choose Inline.
10:49	Then drag Event Date up as well because it is important.
10:55	Next, drag the Event Logo and put it at the top as well.
11:00	We will hide the LABEL and change the FORMAT to Thumbnail.
11:05	We can create Image styles for any image on our site.
11:10	But we will learn about it later.
11:13	Change the Link image as Content.
11:17	This makes the logo as a link straight into the content. Now click Update.
11:23	We have the logo, the website and the date.
11:28	Drag the Links to the bottom.
11:31	Next, let’s trim the Event Description.
11:35	Click the gear and change this to 400 characters.
11:40	Click Update. Then click the drop-down and change the option to Trimmed.
11:47	Now, our Teaser mode should have: the Logo on the left, the Website, the Date and the Description on the right, with the Links.
11:58	Let’s see how it looks for now. Click Save.
12:03	Go back to the site.
12:05	You will see that DrupalCamp Cincinnati has been updated.
12:09	We will update the Date field later.
12:12	You will notice that the Body has been trimmed.
12:16	Click on Structure. Click Content types > Events > Manage display and Teaser.
12:24	Most of this is OK except for Event Date. Instead of Time ago we will choose Custom.
12:32	Notice here, there is a link to the PHP documentation for Date Formats.
12:38	Let’s update Date-Time format now.
12:41	First of all, delete that.
12:44	Lowercase l comma capital F jS comma and capital Y.
12:51	This means the day of the week, the day of the month,
12:55	and then the appropriate suffix - st nd rd th and the four digit year.
13:04	Click Update.
13:06	We can now see a preview of the date here.
13:09	Click Save.
13:11	Let’s hide the Event Description, for now.
13:14	Click on Save.
13:16	Let’s take a look at our site.
13:19	Now, our Teaser for our Event can be seen here - the Title, the logo, the website and the Event Date.
13:28	Let’s update the Teaser mode for our User Groups.
13:32	Click on Structure > Content types and then on Manage display in the User Groups.
13:39	Then click on Teaser.
13:42	This one is a little different because we do not have any images.
13:47	We could have had a User Group logo.
13:50	Let’s put the User Group Website at the top.
13:53	We will not display the User Group Description.
13:57	Let’s keep the Group Contact email.
14:00	And change the label Group Website and Contact Email to "Inline".
14:06	Here again, I like to keep the FORMAT as Plain text, because I don’t use my default email.
14:13	This is a very simple Teaser mode.
14:16	Click Save.
14:18	Back to our site.
14:20	The Cincinnati User Group has a Group Website and the Contact Email with a Read more.
14:27	This is how we update the View modes for both the Full content and the Teaser mode.
14:33	In subsequent tutorials, we will go to our landing pages and get our content out, in a usable form.
14:41	With this. we come to the end of this tutorial. Let us summarize.
14:46	In this tutorial, we have learnt about: Displays Managing Full content display and Managing display Teaser.
15:11	This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
15:21	The video at this link summarizes the Spoken Tutorial project. Please download and watch it.
15:28	The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
15:36	Spoken Tutorial Project is funded by- NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India.
15:47	This is Vanessa Varkey, signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, PoojaMoolya, Pratik kamble, Sandhya.np14