Semantic CCK config

Semantic CCK was created to give users the means of customizing the HTML output of CCK fields. It was inspired in part by the highly recommended module Semantic Views which provides the same functionality for Views.

Drupal 7

A Drupal 7 version of Semantic CCK is currently under development: Semantic Fields.

Benefits

With Semantic CCK enabled, users can specify the HTML elements and classes for:

  • The entire field
  • The labels -- above and inline
  • All field items
  • Each field item

This allows users to quickly create semantically rich and meaningful HTML markup from CCK fields such as:

  • Definition Lists
  • Ordered Lists
  • Unordered Lists

The user can also choose to remove all (or some) markup for any CCK field.

By facilitating semantically rich markup, Semantic CCK makes it easy for themers and developers to increase usability, accessibility and SEO performance of Drupal sites without resorting to field overrides (ie. content-field.tpl.php).

Examples

Perhaps the easiest way to demonstrate the usefulness of Semantic CCK is by showing a few examples. For instance, you could change the CCK output of a simple image from this:

<div class="field field-type-filefield field-field-recipe-photo">
    <div class="field-items">
            <div class="field-item odd">
                 <img width="200" height="200" title="" alt="" src="my-image.jpg" />
             </div>
        </div>
</div>

to this:

<img width="200" height="200" title="" alt="" src="my-image.jpg" />

Or you could convert a simple list from this:

<div class="field field-type-text field-field-recipe-ingredients">
    <div class="field-label">Ingredients:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">2 (9 inch) unbaked pie shells</div>
              <div class="field-item even">1 (10.75 ounce) can condensed golden mushroom soup</div>
              <div class="field-item odd">1 cup cooked, chopped turkey meat</div>
              <div class="field-item even">1 (10 ounce) can mixed vegetables, drained</div>
              <div class="field-item odd">1/3 cup milk</div>
        </div>
</div>

to this:

<div class="field field-type-text field-field-recipe-ingredients recipe-ingredients">
    <h3 class="field-label">Ingredients</h3>
    <ul class="field-items ingredients">
      <li class="field-item odd ingredient">2 (9 inch) unbaked pie shells</li>
      <li class="field-item even ingredient">1 (10.75 ounce) can condensed golden mushroom soup</li>
      <li class="field-item odd ingredient">1 cup cooked, chopped turkey meat</li>
      <li class="field-item even ingredient">1 (10 ounce) can mixed vegetables, drained</li>
      <li class="field-item odd ingredient">1/3 cup milk</li>
    </ul>
</div>

Project Information

Downloads