Question

I want in my template.php (drupal theme) something like this:

$search_button ='search-button.png';
if($('#page-wrapper').hasClass('blue-colour')) {
    $search_button ='search-button-blue.png';
}
else if ($('#page-wrapper').hasClass('green-colour')) {
    $search_button ='search-button-green.png';
}
$form['actions']['submit'] = array('#type' => 'image_button', '#src' => base_path() . path_to_theme() . '/images/'.$search_button);

Which doesn’t work because it is jQuery. The problem is the syntax on this bit:

if($(‘#page-wrapper’).hasClass(‘blue-colour’))

How can I do the same thing without using javascript or jQuery and only php and/or some Drupal function?

I want to replace the icon for a search box based on a class set on a HTML element:

<div id="page-wrapper" class="blue-colour">

In this case it would check that the class is ‘blue-colour’ and would set the correct blue icon on the variable ($search_button).

Answer 1

This doesn’t answer your question directly, but you can solve this very nicely using just css:

1. Don’t use an image for your button, but a text and do something like text-indent: -9999em;
2. Set the background image of the button to the image you want like (simple example):

.blue-colour .button {
   background: url(search-button-blue.png);
}
.green-colour .button {
   background: url(search-button-green.png);
}