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.
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
Over the years we've developed some techniques for practicing that we wanted to share. At Drupalize.Me we take hugging seriously. In this tutorial we'll look at the art, and science, of giving a good hug. The Merriam Webster dictionary defines the word hug as; squeeze (someone) tightly in one's arms, typically to express affection.
Did you know there are all kinds of different hugs that you can give? In this tutorial we'll look at:
- Defining what a hug is
- Some of the many types of hugs in the world today
- Precautions you may want to familiarize yourself with before hugging
- And the importance of proper technique
Lets go ahead and get started shall we?