Taming Views output with Semantic Views

I made great play in the previous post about how we had managed to create minimal, concise and semantic markup but I neglected to refer to the elephant in the room, namely the ultra-div- and class-tastic non-semantic output created by the otherwise awesome and essential Views module. Sample output:

<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field-title">
<span class="field-content"><a href="/node/1">Augue Magna Cui Conventio Valetudo</a></span> 
</div>
<div class="views-field-type">
<span class="field-content">Story</span> 
</div>
<div class="views-field-teaser">
<div class="field-content">
<p>
node (story) - Abigo bene feugiat loquor neo lenis qui imputo. Suscipere molior obruo typicus jus euismod ille illum meus. Acsi populus pecus populus lobortis metuo voco. Aptent plaga incassum. Iriure cui cui commoveo eum hos dolor ex consectetuer. Typicus eros vulputate defui comis nobis humo. Ulciscor abigo occuro. Sagaciter tego dolore. Voco iusto jus. Abdo dolor verto gilvus mos iaceo vel loquor.
</p>
</div>
</div>
<div class="views-field-delete-node">
<label class="views-label-delete-node">Delete link:</label> <span class="field-content"><a href="/node/1/delete&amp;destination=semantic-views-demo">delete</a></span>
 ... etc ...

Arggggh!!! My eyes! My eyes! Make it stop!

So… I was a bit worried about that, to be honest. I was hoping that Rule #35 would hold true. This morning, quite synchronicitastically, I came across Semantic Views, thanks to a most informative Drupal theming toolkit post by the aforementioned Morten DK (creator of Mothership). Essentially, Semantic Views lets you customise the output of the Views module from within the Views UI interface, so that we can now get control over that div- and class-itis and replace it with lovely minimal-yet-semantic markup. So that above nonsense could be replaced with something sensible like:

<div class="first odd">
<h2 class="title"><a href="/node/1">Augue Magna Cui Conventio Valetudo</a></h2> 
<div class="node-type">
Story 
</div>
<p>
node (story) - Abigo bene feugiat loquor neo lenis qui imputo. Suscipere molior obruo typicus jus euismod ille illum meus. Acsi populus pecus populus lobortis metuo voco. Aptent plaga incassum. Iriure cui cui commoveo eum hos dolor ex consectetuer. Typicus eros vulputate defui comis nobis humo. Ulciscor abigo occuro. Sagaciter tego dolore. Voco iusto jus. Abdo dolor verto gilvus mos iaceo vel loquor.
</p>
<div>
<label>Delete link:</label> <a href="/node/1/delete&amp;destination=semantic-views-demo%2Funformatted-semantic">delete</a> ...

Much better! Proper headings instead of spans, and now we can simply use proper CSS inheritance to target all the elements rather than filling them with silly-long-hyphenated-redundant-class-names. Epic Win! Jeff Burnz has helpfully created an informative video demonstrating Semantic View in action. Which is nice.

Tagged as: semantic views, theming