In this article, I am going to cover how to customize the HTML code of the responsive slideshow by using template files (.tpl.php) and the theme debug mode.

The goal

In the preceding article, I covered how to create a responsive slideshow with the Flexslider module. Even though it works good, there is an issue with its HTML code, specially as to semantic tags. Throughout this article you are going to customize the HTML code of the slideshow in order to make it more semantic and get a more polished finish.

page--front.tpl.php revisited

1. Open the page--front.tpl.php file with your favourite text editor or IDE and remove lines 116 through 126.

2. Now ask yourself the following question: what is the most appropriate semantic tag to contain the slideshow? The most appropriate semantic tag to contain the slideshow is the aside tag. This is what its spec says:

Represents a section of a page consisting of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

3. Place the mouse pointer at line 116 an then type the following piece of code:

<aside class="container-fluid" id="featured">
  <?php print render($page['header']); ?>
</aside><!-- /#featured -->

4. Save all changes to the page--front.tpl.php file and then clear all caches.

5. If you look at the HTML code again , you will see an aside tag containing the markup of the slideshow.

Using the theme debug mode to find template suggestions

1. As you can see in the previous figure, there is a section tag acting as a container for the HTML code of the recipe slideshow view. Because you have just marked up this part of the page with an aside tag, this section tag must be replaced with a div tag.

2. Which template file must be edited to perform that replacement? As of Drupal 7.33, Drupal has a theme debug mode that is able to give you template suggestions. In order to enable it, add the following piece of code to your settings.php file:

/**
 * Theme debug mode
 */
$conf['theme_debug'] = TRUE;

3. Save all changes to the settings.php file and then clear all caches.

4. If you inspect the HTML code again, you will realize that there are four comments right before the section tag. Look carefully at the third comment and you will get the answer you are after. There are four template suggestions ordered from the most specific to the least specific:

• block--views--recipe-slideshow-block.tpl.php
• block-views.tpl.php
• block--header.tpl.php
• block.tpl.php

I'm going to use the most specific suggestion: block--views--recipe-slideshow-block.tpl.php

5. Create a new file named block--views--recipe-slideshow-block.tpl.php and then copy all the content of the block.tpl.php file located at / sites / all / themes / bootstrap / theme / block / into it.

6. In the block--views--recipe... file, place the mouse pointer at line 48 and replace the section tag with a div tag.

7. Save all changes and clear all caches.

8. Now, the recipe slideshow block is using a div tag, as you can see in the next figure:

Wrapping up the content of each recipe with the article tag

Because every recipe is an article, let’s use the semantic article tag to wrap up the content of each recipe of the slideshow.

1. If you inspect the HTML code of any recipe of the slideshow, you will realize that the theme debug mode is unable to give you a file name suggestion for theming these fields of the view.

2. In order to find a template file suggestion for theming these fields, you must go back to the recipe slideshow view and click the Information link in the Other region of the Advanced section.

3. Since you want to customize the output of all the fields of the view, you must choose one of the suggestions provided by the third element of the list (Row style output). I’m going to use the views-view-fields--recipe-slideshow.tpl.php file.

4. Create a new file named views-view-fields--recipe-slideshow.tpl.php and then copy all the content of the views-view-fields.tpl.php file located at / sites / all / modules / views / theme into it.

5. Wrap up all the PHP code with the article tag, as you can see in the next figure.

6. Save all changes and clear all caches.

7. Because the new template file is working properly, the article tag you have just added is present in the code.

About the images of the slider and the semantic figure tag

Finally, think about the following question: should you mark up the images of the slideshow with the semantic figure tag? In my opinion, you should not. This is what the figure tag spec says:

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content --e.g., to the side of the page, to dedicated pages, or to an appendix.

From this explanation, I am able to draw the conclusion that this tag is used for things such as a diagram or a photo in the body of a blog post that could be moved away to another location without affecting the flow of the blog post. In the case you are working with, if the images are moved away from the slideshow, the slideshow will make no sense at all.