Drupal-ban az elsődleges linkek (primary links) helyére képek a themes_links() fgv. kifejtésével

April 1st, 2009

Nekem már többször előfordult olyan problémám, hogy a Drupal elsődleges menüjének (primary links) egyedi kinézete miatt, kizárólag képekből álló menüt kellett készítenem. Ezalatt azt értem, hogy nincs a háttérkép felett semmilyen szöveg, a menü címe is a képen szerepel.

A háttérképeket egyszerűen megadhatjuk, a menüpontok egyedi azonosítója miatt (pl. menu-130 stb.), viszont a rajta lévő szöveget el kell tüntetni valahogy.

CSS-ben ha levesszük a betűméretet 0px-re sajnos nem a megfelelő megoldás, mert IE-ben, Chrome-ban és Operában kicsiben, de látszik.

Egy megoldás, ha a hyperlinkek szövegét span elemek közé tesszük, és a span elemeket tüntetjük el CSS-ben a display: none; definícióval, tehát a cél az lenne, hogy így nézzen ki egy menüelem:

  1. <li class="menu-129"><a class="menu-129" href="/"><span class="primary-title">Nyitólap</span></a></li>

Ekkor minden további nélkül megadhatjuk CSS-ben a következőt:

  1. ul.primary-links span.primary-title {
  2. display: none;
  3. }

Igenám, de hogy érjük el, hogy a Drupal span elemek közé tegye a linkek címét?

A megoldás az, hogy a sminkünk template.php fájljába kifejtjük a theme_links() fgv-t.

Íme a kód:

  1. /**
  2.  * Csak kepekbol allo menu elkeszitesenek alapjai
  3.  *
  4.  * @param unknown_type $links
  5.  * @param unknown_type $attributes
  6.  * @return HTML
  7.  */
  8. function phptemplate_links($links, $attributes = array('class' => 'links')) {
  9.   global $language;
  10.   $output = '';
  11.  
  12.   if (count($links) > 0) {
  13.     $output = '<ul'. drupal_attributes($attributes) .'>';
  14.  
  15.     $num_links = count($links);
  16.     $i = 1;
  17.  
  18.     foreach ($links as $key => $link) {
  19.       $class = $key;
  20.  
  21.       // Add first, last and active classes to the list of links to help out themers.
  22.       if ($i == 1) {
  23.         $class .= ' first';
  24.       }
  25.       if ($i == $num_links) {
  26.         $class .= ' last';
  27.       }
  28.       if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
  29.           && (empty($link['language']) || $link['language']->language == $language->language)) {
  30.         $class .= ' active';
  31.       }
  32.       $output .= '<li'. drupal_attributes(array('class' => $class)) .'>';
  33.      
  34.       $link['attributes'] = array('class' => $class);
  35.  
  36.       if (isset($link['href'])) {
  37.         // Pass in $link as $options, they share the same keys.
  38.         $link['html'] = true;
  39.         $output .= l('<span class="primary-title">' . $link['title'] . '</span>', $link['href'], $link);
  40.       }
  41.       else if (!empty($link['title'])) {
  42.         // Some links are actually not links, but we wrap these in <span> for adding title and class attributes
  43.         if (empty($link['html'])) {
  44.           $link['title'] = check_plain($link['title']);
  45.         }
  46.         $span_attributes = '';
  47.         if (isset($link['attributes'])) {
  48.           $span_attributes = drupal_attributes($link['attributes']);
  49.         }
  50.         $output .= '<span'. $span_attributes .'>'. $link['title'] .'</span>';
  51.       }
  52.  
  53.       $i++;
  54.       $output .= "</li>\n";
  55.     }
  56.  
  57.     $output .= '</ul>';
  58.   }
  59.  
  60.   return $output;
  61.  
  62. }

Ez a kód, majdnem megegyezik az API oldalon található fgv. kóddal. Nézzük az eltéréseket:

  1. $link['attributes'] = array('class' => $class);

Ezzel annyit érünk el, hogy ne csak a listaelemnek (li) legyen egyedi azonosítója, hanem a hyperlink-nek (a) is. Ez azért fontos, hogy a :hover eseményre is tudjunk képet rakni, ha esetleg különbözik.

  1. $link['html'] = true;
  2. $output .= l('<span class="primary-title">' . $link['title'] . '</span>', $link['href'], $link);

A link tömb lesz az l() fgv. harmadik paramétere, ebbe kell szerepelnie a beállításoknak, és mivel HTML-t adunk meg, ezért a $link tömb html kulcsát igaz értékre kell állítanunk. Az l() fgv. első paraméterének pedig beírjuk a span elemek közé a link címét.

Ha ezt elvégeztük, feltöltjük a template.php-t a smink könyvtárába, majd hogy a rendszer érzékelje az új fgv. létrejöttét, menjünk be a sminkek beállítási oldalába (admin/build/themes) és nyomjunk egy mentést.

Ezután minden menüelem egyedi azonosítoval fog rendelkezni, és a menü címe span elemek között lesz, amit könnyedén eltüntetetünk. Innenstől kezdve csak CSS kérédése az egész.

Posted in CSS, Drupal, HTML, PHP, Template

Leave a Reply