Difference between revisions of "Drupal/C2/Modifying-the-Display-of-Content/English-timed"
From Script | Spoken-Tutorial
| Line 1: | Line 1: | ||
{| border = 1 | {| border = 1 | ||
| − | | Time | + | | '''Time''' |
| − | | Narration | + | | '''Narration''' |
|- | |- | ||
Latest revision as of 17:43, 24 March 2017
| 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. |
