Hogyan lesz a kereső űrlapban kép a gomb?

Igy fog kinézni. Látható, hogy a kereső gombot egy szép zöld hátterű képre cseréltem le.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:

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

A searchimagebutton.module fájl:

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

És a kép:
A kereső gomb képe. Itt most nehogy azt mondja valaki, hogy ronda! Ez csak egy minta.
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:

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

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:

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

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ő.

Hozzászólások

Javasolt az alapos tesztelés IE6 esetén, az ismert képgomb problémák miatt http://www.google.hu/search?q=ie+input+type+image

Biztonságosabb CSS segítségével csinosítani a gombokat: http://dzone.hu/hu Bár ez gyakran megbukik a megrendelő ellenállásán (a CSS gombok nem olyan szépek a böngészőben, mint a képgombok).

Hát ja, de a cikk nem is a kép gomb használatáról vagy hasznosságáról szól. Én nálam pl. biztos az utolsó lenne amit használnék és inkább css-el operálnék. Nem beszélve arról, hogy ha a szöveg nem szövegként, hanem képként van egy gombon akkor a localizálásnak is adtunk egy nagy pofont. Nem beszélve a nem túl korrekt form feldolgozások megvalósításának és a különböző ajaxos csodáknak a tönkretételéről.

pp

CSS?

Ez a cikk arról szól, ha valamiért a CSS helyett kép gombot kell betennünk tehát type="submit" helyett type="image" akkor azt hogyan oldjuk meg.

pp

Miért kell ilyenkor a sminkes megoldásnál újra renderelni az úrlapot? Miért nem elég a preprocesszben az egyszerű módosítás?

Mert már renderelve van és úgy belepiszkítani nem túl egészséges dolog. Pontosan mire gondoltál?

pp

Anno valakinek szerettem volna megmutatni a Drupal sminkelését, az illető webfejlesztő, de nem ismeri a Drupalt, és a PHP-t is csak kissé (statikus honlapokat készít). Volt egy kérdése, hogy a kereső űrlap mellől el kellene tüntetni a címkét, hogyan fogjon neki. Úgy gondoltam, mutatok egy elegáns megoldást, tüntessük el preprocessz-ben, meg is találtam a szöveget a változókban. De hiába töröltem ki a szöveget, írtam át bármire, a végeredmény a honlapon nem változott.
Sajnos már csak később, Sweetchuck segítségével jutottam el oda, hogy újra kell építeni a formot a sikeres eredményhez.
Viszont azóta sem értem pontosan a logikát, hogy ilyenkor miért kell újraépíteni a formot, és más elemek (pl. node-okhoz tartozó linkek) preprocessz-beli módosításakor miért nincs erre szükség?

Jó lenne látni pontosan mit csináltál a két esetben. A form reprezentációja egy tömb ebből a drupal_render() függvény segítségével készítünk HTML-t. Egy űrlap HTMLjébe különösen veszélyes belenyúlni, hisz az nagyrészt a működési logikához köthető. Ezért nem a HTML formon módosítok, hanem a tömbön amiből aztán újra elkészítem a HTML-t. A node eredeti preprocessében a linkekkel ugyan ez történik. Nem hinném, hogy máshogy működött, hacsak nem a HTML reprezentációba nyúltál bele.

  1. $variables['links'] = !empty($node->links) ? theme('links', $node->links, array('class' => 'links inline')) : '';

Ha Te a $links változót módosítottad akkor nyílván nem kellett újra renderelned/sminkelned, hisz Te a kész HTML-t módosítottad. Amennyiben a $node->links-be tettél bele újabb elemet, akkor a fenti sort is végre kellett hajtanod. Így volt?

pp

Próbáltam a két utóbbi megoldást, de nem jártam sikerrel. Drupal 6.16

Ezt szomorúan hallom. :( Nekem ment, kipróbáltam.

Nekem sem ment. Találtam zen-nel kapcsolatos issue-t is, tehát lehet, összefügg vele, minden esetre a megoldás ez lett:
function SMINKNEVE_preprocess_search_block_form(&$vars, $hook) függvényben kell elvégezni a beállításokat.

Na ne vicceljünk már!

search_theme_form - a kereső(search) űrlap(form) a sminkben(theme)
search_block_form - a kereső(search) űrlap(form) a blokkban(block)

Garlandnál ha bekapcsolod a keresés(search) modult és engedélyezed a sminknél a keresőt akkor megjelenik egy űrlap bal oldalt. Na de lesz egy blokk is amit szintén kirakhatsz. Ha kirakod a bal oldalra akkor lesz egymás alatt két ugyan olyan kereső űrlapod. Ezek olyanok mint az ikertestvérek. Ugyan úgy néznek ki, de hiába öltözteted/sminkeled át az egyiket a másik ugyan olyan marad.

:D

pp

üdv,

jó leírás, köszi.

ilyenek érdekelnek mostanában engem is, remélem a
sminkmester tanfolyamon erről is esik néhány szó.

cU.sco

Az ide vezető útról is lesz szó, de nem biztos, hogy mindenkinek lesz ideje, energiája elmélyedni ebben.

pp

Üdv!

Nálam működik, de a validáláson nem megy át.
2 x szerepel az src.
Megoldható ez a probléma?

  1. input type="image" name="submit" value="Keresés" id="edit-submit" src="/drupal/sites/all/modules/searchimagebutton/search-icon.gif" class="form-submit" src="/drupal/"

Tóth József

Új hozzászólás