Ebben a rövidke írásban szeretnék bemutatni egy pár lehetőséget arra, hogy hogyan tudjuk lecserélni a Drupal bármely űrlapjának bármely gombját egy képre. A mintákban a kereső űrlap Keresés gombját fogom módosítani. Ez remélem elég támpontul fog szolgálni ahhoz, hogs később bármely űrlap bármely gombját képre cseréljük. Mivel nincs egyetlen egy üdvözítő megoldás sem ezért a példákban szeretnék rávilágítani az egyes megoldások előnyeire és hátrányaira.

Írjunk modult!

Az első megoldás egy modul fejlesztése lesz. Ez akkor előnyös, ha szeretnénk kihasználni azt a többletet amit egy kép nyújt számunkra. Kevesen ismerik talán azt a tényt, hogy a képre való kattintáskor nem csak az űrlap adatai küldődnek el, hanem a koordináták is ahova a képre klikkeltünk. Ezt az adatot aztán számos célra felhasználhatjuk. Lehet tesztelni ügyes kérésekkel a robotokat. (pl. Kattints az é betűre), lehet feltupírozni a beléptetést. (pl. Az adminisztrátor csak akkor léphet be, ha a megfelelő helyre kattintott a gombon.) és lehet még számtalan egyéb dologra használni, de azok nem témái e rövidke cikknek. A lényeg, hogy megértsük: Ezt a megoldást akkor használjuk csak, ha elsősorban a működési logika miatt van rá szükség. Három fájlra lesz szükségünk. Egy info fájlra, egy modul fájlra és egy képre.
A searchimagebutton.info fájl:

name = Search image button
description = This mini module replace the submit button of the search form to an image.
core = 6.x

A searchimagebutton.module fájl:

function searchimagebutton_form_alter (&$form, $form_state, $form_id) {
  if($form_id == 'search_theme_form') {
    $form['submit']['#type'] = 'image_button';
    $form['submit']['#attributes']['src'] = base_path() . drupal_get_path('module','searchimagebutton') .'/search.png';
  }
}

És a kép:

Nos nézzük meg röviden mit is csinál ez a modul. Először is a searchimagebutton_form_alter() függvény segítségével beépül az összes form-ba. Ezek közül is csak a search_theme_form azonosítójú űrlapba fog belepiszkítani. Nem csinál mást, mint lecseréli a submit gomb típusát image-ra és az attribútumok közé felveszi a kép forrását. Mivel a kép a modul könyvtárában van ezért az útvonalban szerepelnie kell a modul helyének (drupal_get_path()) valamit arra is figyelni kell, hogy ha a Drupalt esetleg egy alkönyvtárba installálták akkor is helyesen működjön(base_path()) a modul.

Sminkeljünk!

Talán érthető volt az előző részből, hogy azt a módszert csak igen speciális esetben érdemes használni. Amennyiben a kinézet miatt szeretnénk kép gombot akkor az oldal sminkjébe kell elhelyeznünk a módosításainkat. Ezt két helyen is megtehetjük. Az első esetben magát a formot fogjuk sminkelni. Ehhez nem kell mást tenni, mint a sminkünk template.php fájljába elhelyezni a következő függvényt:

function phptemplate_search_theme_form($form) {
   $form['submit']['#type'] = 'image_button';
   $form['submit']['#attributes']['src'] = base_path() . path_to_theme() . '/images/search.png';
  return drupal_render($form);
}

Természetesen ilyenkor a kereső gomb képe a sminkünk images mappájában kell, hogy legyen. Ezzel tehát nem csinálunk mást, mint megváltoztatjuk a űrlapunk kinézetét.

Sminkeljünk még!

A most következő megoldást tekintem én üdvözítőnek, de azért kerül ide utoljára mert ezzel szenvedtem a legtöbbet. Örök hála Aborosnak aki segített és együtt értetlenkedett velem, hogy miért nem működik az aminek mennie kéne. Aztán végül meglett a megoldás. A teszt rendszeren lévő Drupal verziója volt régi és abban még volt egy olyan hiba ami miatt esélyünk se volt megtalálni a megoldást. No de térjünk vissza az eredeti vezérfonalunkhoz. Nézzük a megoldást. Ezt a szövegrészt ugyancsak sminkünk template.php fájljába kell elhelyezni:

function SMINKNEVE_preprocess_search_theme_form(&$vars) {
  unset($vars['form']['submit']['#printed']);
  $vars['form']['submit']['#type'] = 'image_button';
  $vars['form']['submit']['#attributes']['src'] = base_path() . drupal_get_path('theme','SMINKNEVE') .'/images/search.png';
  $vars['search']['submit'] = drupal_render($vars['form']['submit']);
  $vars['search_form'] = implode($vars['search']);
}

Először is a SMINKNEVE helyett mindenhova írjuk be a saját sminkünk nevét. Erre azért van itt szükség, mert a path_to_theme() függvény ebben az esetben a search modul útvonalát adja vissza, hisz a search_theme_form.tpl.php fájl abban a könyvtárban van. Ebben az esetben tehát ezt a függvényt nem fogjuk tudni használni. Ha lemásoljuk a search_theme_form.tpl.php fájlt a sminkünk könyvtárába akkor már használhatjuk a path_to_theme() függvényt. (Erre Aboros hívta fel a figyelmemet. Köszönet neki ezért!) A függvény nevében pedig azért használom a smink nevét, hogy nehogy abban a hitben ringassuk magunkat, hogy ez majd egy jó kis bázis smink lesz amiből majd sok-sok alsminket leszármaztatunk. Nos nézzük mit csinálunk. Először is tudatjuk a rendszerrel, hogy mi újra ki szeretnénk nyomtatni a submit gombot. Ezután megváltoztatjuk a típusát és beállítjuk a kép útvonalát. Újra lerajzoltatjuk (lerendereljük) a Drupallal ezt az űrlap elemet. Ezután már csak a search_form változó értékét kell összeraknunk és kész is vagyunk.

Ki a legény a gáton?

Maga a kereső űrlap több lépésen keresztül készül el. Mi három lehetséges helyen nyúltunk most bele a folyamatba. Az első megoldás akkor avatkozott be amikor készült a form. Ott alapvetően azért piszkáltunk bele, hogy a működést befolyásoljuk. Természetesen ha bénázunk akkor később is beleszólhatunk a működésbe, de akkor már inkább hibáról van szó mintsem lehetőségről. A második esetben magát az űrlapot formáztuk. A harmadik esetben pedig a kész és megformázott űrlap elemekből elkészülő, a sminkbe integrált kereső dobozt. A második esetben a kereső űrlapot, míg ez utóbbinál kereső doboz - amiben az űrlap van - kinézetét módosítottuk. Ez utóbbi tehát az utolsó lépés, ahol végleg meghatározhatjuk a kinézetet. Minden más megoldás - page.tpl.php gányolása, *.tpl.php módosítás - befolyásolja az űrlap működését ezért használata kerülendő.