Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:33Length:3.7 hours
  • Overview
  • Transcript

3.2 Fixing the Teaser Sizing Issue

One thing that you will notice about the Devel module is that its functionality is similar to that of a bazooka. It does a great job at its job, but there is definitely a little collateral damage. In this case, it puts the same text in the Summary and Body fields of our articles and custom content types. Because of this, the teaser views of our content look as if they are displayed incorrectly, when they really aren't. It is more of a data issue. Let's clean things up a bit.

3.2 Fixing the Teaser Sizing Issue

In the previous lesson, we began to talk about one of the cooler features of Drupal, in my opinion anyway. And that is views, and how we can define a set of criteria that will then generate or filter a bunch of content, or specific content types of our choosing, and filter those into a certain number. And then we have a couple of different options of how we want to display that data. And we chose to do it in the form of a page, as is our latest content right here. So I can select this page, and it's going to show me all of the latest content. So it's gonna show me the most recent ten published nodes of my first content type and display them all here. And we selected the teaser view to display them. And then we could go and click on Read More to see more about that information or more about that particular node. But then one interesting thing that happened was, we noticed that the content here is very long and it doesn't seem to be really a teaser view. It seems to be the entire article more or less. And I happen to believe that it is, and I'm gonna show you exactly what's going on in case you were to see something like this in your own site. Now let's dig in a little bit more on this content here. So let's go to shortcuts, and I wanna take a look at my content. And let's just pick one of these. So I know one of the last ones, or one of the example content types here of my first content type, is this first one listed. Now yours probably has a different title or different text in it because it's all randomly generated Lorem ipsum. So it's probably going to be different for each person that follows along. Now, let's take a look at this and as we can see there's quite a bit of data here. It's a fairly long article. So, what I wanna do is I wanna go into edit and I wanna see a little bit more about this data. Well if you take a look at it, it filled in all of the data fields here including Summary and Body. And it looks to me like basically all of the same content was put in the Summary that was put into the Body. And now typically when you're really creating a site, you're probably not going to do this. You're not gonna have the same amount of content in the Summary as you do in the Body. In the Summary, you're truly going to put in the summary. Now, how can we adjust this and make this look right, in case something like this were to happen? Well there's a couple different things that we can do. We could go through all of the different nodes of my first content type and change the summaries to be shorter so that we can see what it would actually look like. Once again, that's very labor intensive and not very useful. But, we can go and start to modify some settings here and there to get this to show exactly like we want. So let's go back to our site here and what I wanna do is I wanna go into Structure. Now within Structure I want to come into my Content Types. And depending on what you want to play around with now because this generated article nodes as well as my first content type nodes, you could do this on either one of them just to see how it affects them. And ultimately it's up to you if you wanna continue to do it. It may not be necessary in a typical production site. Because, like I said, that Summary field is probably going to be drastically shorter than the Body and maybe even empty. And then I'm going to show you why I said earlier in a previous lesson that the teaser will, by default, be the first 600 characters of your body. So, let's just select my first content type as an example. I'm gonna come over here to the right. And I'm going to go to the drop down menu and select Manage Display. Now, one thing that you can do here when you're managing the display is, you can choose which version of the display you are modifying. So we have the default view which is a pretty common view that you're gonna see in a lot of different places. And when you created your view it asked you what type of display did you wanna use. Did you wanna use default, or teaser, or full content, or things like that. And we selected teaser. Well, because we selected teaser, what we wanna do is we wanna modify the manage display of the teaser view. Now if you don't see teaser here or if you see something else, that's easily fixable. Let's scroll down to the bottom here, and let's take a look at the custom display settings which is what is showing up on the top of the screen here. So down below we can see here that we can modify the custom display settings and use custom display settings for the following view modes. So there is Full Content, Teaser, RSS, Search Index, and search result highlighting input. Now the reason that teaser shows up up here is because it is checked. Now I could also select Full Content and hit Save. And if I were to do that we would now get Full Content and Teaser. So I could have full control over how all of these things show up, within those different displays. But like I said before what right now we're interested in teasers. So let's select Teaser, and if we come down here and we take a look at the body field, we see that the label is hidden. We see that the format is Summary or trimmed and the trimmed limit is 600 characters. That's how I knew that the auto generated teaser for any sort of content type that has a body and a summary, where the summary is left empty, it's going to trim the first 600 characters of the body and use that as a teaser. Now this is where we're running into an issue because the Devel module is filling in both of those, the Summary and the Body, with the same content that is extremely long. And the format here is Summary or trimmed. Well the summary is filled in, so it's going to use that. So there's a couple different ways we can go around this. We could either leave the Summary or trimmed, or we could drop it down and use Trimmed automatically so that it's always just going to trim the body and use that as the teaser. Now like I said, this is probably not 100% necessary in a production level site because you're going to be putting in appropriate amount of characters within a summary and ultimately within the teaser. But, to see how it would look you could select Trimmed here, and you could leave it at 600 characters, or you could modify it. 600 sounds like a lot, but once you look at it, it really isn't. So, let's go ahead and hit Save here, and now our settings have been saved. So, let's go back to our site. And you are very quickly going to notice that if I go back to Home and I take a look at my content, now you can see all the instances of my first content type are drastically shorter than the actual articles. Because the articles have the same problem where the article summary, as well as the article body, have all of the same content. So you could go in and modify that as well if you wished also. Now for the latest content now if we were to click on this, now it's gonna look a little bit more appropriate where we're just going to see a small snippet of the information found within the full node. And I can breeze through here a little bit and read a little bit about it. And if I wanted to read more, I could select the Read More text or link and it would take me to the full page, which is exactly what I was looking for it to do. So just to be consistent for now, let's go back in the Structure. Let's go to Content Types, and let's go to Articles as well. And let's do the same thing here just so that we have it basically the same. We wanna manage our display, we want to go into our Teaser, and we wanna make sure that our Body is actually Trimmed, and we'lll hit Save. And now we'll go back to our site, we'll back to home and now everything should be roughly the same size and it is. So now it's a little bit more readable, it's a little bit easier to navigate and there's not so much content on that main page.

Back to the top