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

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.

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.

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 is 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.

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 item. 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	Once again, 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, In the Events click Manage display.
4:21	Then click on Teaser.
4:23	This one is a little different because we don’t 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