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

Jedním z úkolů, před je které je kodér přetvářející grafiku do drupalovské šablony postaven, je zobrazení tlačítek jako obrázků bez textu. Nejčastějším požadavkem je taková úprava tlačítka ve vyhledávacím formuláři. Máte dvě možnosti, jak obrázkového tlačítka docílit.

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

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

co takhle v tom css zadat display: none; to by mělo zobrazování textu vyřešit taky a není potřeba "fixlovat" s velikostí písma.

návštěvník

nebo druhá možnost:

.search .form-submit

{

float:left;

border:0;

width:27px;

height:25px;

margin-left:10px;

background: transparent url("images/hledej.png") repeat-y top center;

text-indent:-5000px;

}

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru