Hogyan lesz a kereső űrlapban kép a gomb?
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'; }
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) { $vars['form']['submit']['#type'] = 'image_button'; $vars['form']['submit']['#attributes']['src'] = base_path() . drupal_get_path('theme','SMINKNEVE') .'/images/search.png'; }
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ő.
Csatolmány | Méret |
---|---|
![]() | 2.38 KB |
Hozzászólások
Javasolt az alapos tesztelés
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
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?
CSS?
Ez a cikk arról szól, ha
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
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
Mert már renderelve van és úgy belepiszkítani nem túl egészséges dolog. Pontosan mire gondoltál?
pp
Anno valakinek szerettem
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
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.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
Próbáltam a két utóbbi megoldást, de nem jártam sikerrel. Drupal 6.16
Ezt szomorúan hallom. :(
Ezt szomorúan hallom. :( Nekem ment, kipróbáltam.
Nekem sem ment. Talá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
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,
ü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
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
Üdv!
Nálam működik, de a validáláson nem megy át.
2 x szerepel az src.
Megoldható ez a probléma?
Tóth József