Drupal 7: CCK List (Text) Feld als Statusauswahl mit Statusicons verwenden (CCK Custom Formatters)

Drupal Custom Formatters Status Field + Icons

Welches umfangreichere Portal oder welche Software kommt ohne eine Statusauswahl aus? Egal ob "Aktiv", "Erledigt", "In Arbeit" oder "Dringend", immer wieder brauchen wir entsprechende Optionen und am besten eine intuitive optische Darstellung!

Für uns Drupal Nutzer schreit es also nach einem CCK Modul bzw. entsprechendem Field, welches diese Anforderungen erfüllt. Eine sehr gute und flexible Alternative ist jedoch die Lösung über List (Text) Felder und http://drupal.org/project/custom_formatters

Um diese Lösung zu nutzen, erstellt ihr einfach ein neues Feld im Inhaltstyp vom Typ List (Text).

Den anzuzeigenden Werten solltet ihr zudem maschinenlesbare Schlüssel zuordnen, die ihr nachher als Name für eure Icons verwendet, z.B.

active|Active
waiting|Waiting
done|Done

Dieses Feld speichert ihr.
Nutzt ihr es nun, wird immer der Titel hinter dem "|" angezeigt. Dies möchten wir mit Custom Formatters um einen Icon ergänzen oder sogar durch einen Icon ersetzen.

Nachdem ihr das oben verlinkte Modul also installiert habt, importiert ihr dazu die folgenden zwei Vorlagen (oder eine davon, die ihr benötigt). Der Import erfolgt in der Admin-Oberfläche des Moduls.

  1. // Darstellung nur als Status Icon
  2. $formatter = new stdClass();
  3. $formatter->disabled = FALSE; /* Edit this to true to make a default formatter disabled initially */
  4. $formatter->api_version = 2;
  5. $formatter->name = 'status_icon_only';
  6. $formatter->label = 'Status Icon only';
  7. $formatter->description = 'Displays a status icon instead of status text.';
  8. $formatter->mode = 'php';
  9. $formatter->field_types = 'list_text';
  10. $formatter->code = 'if(!empty($variables[\'#items\']) && is_array($variables[\'#items\'])){
  11.  $value = $variables[\'#items\'][0][\'value\'];
  12.  $icon_state_src = base_path() . drupal_get_path( \'theme\', variable_get(\'theme_default\', \'0\')) . \'/images/icons/status/\' . urlencode($value) . \'.png\';
  13.  $value_readable = render(field_view_value($variables[\'#obj_type\'], $variables[\'#object\'], $variables[\'#field\'][\'field_name\'], $variables[\'#items\'][0], array(), $variables[\'#langcode\']));
  14.  return theme(\'html_tag\', array(
  15.    \'element\' => array(
  16.      \'#tag\' => \'img\',
  17.      \'#attributes\' => array(
  18.         \'src\'  => $icon_state_src,
  19.        \'class\' => \'custom_formatter ico status_ico status_ico-\' . drupal_clean_css_identifier(check_plain($value)),
  20.         \'alt\'  => $value_readable,
  21.      ),
  22.    ),
  23.  ));
  24. }';
  25. $formatter->fapi = '';

  1. // Darstellung als Status Icon + Text:
  2. $formatter = new stdClass();
  3. $formatter->disabled = FALSE; /* Edit this to true to make a default formatter disabled initially */
  4. $formatter->api_version = 2;
  5. $formatter->name = 'status_icon_plus_text';
  6. $formatter->label = 'Status Icon + Text';
  7. $formatter->description = 'Displays a status icon PLUS status text.';
  8. $formatter->mode = 'php';
  9. $formatter->field_types = 'list_text';
  10. $formatter->code = 'if(!empty($variables[\'#items\']) && is_array($variables[\'#items\'])){
  11.  $value = $variables[\'#item\\\'][0]\\\'value\'];
  12.  $value_readable = render(field_view_value($variables[\'#obj_type\'], $variables[\'#object\'], $variables[\'#field\'][\'field_name\'], $variables[\'#items\'][0], array(), $variables[\'#langcode\']));
  13.  $ico_array = field_view_value($variables[\'#obj_type\'], $variables[\'#object\'], $variables[\'#field\'][\'field_name\'], $variables[\'#items\'][0], array(\'type\' => \'custom_formatters_status_icon_only\', \'label\' => \'hidden\'), $variables[\'#langcode\']);
  14.  return $ico_array[\'markup\'][\'#markup\']
  15.  . theme(\'html_tag\', array(
  16.    \'element\' => array(
  17.      \'#tag\' => \'span\',
  18.      \'#attributes\' => array(
  19.        \'class\' => \'custom_formatter status_ico_text status_ico-\' . drupal_clean_css_identifier(check_plain($value)) . \'_text\',
  20.      ),
  21.      \'#value\' => $value_readable,
  22.    ),
  23.  ));
  24. }';
  25. $formatter->fapi = '';

Nach dem Import müsst ihr die entsprechende Darstellung nur noch für euer View-Feld auswählen beziehungsweise für die Node-Darstellung in den Inhaltstyp-Einstellungen (Feld anzeigen) bearbeiten. Diese erreicht ihr schnell über den Pfad:
http://www.example.com/admin/structure/types/manage/[NODE-TYPE]/display
Dort wählt ihr den neu erstellten Custom Formatter für das entsprechende Statusfeld aus.

Selbstverständlich müsst ihr außerdem noch die Icons im passenden Theme-Verzeichnis hochladen, das ihr bei Bedarf auch im Custom Formatter anpassen könnt.
Standard nach Import ist:
[DEFAULT-THEME-Verzeichnis]/images/icons/status/[STATUS-KENNUNG].png

z.B. also: "sites/all/themes/mytheme/images/icons/status/active.png"

Zahlreiche weitere Custom Formatter Vorlagen findet ihr übrigens auch auf: http://customformatters.com/formatters
Vielen Dank an stuart clark, den Entwickler dieses großartigen Modules.

PS: Ich habe ihn um die Ergänzung der oberhalb dargestellten Formatter gebeten, mal sehen ob dies für ihn interessant ist.

Viel Spaß mit der Lösung, ich freue mich über eure Vorschläge und Kommentare!

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen