Bootstrap Theming - Making a Responsive Grid in Drupal 7 (Part 1/4)

In this article, you are going to make a responsive grid in Drupal 7 by using the Bootstrap grid system.

The goal

Now that the navigation bar and the slideshow are finished, you are going to make a responsive grid for displaying the latest recipes of your client. In addition, you are going to use the semantic main tag for marking up the container of the section element that will house the latest six recipes of your client (article elements).

Watch now the end result

Please, click the image below to open a modal window with a video showing the end result of this article.

Before getting started

Before start coding, it’s very important to think through the structure you want to get. In order for you to not get confused with the markup you must add to your Bootstrap subtheme, let’s consider the following sketch taking into account that the classes in dark red are bootstrap classes and the tags in blue are HTML5 semantic elements.

Click the previous figure to make it larger.

Some of the Bootstrap classes are not strictly necessary. They have just been added to the markup for added clarity.

This article contains some pictures from flickr.com. Later on, I shall give appropriate credit and provide the corresponding links to their licenses.

Getting started

Let's get started by creating the main region of the front page. To do so:

1. Open the page--front.tpl.php file with your favourite editor or IDE and then add the following piece of code to it after the aside tag.

<div class="container"><!-- responsive fixed width container -->
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
      <main id="main-content">
        <?php print render($page['content']); ?>
      </main><!-- /#main-content -->
    </div><!-- /.col-xs-12 ... -->
  </div><!-- /.row -->
</div><!-- /.container -->

2. Save all changes to the file and clear all caches.

3. Go to admin / structure / block and then put the System help block into the Content region. Make sure it is the first block in this region and click the Save blocks button.

The System help block is used for displaying status messages and it is usually placed inside the Help region. However, since you are not using the $page['help'] variable in the template file for your front page, you must place the System help block in the Content region.

4. Because you are going to place the block for the latest recipes right after the Main page content block and given that there is no front page content, you must get rid of the sentence No front page content has been created yet.

I have already discussed this issue, so click here to check out how it is made.

This is the piece of code you must add to your template.php file:

/**
 * Preprocess function for the page theme hook.
 */
function masterchef_preprocess_page(&$variables) {

  $front_page = drupal_is_front_page();

  if ($front_page) {

    unset($variables['page']['content']['system_main']['default_message']);

  }

}

Creating a grid for the latest recipes

1. Go to admin / structure / views and then click the Add new view link.

2. Complete the form for the new View like this:

  • View name: Latest Recipes
  • Description: Displays the latest recipes on the front page
  • Show (Content) of type (Recipe) tagged with (leave it blank) sorted by (Newest first)
  • Do not tick the Create a page checkbox
  • Tick the Create a block checkbox
    • Block title: Check out the latest recipes
    • Display format (Unformatted list) of (fields)
    • Items per page: 6
    • Do not tick the Use a pager checkbox

and then click the Continue & edit button.

3. Click the Add button in the FIELDS section and then add the Main Image field to the Latest Recipes view.

4. Configure the Main Image field like this:

  • Do not tick the Create a label checkbox
  • Do not tick the Exclude from display checkbox
  • Formatter (Image)
  • Image style (Thumbnail Recipe 400x200)
  • Link image to (Content)
  • Ignore the others configuration options

The Image style selected for the Main Image field is not default provided by Drupal. You can create your own image styles at admin / config / media / image-styles.

5. Rearrange the fields of the Latest Recipes view so that the Main Image field is the first in the list. Finally, click the Save button to make all your changes permanent.