Site Building

Recap and Challenge: Markup in Views for Drupal 7

This page is archived

We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.

Sprout Video

In these tutorials on markup in Views, we learned
:

  • What affects markup in Views
  • How to use the Views UI to change markup
  • How formats affect markup output
  • How to customize row and field wrapper markup
  • How to rewrite output with replacement tokens
  • How to override Views template files
  • How to add a CSS class to your View

As you learned, there are a number of ways to affect markup in Views ranging from utilizing the UI to editing a template file in code.

Ready for a challenge?

Now that you’ve learned all about markup in Views, can you apply what you’ve learned? Use your knowledge of customizing markup using the Views UI and your knowledge of overriding Views template files to apply the HTML markup in the pattern lab prototype to a view of recent posts. Download the demo files and database containing the view of recent posts in the additional resources section below. Contained in the top-level of the files download is a directory called "misc." Inside "misc" you'll find the demo-pattern-lab files:

  • The latest posts file is located in misc/demo-pattern-lab/source/_patterns/02-organisms/03-sections/00-latest-posts.mustache
  • The media block file is located in misc/demo-prototype/source/_patterns/01-molecules/02-blocks/00-media-block.mustache

Use your knowledge of inspecting views template files to locate the read more link markup in order to customize the markup and placement of the read more link, to match the prototype markup. You can find the setting to turn on the more link in the Views UI under the pager section in the middle column.

Here’s another hint: you’ll want to update the field settings for the body field to display a trimmed or summary display instead of the full body value.

Finally, For a bonus challenge, create an image style that matches the prototype image dimensions, and apply it to the image field in your view. To learn more about image styles in views, check out the video Using Image Styles with Views in the Drupalize.Me library.

Good luck with this challenge!

Additional resources

Using Image Styles with Views