Mostrar un icono como botón de búsqueda

Hay muchos modos para substituir el texto del botón de un cuadro de búsqueda, la mayoría involucran cambios en la maquetación que en ocasiones pueden complicarse, Drupal permite substituir este texto por un icono utilizando el hook form_alter del API de forms.

Este es el código que he utilizado en el pequeño módulo que tengo creado para modificaciones generales que substituye la palabra "Buscar" por un icono de una lupa en el bloque de búsqueda de este blog.

<?php
function mimodulo_form_alter(&$form, $form_state, $form_id){
  if ($form_id == 'search_block_form'){
    // Se invoca la variable global $theme para obtener el tema activado en ese momento
    global $theme;
    // Se elimina el título del bloque de búsqueda
    unset($form['search_block_form']['#title']);
    // Se substituye el texto del bloque por un image_button
    // y se le da la ruta donde está la imágen a mostrar
    $form['submit'] = array('#type' => 'image_button', '#value' => t('Search'),
                   '#src'  => drupal_get_path('theme', $theme).'/images/search.png');
  }
}
?>

Comentarios

Buenas compañero.
¿Para que programar php si lo puedes hacer de forma más sencilla con css?
¿No sería una solución más limpia aplicar un css que sustituya el botón por una imagen?
Un saludo
Oskar

Desde otro punto de vista, ¿para qué liarte con CSS y posibles problemas de compatibilidad de navegadores si con un simple hook puedes cambiar el botón de forma más simple?
Es otra opción, a mi me resulta más cómoda, y esta funciona siempre :)

Un saludo!

La cabra tira al monte, y cada uno nos defendemos con nuestras armas.

Lo bueno de Drupal es que puedes conseguir lo mismo por diferentes vías.

Creo recordar que en d5.x esto no se podía hacer por algún problema.

Un saludo

Oskar

Probaré con Drupal 5, la verdad es que estoy dedicando mi atención únicamente a D6 desde hace tiempo :)

Hola, estoy configurando al gusto de mi jefe una inatalacion de Drupal 6, y tengo una duda en cuanto a diseño. Viendo lo que poneis arriba,, ¿de este modo sería posible incluir una imagen en el título de un bloque tal y como haceis con el boton de búsqueda?. ¿Se puede hacer de algún modo?. No he encontrado nada al respecto que funcione... gracias.

No he probado este método para substituir el título Nazgul24, así que no sabría decirte si funciona, otra opción que tienes es añadir un elemento #prefix en el form_alter del formulario de búsqueda que contenga la imágen que necesitas y el texto lo eliminas.

Utilizar jquery para modificar el div de los bloques, ocultando el texto y sustituyendo por una imagen?

Un saludo

Oskar

Oskar, es otra opción, pero en ese caso tienes que tener en cuenta que los clientes que se conecten sin javascript activado no verán la imagen.

Es verdad, se me olvida que hay usuarios no utilizan javascript.

En ese caso, creo que la solución de usar css para poner background de fondo en el div, y hacer un text-indent con css sería otra solución.

Un saludo

Oskar

pd: ¿Qué es mejor arreglar las cosas con css, o con php?

Yo prefiero hacerlo en php, por dos razones:
- Se ejecuta en el servidor y no dependes del navegador del cliente.
- El css se puede desactivar a nivel de navegador y es código públicado.

No quisiera quitar el título del bloque, sino añadir un icono al titulo; como filtra las etiquetas no se puede poner en el campo de texto del título.

No entiendo a que te refieres con añadir un #prefix al formulario de busqueda... .A lo que yo me refiero es a un bloque normal, de hecho, un bloque que muestra un menu personalizado. Hablando de php, de hacerl ocomo comentas, ¿donde tendría que añadir ese prefix y modificar el php?. Disculpa mi ignorancia del php de Drupal, no se exactamente como está distribuido a ese nivel.

He probado con css a añadir un background al div de la cabecera del bloque usando la id de éste en el style.css y nada de nada. Sé que está correctamente identificado porque puedo indentar el tíotulo o modificarlo, pero no muestra la imagen.

Vosotros direis.

PD: al final convencí a mi jefe para no hacerlo, pero quiero saber como se puede hacer - si se puede- ya como algo personal. Gracias a los dos.

Nazgul24, sin ver el código ni la página no se que decirte. Pero si solo quieres añadir una imagen al título, sin quitar el texto del mismo en ese caso css.

Utiliza firebug para ver si esta aplicando bien el css.

Un saludo

Oskar

Lo mejor en ese caso es que uses css y firebug como te comenta Oskar.
Puede ser que no veas tus cambios porque tengas la cache de css activada en Drupal, revisa las opciones de Performance o Rendimiento en el panel de administracion, desactiva todo mientras tu sitio esté en desarrollo y limpia la cache de tu navegador.

Para el tema de #prefix de formularios, puedes revisar el form api: http://api.drupal.org/api/file/developer/topics/forms_api_reference.html/6

He usado el siguiente código en el style css:

#block-menu-menu-sospymes .block-title
{
background-image: url(http://localhost/dir/redcross.jpg)no-repeat 12px center;
color: red;

}

El código debe estar correcto porque puedo cambiar el color del título, sin problemas, pero la imagen no aparece por ningún lado, y la ruta es correcta porque desde el navegador la imagen aparece sin problemas.

Igual no se puede hacer... ¿Que pensais?

#block-menu-menu-sospymes .block-title {
background-image: url(images/redcross.jpg) no-repeat 12px center;
color: red;
}

No se utilizan rutas absolutas para las imágenes, la ruta la construyes a partir de la carpeta images (o como la llames) dentro del directorio de tu tema.

Un saludo

Oskar

No es lo mas correcto, pero puedes utilizar imagenes con url completa para asignar propiedades CSS, otra cosa es que cuando cambies de servidor, tendrás que cambiar estas propiedades.

Yo apostaría porque no has limpiado la cache de Drupal y desactivado la agregación de css o tienes problemas con la caché de tu navegador.

Oskar,se que no se deben usar url absolutas, eso fue sólo a efectos de test, pero la ruta muestra en el navegador la imagen, de modo que debería funcionar. Respecto a la cache, está desactivada, y he limpiado la cache del navegador (tanto ie como firefox). Da la impresión de que no se puede hacer así...

nazgul24.

Que muestre la imagen consultando la url no quiere decir que este bien para css, como tu mismo puedes comprobar.

Lo primero, la imagen debería estar dentro del tema de Drupal, en la carpeta images o como se llame.
deberías invocarla con la ruta relativa no absoluta.

Te paso el código de css de http://www.drupal.org.es de las llaves del bloque de login, para que veas como lo tienen.
{background:transparent url(/sites/all/themes/DrupalHispano2009/icons/tnt_icon_14.png) no-repeat scroll left center;
}

Un saludo

Oskar

Al final lo he logrado usando lo siguiente en el style.css que está en la carpeta de la instancia del tema (según su color):

#id_del_bloque h2.block-title {
background: url(imagen.jpg) no-repeat center left;
}

poniendo la imagen en la carpeta images que tiene en el theme. cambiando el nombre del bloque y poniendo el que se necesite (para averiguarlo he usado el firebug como recomendasteis).

Gracias, campeones.

ponelo vos

@Nazgul24 El problema que tenías con tu CSS inicial es que estabas usando mal la directiva "background-image". Esta sólo sirve para indicar la imágen de fondo y ya está. Cómo tu quieres indicar a más a más de la imágen, la posición y la repetición, debes usar "background" (la forma comprimida). Tu estilo quedaría de la forma:

<pre><code>
#block-menu-menu-sospymes .block-title {
background: url(images/redcross.jpg) no-repeat 12px center;
color: red;
}
</code></pre>

Prueba de mensaje

muy bueno tu codigo , funciona perfectamente

Añadir nuevo comentario