The blog section of our website will be by far be the most complex to set up, as we will be taking advantage of the Twig template layer to modify the HTML markup from the Node level all the way down to the field level. What does this mean? It simply means we will be breaking our mockup down into small chunks, whether it be the blog teaser, a listing of blog categories, or even the simple blog image itself.
In this chapter, we will look at creating multiple Twig templates that our Blog listing page will use, as well as the following:
- We will begin by reviewing our Blog listing page as displayed in our mockup and identifying the areas we will need to theme.
- Next, we will create our Blog listing page, along with a teaser view of our content that will link to the Blog detail page.
- Our Blog listing also contains three custom blocks of content, which will require us to dive a little deeper into using Drupal views, custom blocks, and Twig templates to create categories, popular blogs, and a recent blogs list.
- We will also take a look at how we can deal with multiple field items to create a slideshow of images that will be used both on our Blog listing and Blog detail pages.
- Finally, we will focus on how to work with comments and the theme layer to display them properly.
While we work through each section, we have the ability to refer back to the Chapter08 exercise files folder. Each folder contains a start and end folder with files that we can use to compare our work when needed. This also includes database snapshots that will allow us all to start from the same point when working through various lessons.
In order to assist us in identifying page elements that we will be recreating for the blog page, it would make sense to open up our mockup and review the layout and structure. The Blog page can be found in the Mockup folder located in our exercise files. Begin by opening up the blog.html file within the browser, as shown in the following image:
If we look at our mockup and break it down into manageable parts, we will notice several components that we will need to create using our existing post content type:
- The first is the blog teaser in the main content area, which consists of one or more images, post metadata, title, text, and some taxonomy terms that help identify the type of post we are viewing. Since this is repeated content, we will take advantage of Drupal views and custom view modes to recreate this section.
- The second is the Categories listing in the right-hand sidebar, which displays the category of posts available on our website. This is a simple HTML list that we can recreate using Drupal views.
- The third is a tabbed component to display Popular and Recent blog posts. While this looks a little more complex, we will use some advanced Drupal views techniques to recreate it.
- The fourth is a custom block with some About Us text and should be simple to develop.
So we have identified four specific page components for our blog listing page. We will concentrate on creating these various items of our site and, once complete, we should be able to compare our blog listing page with our mockup.