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

Argomenti: 

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.macchineedili.it/it/search/node/caterpillar

Per Drupal 6 utilizzate la ricerca in questo stesso sito:

http://www.ganovelli.it/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:

Risultato applicazione codice

 

Commenti