Skip to main content

Blog Post

Ultimate Markup Control in Views

By now you may have noticed a pattern in what’s important to me as a Front-end Developer - good markup. My previous two blog posts focus on the importance of good markup as well as how to gain more control to produce cleaner markup in views. In this third post of this series I will show you how you can have the ultimate control over the markup views produces.

Here’s the scenario and a handy visual that explains what we are trying to accomplish today. We have a section in our website that showcases the top news article, which contains several elements originated from an article node.

This blog post is focused on Drupal 7, though many of the steps outlined below will probably apply to Drupal 8 as well.

Clean markup wireframe

The wireframe above includes the following elements:

  • The article’s featured image
  • Node title (“How to write semantic markup in Drupal”)
  • A teaser of the article’s content
  • A link to the full article node (“Read full article”)
  • In addition, we see a title for the entire section (“Featured Article”) and...
  • ...a container that holds all the elements together.

We know there are several ways in which we can output the information for our Featured Article section in views. Our goal, however, is not only outputting the right data, but ensuring the data is well-formatted. As a front-end developer I face the consequences of good and bad markup on a daily basis. When poor markup is output, theming is more challenging and sometimes not as fluid because we are forced to move elements out of their natural position to make them match a mockup or layout requirement, which can also affect the accessibility and search engine ranking of a page. Conversely, when markup structure is carefully thought out, theming will not only be easier, but markup will flow naturally and provide a better user experience.

Let’s get started and see how we can output good markup in a way that is easy to theme. For this to work we need, in addition to views and ctools, the token module. If you are a visual learner, you are in luck. At the end of the blog post you’ll find a short screencast that covers all the steps described in this post. Enjoy!

  1. Go to Views admin page (/admin/structure/views).
  2. Click on Add new view.
  3. Name your view Featured Article.
  4. Show Content of type Article sorted by newest first.
  5. Skip creating a page and instead create a block.
  6. Leave Display format as Unformatted list of titles(linked).
  7. Under Items per page, change to 1.
  8. Click Continue & Edit.

The next thing we want to do is add each of the fields we intend to output. By using fields, we can change settings individually on each field. Currently we only have our node title field so let’s add the remaining fields shown in our wireframe.

Note:  When using views fields instead of rendered entities you're skipping the entity cache layer and so they're not always the best answer depending on performance concerns.


  • Still within Views, click Add next to fields and select the following fields:
    • Content: Body
    • Content: Image
    • Content: Path
    • and finally Global: Custom text
      You can type each of the fields in the Search field and as each of them shows up check the checkbox until you have chosen all of the fields.

      Note:  The order of the fields does not alter the outcome, however, the Global: Custom text field should always be at the bottom of all fields in order for this technique to work.
       
  • Click Apply (all displays)
    The next screen (Configure field), is where we get to customize settings for each field we selected above.

Body field:

  1. Check Exclude from display. We are hiding the Body field from display by default. We will do this with each of the fields we selected except the Global: Custom text.
  2. Change the Formatter select item to Plain text.
  3. Expand the Style Settings fieldset and clear ALL checkboxes. This will remove extra wrappers and default css classes from this field. We will probably do this with each of the fields.
  4. Click Apply (all displays). The Configure field screen for the Image field appears.

Image field:

  1. Check Exclude from display to hid the Image field.
  2. Expand the Style Settings fieldset and clear ALL checkboxes.
  3. Click Apply (all displays). The Configure field screen for the Path field appears.
    Note:  If you have an image style you’d like to use you can choose it under the Image Style select box.  

Path field:

  1. Check Exclude from display to hid the Image field.
  2. Expand the Style Settings fieldset and clear ALL checkboxes.
  3. Clear the Create a label checkbox.
  4. Click Apply (all displays).
  5. Finally, we will do the rest of the work under the Configure field for the Global: Custom text settings screen.

Our goal is to manually customize the markup using the Global: Custom text field which will be the only field technically being displayed. We will embed all other fields within it.  It will make more sense shortly.

  1. Ensure all checkboxes are cleared in the Style Setting fieldset for Global: Custom text field.
  2. Scroll down and expand the Replacement Patterns fieldset. Here you will see tokens for each of the fields we selected.
  3. Scroll down to the Text textarea and type the following inside of it:

    <div class="featured-article__wrapper"></div>
  4. We are creating a wrapper div which will hold all of our fields. We are also applying a custom CSS class to simplify the theming process.
  5. Now let’s add the section’s title as follows:
    <div class="featured-article__wrapper">
    <h2 class=”featured-article__heading”>Featured Article</h2>
    </div>

    Our section title has been formatted as a Heading 2 element with a custom CSS class.

  6. If we look at our mockup, we notice our featured image is floated to the left and the remaining fields (Node title, teaser and read full article), are all floated to the right. Knowing this bit of information will allow us to structure our markup accordingly to ensure our fields naturally fall in place without too many positioning hacks. Personally I think it makes sense to wrap our image in a container div and the remaining fields in a separate container div. This way when it’s time to theme our Feature Article section we only need to float the two container divs and everything inside of them will simply follow along. This is a better approach than having to float each individual field separately. Let’s see how the markup looks using this technique.

    <div class="featured-article__wrapper">
    <h2 class=”featured-article__heading”>Featured Article</h2>
     <div class=”node__wrapper”>
       <div class=”node__image”>[field_image]</div>
       <div class=”node__fields”>
         <h3 class=”node__fields--title”>[title]</h3>
         <p class=”node__fields--teaser”>[body]</p>
         <div class="node__fields--read-more">
           <a href=”[path]”>Read full article</a> <span>&rarr;</span>
         </div>
       </div>
     </div>
    </div>
  7. Click Apply (all displays).

Previously we set each of the fields to be excluded from display by default. However, the one field we didn’t do this on is the Content: Title field. This is because the field was originally added when we created our view and not later when we added all the other fields. Let’s do this now:

  1. Click the Content: Title field and check the Exclude from display checkbox.
  2. Expand the Style Settings fieldset and ensure all checkboxes within it are cleared.
  3. Be sure the Link this field to the original piece of content checkbox is checked as we want this field to also be a link to the full node.
  4. Click Apply (all displays).
  5. Click Save to save all changes made to the view.

Scrolling down to preview our view should show something similar to the screenshot below:

 View preview

 

Display the Featured Article block on homepage

Let’s show our Featured Article block on our homepage: 

  1. Go to the block administration page (/admin/structure/block).
  2. In the block administration page, locate the newly created featured article block (should be under the disabled section), and click on Configure next to the block.
  3. Set the block title to <none>.  We will use our custom title with semantic class instead.
  4. Under Region Settings, choose Content. Be sure you do this for your site’s default theme (in this example, Bartik).
  5. Scroll down to the visibility Settings and under the Pages tab select only the listed pages.
  6. Type <front> in the textarea field to display the block on the homepage only. The Featured Article block should now be in our homepage. If you have other items on the homepage and your new block is not showing on top, go back to the block’s admin page and rearrange the block accordingly.

The new block should look something like this:

New block

 

Inspecting the code in our featured article block

  1. In Chrome, right-click on your block and select Inspect Element.
  2. Markup should look like this:

    <div class="featured-article-view">
     <div class="view-content">
       <div class="featured-article__container">
         <h2 class="featured-article__heading">Featured Article</h2>
         <div class="article__wrapper">
           <div class="article__image">
             <img src="#" alt="alt text">
           </div>
           <div class="article__fields">
             <div class="article__fields--title"></div>
             <div class="article__fields--teaser"></div>
             <div class="article__fields--readmore"></div>
           </div>

Note:  I made a couple of additional changes to the view such as removing default wrappers and css classes from the view itself by clearing all checkboxes from the settings screens on Format and Fields, both of which can be found under the FORMAT section. This is the same thing I did on my previous blog post Cleaner and semantic markup with Drupal’s views.

This is what the markup would look like if we were to use Drupal's defaults:

Bad markup example

As you can see, being able to write our own markup gives us incredible control not only on generating semantic markup but determining the structure that will provide the most flexibility. In addition, as we discussed before, SEO and accessibility also benefit from cleaner and properly formatted markup.

For your convenience I recorded a 3 minute screencast of all the steps on this blog post.

After applying the CSS shown below, our Featured Article block like this: 

Final product sample

Sample CSS:

.featured-article-view {
  background: #eee;
  border: 1px solid #ddd;
  padding: 0 20px 40px;
}

.article__image {
  width: 50%;
  float: left;
  margin-right: 20px;
  margin-bottom: 40px;

  img {
    max-width: 100%;
    height: auto;
  }
}

.featured-article__heading {
  font-weight: bold;
  text-transform: uppercase;
}

.article__fields--title a {
  font-size: 30px;
}

Additional Resources
Drupal 8 Theming Update | Mediacurrent Blog Post
Drupal 8 Theming without Panels |Mediacurrent Blog Post
Choosing Drupal as a Content Management Framework | Mediacurrent Team Presentation

Mario Hernandez

Meet team member, Mario Hernandez

Mario is a Senior Front End Developer with over 10 years of Drupal experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San...

Learn more about Mario >
Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow