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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 731: Line 731:
 
|-
 
|-
 
| style="border:1pt solid #000000;padding:0.176cm;"| 4:15
 
| style="border:1pt solid #000000;padding:0.176cm;"| 4:15
−
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types'''.
+
| style="border:1pt solid #000000;padding:0.176cm;"| Click on''' Structure, Content types'''  
  
−
In the''' Events,''' click''' Manage display.'''
+
and then click on''' Manage display''' in the''' User Groups'''.
  
 
|-
 
|-

Revision as of 11:57, 1 August 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 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 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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Drupal/C2/Modifying-the-Display-of-Content/English&oldid=27517"