Difference between revisions of "Drupal/C2/Modifying-the-Display-of-Content/English"
(Created page with "'''Title of Script:''' Modifying the Display of Content '''Keywords: video tutorial, drupal, Full content layout, Teaser layout, Default layout, Custom Display Settings, Full...") |
Nancyvarkey (Talk | contribs) |
||
Line 107: | Line 107: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:45 | | 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 | + | | style="border:1pt solid #000000;padding:0.176cm;"| '''Default''' is the''' default layout''' – we are going to add one of the''' Full view layout''' |
|- | |- | ||
Line 282: | Line 282: | ||
|- | |- | ||
| style="border:1pt solid #000000;padding:0.176cm;"| 1:39 | | 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 | + | | 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. |
|- | |- |
Revision as of 18:54, 19 July 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. |
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 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.
|
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. Notice there is Form modes as well. |
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. |
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 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.
|
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. |
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 | Once again, 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, 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.
|
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.
|