Drupal 7 – fields a jejich stylování

Drupal 7 přišel s docela radikální změnou v oblasti CCK, které byly konečně integrovány do jádra. Nyní tedy vyvstává otázka, jak je nejjednodušeji nastylovat?

Možnost první – vytvořit vlastní field.tpl.php

Jednou z nejjednodušších možností je zkopírovat soubor modules/field/theme/field.tpl.php do naší šablony. Poté lze šablonu přejmenovat například jako field–[nazev_pole].tpl.php př. field–field_taxonomy.tpl.php pro omezení na konkrétní políčko.

Bohužel Drupal standardně neumožňuje tuto šablonu přiřazovat na základě field type (což se hodí například pro rychlé stylování většího množství různých obrázků) via http://drupal.org/node/784792 . Tuto věc asi nejelegantněji řeší možnost číslo dvě. Rovněž ji obecně doporučují vývojáři Drupalu, protože při větším množství souborů pro jednotlivé field může docházet ke znatelnému snížení výkonu (na druhou stranu tohle může vyřešit i vhodné cachování).

Druhá možnost – stylování přes template.php

Druhou možností je využít přímo funkce v souboru template.php. Například takhle snadno přidáte vlastní návrh volání funkce při renderování field. Toto řešení nám přidá možnost renderovat field na základě jejich typu (image, taxonomy_term_reference, atd.)

function theme_preprocess_field(&$vars, $hook) {
  // Add specific suggestions that can override the default implementation.
  array_unshift($vars['theme_hook_suggestions'], 'field__' . $vars['element']['#field_type']);
}

Poté můžete snadno definovat funkci, která vám přepíše výchozí render například pro obrázek:

function theme_field__image($vars) {

    $output = '';

  if (!$vars['label_hidden']) {
    $output .= '<h3>' . $vars['label'] . '</h3>';
  }

  foreach ($vars['items'] as $delta => $item) {
    $output .= drupal_render($item);
  }

  $output = '<div class="images">' . $output . '</div>';

  return $output;
}

Obdobně lze přepsat i konkrétní field:

function theme_field__field_taxonomy($vars) {
  $output = '';

  foreach ($vars['items'] as $delta => $item) {

        $array = explode(';',$item['#markup']);

        if(count($array)) {
          $output = '<ul class="' . $vars['classes'] . ' clearfix"' . $vars['attributes'] . '>';
          foreach ($array as $value) {
              $output .= '<li>' . trim($value) . '</li>';
          }
          $output .= '</ul>';
        };
  }

  return $output;
}


Komentáře

  1. Martin 01.06.11 21:34

    Comment Arrow

    Jak definovat funkci, která přepíše render obrázku tak, aby se u obrázku zobrazil i popisek (capture, neboli title) ?

    Jsem newbie v D7 a nemohu přijít na to, jak volat tento jeden parametr proměnné variables :-(


  2. Pari 01.06.11 21:41

    Comment Arrow

    Zkus se podívat na http://api.drupal.org/…heme_image/7 To by ti mohlo pomoct, záleží kde přesně chceš titulek vypisovat, lze ho i vytáhnout manuálně přes podobnou konstrukci $node->field_image[LANGUAGE_NONE][0][‚title‘]


  3. Martin 02.06.11 09:06

    Comment Arrow

    Díky za návod. Postupoval jsem dle příkladu funkcí výše, výsledkem má být zobrazení všech obrázků v příloze (field_page_obrazky) v tabulce pod sebou, s popiskem vedle sebe…

    function marinelli_field__field_page_obrazky($vars) {

    $output = '';

    if (!$vars[‚label_hidden‘]) {
    $output .= '' . $vars[‚label‘] . '';
     }

    $output .= '';

    foreach ($vars[‚items‘] as $delta ⇒ $item) {
    $output .= '';
    $output .= drupal_render($item);
    $output .= .$TADY_CHCI_TITULEK.;
    }
    $output .= '';

    $output = '' . $output . '';

    return $output;
    }

    Ale jak ten titulek vytáhnout, na to jsem nepřišel :-(


  4. Martin 02.06.11 09:12

    Comment Arrow

    ještě jednou s texy (?!)

    function marinelli_field__field_page_obrazky($vars) {
    
        $output = '';
    
      if (!$vars['label_hidden']) {
        $output .= '' . $vars['label'] . '';
      }
    
      $output .= '';
    
      foreach ($vars['items'] as $delta =&gt; $item) {
        $output .= '';
        $output .= drupal_render($item);
        $output .= ''.$TADY_CHCI_TITULEK.'';
      }
      $output .= '';
    
      $output = '' . $output . '';
    
      return $output;
    }

  5. Martin 02.06.11 09:35

    Comment Arrow

    Texy vyhazuje části kodu. Takze poslední pokus – ta funkce je zde http://keeptext.com/6b2860/


  6. Pari 02.06.11 12:57

    Comment Arrow

    Místo řádku
    $output .= \‚</td><td>\‘.$TADY_CHCI_TITULEK.\‚</td>&lt/tr>\‘;
    Napiš
    $output .= \‚</td><td>\‘.$item[‚#item‘][‚title‘].\‚</td>&lt/tr>\‘;


  7. Pari 02.06.11 13:00

    Comment Arrow

    Jo ten můj kód to taky pokazilo… ale logiku snad pochopíš. Je to jen práce s výpisem políček z pole, které si zobrazíš přes print_r či lépe krumo




O autorovi

Pari

Vítejte na mém blogu, rád bych se v krátkosti představil. Je mi 26 let. Momentálně nejvíce času věnuji projektu Lepime.cz - obchod se samolepkami na zeď a tvorbě webů postavených na redakčním systému Drupal pod značkou MEPA.CZ.