Drupal: jak na obrázkové tlačítko ve vyhledávání

Formuláře v Drupalu jsou standardně generovány tak, že tlačítko, které slouží pro jejich odeslání, má na sobě nějaký text. Když zůstaneme u klasického vyhledávacího formuláře zobrazeného nejčastěji někde v hlavičce, bude na jeho tlačítku text Hledat.

V grafickém návrhu však můžete mít požadavek, kdy je místo textu na tlačítku použit jen nějaký symbol, viz třeba rovnou Maxiorel nebo web www.ekucharka.net. Abyste této úpravy docílili, máte v zásadě dvě možnosti - využít CSS a obrázek umístit jako pozadí, nebo s troškou PHP kódu navíc vytvořit z běžného tlačítka obrázkové tlačítko.

Obrázek místo tlačítka pomocí CSS

Úprava pomocí CSS je ve skutečnosti velice jednoduchá. Tlačítku přiřadíte pozadí pomocí vlastnosti background, ve kterém specifikujete cestu k obrázku. Odstraníte rámeček okolo tlačítka a určíte jeho rozměry tak, aby odpovídaly obrázku umístěnému na pozadí.

Nyní zbývá poslední problém. Je třeba odstranit text, který překrývá grafiku tlačítka. Zbavíte se jej jednoduchým trikem, nastavíte nulovou velikost textu pro dané tlačítko. Ve většině prohlížečů to funguje, v Google Chrome zůstává místo textu tečka o velikosti 1x1 px, která může narušovat grafiku tlačítka.

I když to tedy není zcela čisté řešení, může mnoha z vás stačit. Zde je ukázkový kód pro obrázkové tlačítko v bloku s vyhledávacím políčkem:

{syntaxhighlighter brush:php} #block-search-0 .form-submit{ background: #ccc url(images/search.png) no-repeat top left; /* barva pozadí a obrázek */ border: none; /* odstranění rámečku */ height: 25px; /* výška */ width: 48px; /* šířka tlačítka */ font-size: 0px; /* nulová velikost textu */ } {/syntaxhighlighter}

Na pozadí tlačítka je tedy obrázek search.png umístěný ve složce images, která se nachází v aktuálním tématu vzhledu.

Skutečné obrázkové tlačítko v Drupalu

Chcete-li obrázkové tlačítko generovat přímo do kódu stránky bez nutnosti „švindlovat" s nulovou velikostí textu, budete muset sáhnout do souboru template.php ve vašem tématu vzhledu pro Drupal. Pokud tento soubor v tématu nemáte, prostě jej vytvořte. Na jeho začátek nezapomeňte umístit znaky <?php.

Do souboru template.php přidejte následující funkci, která zajistí vykreslení obrázkového tlačítka v bloku s vyhledávacím formulářem. Řetězec napsaný velkými písmeny nahraďte názvem svého tématu vzhledu.

{syntaxhighlighter brush:php} function VASETEMA_preprocess_search_block_form(&$vars, $hook) { $vars['form']['submit']['#type'] = 'image_button'; $vars['form']['submit']['#src'] = path_to_theme() . '/images/search.png'; unset($vars['form']['submit']['#printed']); $vars['search']['submit'] = drupal_render($vars['form']['submit']); $vars['search_form'] = implode($vars['search']); } {/syntaxhighlighter}

Po přidání této funkce resetujte téma vzhledu, nejlépe jeho vypnutím a zapnutím případně pomocí Administration menu zavoláním funkce Flush all caches. Výše uvedená funkce slouží pro úpravu bloku s vyhledávacím políčkem. Pokud byste něco podobného chtěli vyřešit i ve formuláři na stránce s pokročilým hledáním, zaměňte název funkce za VASETEMA_preprocess_search_theme_form(&$vars, $hook).