...

Темизация элементов формы поиска в Dpupal 7

Небольшая заметка по темизации Drupal 7. Если у вас есть задача кастомизировать элементы формы поиска Drupal 7, то вы можете воспользоваться сниппетами приведенными ниже. Первая часть кода — это альтер формы поиска с добавлением и переопределением  нужных вам элементов форм, а вторая часть позволяет заменить тип поля поиска с простого text на HTML 5 атрибут типа поля search.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['search_block_form']['#title'] = t('Search'); // Change the text on the label element
    $form['search_block_form']['#title_display'] = 'invisible'; // Toggle label visibilty
    $form['search_block_form']['#size'] = 40;  // define size of the textfield
    $form['search_block_form']['#default_value'] = t('Search'); // Set a default value for the textfield
    $form['actions']['submit']['#value'] = t('GO!'); // Change the text on the submit button
    $form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/search-button.png');
    // Add extra attributes to the text box
    $form['search_block_form']['#attributes']['onblur'] = "if (this.value == '') {this.value = 'Search';}";
    $form['search_block_form']['#attributes']['onfocus'] = "if (this.value == 'Search') {this.value = '';}";
    // Prevent user from searching the default text
    $form['#attributes']['onsubmit'] = "if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }";
    // Alternative (HTML5) placeholder attribute instead of using the javascript
    $form['search_block_form']['#attributes']['placeholder'] = t('Search');
  }
}
 
/**
* Changes the search form to use the "search" input element of HTML5.
*/
function YOURTHEME_preprocess_search_block_form(&$vars) {
$vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
}
 
?>

Не забудьте заменить в именах функций YOURTHEME на имя вашей темы.

Спонсоры статьи:
Оцените статью
Добавить комментарий