Personalizzare la pagina dei risultati della ricerca di Drupal con campi immagine cck.

Vediamo come poter personalizzare la pagina dei risultati della ricerca di drupal (modulo core search) in modo da avere uno stile "google like" e poter inserire in ogni singolo risultato un campo immagine cck opportunamente formattato.

Per questo piccolo tutorial dovrete quindi avere installato i moduli cck, imagefield e imagecache (e tutte le relative dipendenze).

Aggiungiamo al tipo "pagina" un campo cck di tipo immagine inserendo ell'etichetta
"Foto" e nel nome del campo "img_arc".

Aggiungiamo un preset a imagecache nominandolo "imagefield_thumbs" e aggiungiamo un'azione per scalare l'immagine, ad esempio, ad un massimo di 82x82 pixel.

Da qui in poi è necessario seguire le istruzione per la versione di Drupal che utilizziamo.

Drupal 5

Modifichiamo il file template.php del vostro tema inserendo questa nuova funzione

function [nome-tema]_search_item($item, $type) {
  $output = ' <dt class="title"><a href="'. check_url($item['link']) .'">'. check_plain($item['title']) .'</a></dt>';
  $output .= '<dd>'.(isset($item['node']->field_img_arc[0]) ? theme('imagecache','imagefield_thumbs',$item['node']->field_img_arc[0]['filepath']) : '') . ($item['snippet'] ? '<p>'. $item['snippet'] .'</p>' : '').'<cite>'.$item['link'] . '</cite> - <span class="gl">' . format_date($item['date'], 'small') .'</span></dd>';
  return $output;
}

cambiando solamente il nome della funzione per riflettere il nome del vostro tema. Ad esempio bluemarine_search_item.

Drupal 6

E' possibile decidere se modificare direttamente il file modules/search/search-result.tpl.php oppure crearne uno nuovo (sempre con nome search-result.tpl.php) e caricarlo nella directory del vostro tema. Ad ogni modo il file dovrà contenere solamente le seguenti righe di codice:

<dt class="title"><a href="<?php print $url ?>"><?php print $title ?></a></dt>
<dd><?php print (isset($result['node']->field_arc_img[0]) ? theme('imagecache','imagefield_thumbs',$result['node']->field_arc_img[0]['filepath']) : '') . ($snippet ? '<p>'. $snippet .'</p>' : '') ?>
<cite><?php print $url ?></cite> - <span class="gl"><?php print $info_split['date'] ?></span></dd>

Per tutte le versioni

Applichiamo un pò di stili (potete inserirli nel file style.css del vostro tema).

dl.search-results dt.title
{
  clear: both;
  margin-top: 10px;
}
dl.search-results dt.title a
{
  color: #2200CC;
  font-family: arial,sans serif;
  font-size: medium;
  font-weight: normal;
}
dl.search-results dt.title a:visited
{
  color:  #551A8B;
}
dl.search-results img.imagecache
{
  float: left;
  margin: 0px 10px 10px 10px;
  border:1px solid #2200CC;
}
dl.search-results cite
{
  font-family: arial,sans serif;
  color:green;
  font-style:normal;
}
dl.search-results dd
{
  margin: 0px 0px 0px 0px;
  font-family: arial,sans serif;
  font-style:normal;
}
dl.search-results p
{
  margin: 0px;
}
dl.search-results span.gl
{
  font-family: arial,sans serif;
  color:#7777CC;
  font-style:normal;
}

A questo punto dovrebbe essere tutto a posto, c'è solo da vedere i risultati ottenuti.

Se volete vedere il risultato finale prima di applicare modifiche al vostro codice, ecco un esempio per Drupal 5:

http://www.equipmentconstruction.eu/it/search/node/caterpillar

Per Drupal 6 utilizzate la ricerca in questo stesso sito:

http://webagency.chgnet.com/search/node/ispconfig

In profondità

Personalizzare il codice per i vostri bisogni è semplice.

Supponiamo di avere già un campo immagine cck in un tipo di nodo: basta modificare tutte le occorrenze di field_arc_img nel codice con il nome del vostro campo (del tipo field_qualcosa).

Supponiamo di avere un preset già impostato per imagecache: basta sostituire il suo nome nella chiamata alla funzione theme, ossia al posto del valore 'imagefield_thumbs'.

Il codice può essere esteso facilmente per visualizzare altri tipi di campi cck. Per sapere quali campi si hanno a disposizione per un certo risultato si può usare una funzione di stampa del genere

(per drupal 5)

drupal_set_message('<pre>'. print_r($item['node'], TRUE) .'</pre>');

(per drupal 6)

drupal_set_message('<pre>'. print_r($result['node'], TRUE) .'</pre>');

da inserire nei codici (attenzione: solo per siti di prova, stampa direttamente a schermo).

E' possibile inserire un numero arbitrario di campi CCK nella ricerca. Se ad esempio abbiamo un campo solo testo (ad esempio field_solotesto) e vogliamo inserirlo in coda ad ogni risultato (se presente nel relativo nodo!) il codice diviene:

(per drupal 6)

<dt class="title"><a href="<?php print $url ?>"><?php print $title ?></a></dt>
<dd>
<?php print (isset($result['node']->field_arc_img[0]) ? theme('imagecache','imagefield_thumbs',$result['node']->field_arc_img[0]['filepath']) : '') ?>
<?php print ($snippet ? '<p>'. $snippet .'</p>' : '') ?>
<cite><?php print $url ?></cite> - <span class="gl"><?php print $info_split['date'] ?></span>
<?php print (isset($result['node']->field_solotesto[0]) ? '<blockquote>'.$result['node']->field_solotesto[0]['safe'].'</blockquote>' : '') ?>
</dd>

con un risultato simile: