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

3.3 Adding a Block to the Sidebar

So far, we have ignored the sidebar of the site, but now it is time to fix that. The sidebar on most websites is a great place to put small bits of controlled data to give the user links to content on the site, such as a list of upcoming events or popular articles. In this lesson we'll learn how to create another type of view and place it in the sidebar of the site.

3.3 Adding a Block to the Sidebar

To this point in the course, we've talked a lot about creating content and seeing how that content is placed and displayed on your site. And we've kind of been ignoring a couple of locations on your site to this point. We're gonna start to fill in those gaps over the next couple of lessons. So, within here is kind of your main content section and we're getting fairly familiar with that on how things show up here and how to adjust their display and things of that nature. But one thing that's been a little bit of a mystery to this point is kind of been this section over here on the left, this sidebar, where we have this search box, where have these tools box, and and how the heck do things get over there? And how do we play around with the information that's over there? Maybe add our own stuff or maybe remove this tools box because I don't really want that there. So this area over here is a sidebar and these little, these boxes in here are actually referred to as blocks. So we're gonna talk about them within the context of creating a view and then we're gonna get in there and mess around with these blocks a little bit and so you can play around with how they're displayed. So the first thing that we wanna do is we wanna go through the process once again of creating another view. So let's go back to structure and let's go down to views and let's go ahead and add a new view again. So we created one of these before and we called it latest content so this time let's call it how about newest articles. So we wanna create another grouping of only article-content types this time that are the most recent ones. But this time, let's display them only a title and let's give a link to that title. And then let's create a block and stick that over in the sidebar somewhere so that you can see when you log into the site, what are some of the latest articles, what's their title and then I can link to them directly cuz I think that would be a very useful, very simple view to add to my page. So let's come down once again to our view settings and we wanna show content of type. This time we only wanna deal with the articles. And you can play around with these a little bit tagged with which we don't really care about the tagging but we could put in here some of the words that we've been using to tag like Drupal or welcome or something like that. And we can start once again by the different methods that we saw before but I think newest first will be fine. Now, before we created a page, but this time we don't wanna do that, we wanna create a block. So let's start going down this path. Now we want a block title, newest articles. I think that's fine but once again it doesn't have to match the view name you can call this anything that you want and then we can specify the block display settings. So, once again I think we're going to stick with the unformatted list because that makes it easiest. And this time we want to use not teasers or full poster titles which we could use titles but titles in of themselves is just going to show the text of the title. What we want is the text of that title and we want it to be linked to the full content. So that's why we're gonna select titles linked. Then we can come down here we can select how many items per block. In this case, I think five is gonna be fine. Well, let's show the most recent five published articles and in this case I don't wanna use a pager. I don't want to introduce a paging mechanism if I'm just going to show the most recent five articles and I wanna stick it over in that sidebar somewhere. I think this is actually going to be sufficient. So let's click Save and edit. This is going to take us back to our view that we just created, so we've created a new display of block type and our titles newest articles, unformatted list. We're going to show fields and we're going to show a field that is the title of the content. Now we're only going to show published content of type article, and we're going to sort them by the authored date in descending order. So once again, just like that. So we can come down here and take a look, and this is roughly what it's going to look like. Now we're only going to see the titles and as you can see, they are links. So I can click-on each of these links and be taken directly to the full content so I think that's gonna be good. Let's go ahead and hit Save, and now, let's go back to our site and have a look around, and you're gonna notice that nothing has really changed. I don't have any additional page links in my main navigation. But I selected block so I kind of was hoping it was going to show up here in the sidebar but it didn't. So how do we actually get it there? Well, that's actually very simple as well. So let's dig a little bit into this whole block sidebar section here to get a little bit better feel as how this works. So, let's go back into Structure and now I wanna select Block layout. This is where we can configure block content, as well as the sidebars and other regions of our site. So, once I come in here we're going to select the Bartik theme because that's the one that was currently active. And you can see all the different blocks that are currently active. So we have our header block which contains our site branding, which is in the header region. Then we have our primary menu which is our main navigation, which shows up in the primary menu. And then if we were to scroll down here just a little bit you'll see our content, so we have our content block or our content section, and we can put these blocks in here. And we've seen these things, we've seen some tabs, we've seen some main actions and main page content. Now if we come down here we see this sidebar, the first sidebar. So as you can see they are sectioned off, we have sidebar first, sidebar second. Then we have some featured bottom, we have some of footers and so we have got a lot of different locations within our site where we can place things. But these are the two that you are seeing currently, you see that search bar and you also see that toolbar. And as I mentioned before maybe we don't want that toolbar in there anymore. So let's go ahead and configure this and let's go ahead and delete this one. We don't want this one to be there anymore, let's just delete it. So now we'll come down to the bottom here again sidebar first so now we just see search. Now I want to include now in that sidebar, that sidebar first I wanna put in my brand new view that I just created my latest articles, our newest articles. So I'm gonna go ahead and place a block and then I wanna come down here and I see this new list that I created. Now the interesting thing to point out here when you create views by default they basically create or can create blocks for you depending on the type of view that you've selected. So when we selected the block style it now created a block for us that we can place in any of these locations. So I wanna use my newest articles and I wanna place that block. So now it's gonna give us some options here. But for the most part I think we don't have to worry about this too much. We want to display the title, that's fine. And we want items per block, five, that's the default setting that we've created within our view. Now we could override the title but I don't think that's necessary. And then we can start to display the visibility that we wanna tweak the visibility so we can specify which content types we're showing. Right now it's not restricted, but we know when we created that view, we're really only going to see articles. And then we can talk about the pages which we didn't really worry about, because we're not paging, we wanna show only five, and then roles. Who actually has access to these things, anonymous users, authenticated users, and administrators. So once again, like I said, we don't really need to worry about this too much. And then you get that final, which region do you really want? And we wanna put it in that sidebar first. So let's go ahead and save this block. Now we see newest articles has been added in here but what we really have to do at this point now is we have to make sure we've come down and click this Save blocks. Because if you don't, it won't actually save it and we'll lose this. So let's go ahead and click Save blocks and now that we've done that we can go back to our main site and down here we see the newest articles. And as you can see here I have my first article and these other sample ones that were generated and I can click-on each one of these and it's gonna take me to the full content. So as you can see here without knowing any sort of code or HTML or CSS, I was able to very quickly and easily add a new block in my sidebar over here, that was fully customizable that will change when ever the content of my site changes. So when a brand new article is added in here It's going to update and it's going to put that brand new published article at the top of the list of the newest articles. So as you can see we're able to create a lot of very cool functionality within our site without knowing any code whatsoever and just letting the tool do the work for us.

Back to the top