Supporto volontario e collaborativo per Joomla!® in italiano

Come abbiamo personalizzato il plugin Author Info Box

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Personalizzazione AIB - Author Info BoxQualche giorno fa Alessandro Rossi (AlexRed) ci ha chiesto di personalizzare il plugin AIB - Author Info Box per il portale Joomla.it.

In questo articolo vogliamo spiegare come abbiamo fatto sperando che possa essere di aiuto per qualcuno.

Su Joomla.it il plugin AIB viene utilizzato per visualizzare sotto gli articoli la scheda dell'autore: un riquadro con all'interno alcune informazioni sull'autore.


Per capire qual è stata la modifica che abbiamo fatto basta guardare il prima e il dopo della scheda dell'utente.

Nel prima si vede che:
  • l'immagine dell'autore è presa dalla propria immagine Gravatar;
  • il nome dell'autore non è linkato;
  • il modulo degli articoli dello stesso autore è separato dalla scheda dell'autore.
Scheda autore prima Scheda autore prima

Nel dopo invece:
  • l'immagine dell'autore viene sostituita dall'immagine del profilo di Google+ dell'utente;
  • il nome dell'autore è linkato alla pagine del profilo di Google+;
  • internamente alla scheda dell'autore è incluso il modulo degli articoli dello stesso autore.
Scheda autore dopo

Ricapitolando quindi le richieste di AlexRed erano le seguenti:
  • Sul nome autore che appare di fianco alla foto mettere il link nella forma: https://plus.google.com/NUMEROID?rel=author dove il NUMEROID è presente nel profilo dell'utente su Joomla!, nel campo "Libro preferito";
  • Far apparire l'immagine dell'avatar pescandola dall'immagine del profilo di Google+;
  • Se un utente non ha impostato il proprio NUMEROID nel campo "Libro preferito" visualizzare come immagine dell'autore una jpg di default;
  • Aggiungere alla scheda dell'autore una posizione modulo in cui poter inserire il modulo degli ultimi articoli dell'autore sfruttando i normali meccanismi di Joomla!.
Configurazione AIB - Author Info Box Per completezza e per semplificare la vita a chi volesse replicare le modifiche descritte in questo articolo, prima di lanciarci nei dettagli del codice, riportiamo nello screenshot di seguito la configurazione del plugin AIB così come è stata fatta sul sito di Joomla.it. Inoltre, è bene sottolineare che si è scelto di configurare il plugin AIB per fare in modo che visualizzi i dati presi dal tab "Profilo Utente". Tale tab compare nei dettagli di un utente se si abilita il plugin "User - Profile" incluso in Joomla!.

Fatte le dovute premesse possiamo sporcarci le mani con il codice.

Cominciamo con il dire che il plugin AIB modifica il contenuto di un articolo aggiungendovi del codice HTML per visualizzare la scheda dell'autore. Per questo motivo ci aspettiamo che il plugin sia di tipo Content e che come tutti i plugin di questo tipo, una volta installato, venga copiato nella directory ROOT DI JOOMLA/plugins/content.

L'assunto è esatto e infatti ritroviamo i file della logica nella directory ROOT DI JOOMLA/plugins/content/authorinfobox/.
La struttura della directory è piuttosto semplice e contiene i seguenti file:
  • authorinfobox.xml: oltre ai dettagli sul tipo di estensione contiene l'elenco dei parametri configurabili nei settaggi del plugin;
  • authorinfobox.php: è il cuore del plugin e contiene il codice PHP del plugin;
  • authorinfobox.css: è il foglio di stile;
  • images: cotiene delle immagini richiamate nel css;
  • fields: contiene la definizione di alcune tipologie di campi richiamati nel file authorinfobox.xml;
Per le esigenze di questa personalizzazione l'unico file che andremo a modificare è il file `authorinfobox.php`.

Se lo apriamo vediamo che contiene la classe PlgContentAuthorInfobox. La struttura è quella tipica di un plugin di tipo Content, contiene cioè i metodi onContentPrepare, onContentBeforeDisplay, onContentAfterDisplay che verranno richiamati dal motore di Joomla! al momento della visualizzazione di un articolo.

A seconda delle impostazioni del plugin, a partire dai metodi precedenti, verrà richiamato il metodo renderAuthorInfoBox per inserire la scheda dell'autore all'inizio o alla fine dell'articolo.

A sua volta il metodo renderAuthorInfoBox carica i dati dell'autore (metodo getAuthorData) e con questi produce l'HTML della scheda (metodo getData) che verrà concatenato prima o dopo il testo dell'articolo ($row->text = $html.$row->text; o $row->text .= $html;).

  public function renderAuthorInfoBox(&$row, $position = 'after')
  {
...
      $author_data = $this->getAuthorData($row->created_by);
      $html = $this->getData($author_data);
...
        if($position == 'after')
        {
...        
            $row->text .= $html;
...            
        }
        else
        {
...        
            $row->text = $html.$row->text;
...            
        }
 


Se andiamo a vedere il metodo getAuthorData, responsabile di recuperare i dati dell'autore, vediamo che verso la fine, una volta che ha collezionato tutti i dati sull'autore, fornisce in uscita un array associativo.

 
  private function getAuthorData($author_id)
  {
...
    //POSSIAMO INSERIRCI QUI CON LA PERSONALIZZAZIONE
 
    $author_data = array('author_name' => $author_name, 'author_name_link' => $author_name_link, 'author_email' => $author->email, 'author_image' => $author_image, 'author_description' => $author_description, 'author_website' => $author_website, 'author_position' => $author_position, 'social_media' => $social_media);
 
    return $author_data;
  }
 

Appare evidente quindi che possiamo inserire alcune delle nostre personalizzazioni subito prima della creazione dell'array associativo, infatti possiamo modificare la variabile $author_name_link valorizzandola con il link al profilo di Google+ e possiamo modificare la variabile $author_image valorizzandola con l'URL dell'immagine del profilo di Google+.

Il codice della modifica è il seguente:

 
  private function getAuthorData($author_id)
  {
...
 
    //INIZIO MODIFICA GI
    $google_id=trim($this->_aib_profile_plugin->profile['favoritebook']);
    if (!empty($google_id)){
      $author_name_link = '<a href="https://plus.google.com/'.$google_id.'?rel=author" title="'.$author_name.'" target="_blank">'.$author_name.'</a>';
    }else{
      $author_name_link = false;
    }
 
    $author_image = false;
    if ($this->params->get('avatar')){
      $author_image = JURI::base( true ).'/media/aib_none.jpg';
      if (!empty($google_id)){
        $urlwrapper = new AIBUrlWrapper();
        $urlwrapper->CacheLifetime = 3600;  // 1 ora
        $google_api_key='QUI VA INSERITA L\'API KEY';
        $url = "https://www.googleapis.com/plus/v1/people/".$google_id."?fields=image&key=".$google_api_key;
        $data = $urlwrapper->Get($url);
        $array_data=json_decode($data,true);
        if (!empty($array_data) && !empty($array_data['image']) && !empty($array_data['image']['url'])){
          $author_image = str_replace('sz=50','sz=80',$array_data['image']['url']);
          //sz=50 con sz=80
        }
      }
    }
    //FINE MODIFICA GI
 
    $author_data = array('author_name' => $author_name, 'author_name_link' => $author_name_link, 'author_email' => $author->email, 'author_image' => $author_image, 'author_description' => $author_description, 'author_website' => $author_website, 'author_position' => $author_position, 'social_media' => $social_media);
 
    return $author_data;
  }
 

Il primo passo è quello di recuperare dal profilo dell'autore l'ID del suo profilo di Google. Come scelta si è deciso di utilizzare il campo "Libro preferito:" che ogni utente dovrà compilare con il proprio ID Google.

Se l'ID di Google è presente allora si modifica il contenuto della variabile $author_name_link sostituendolo con il codice HTML di un link che punta all'URL del profilo nella forma https://plus.google.com/NUMEROID?rel=author con al posto di NUMEROID l'ID di Google.

Per quanto riguarda invece la modifica all'immagine dell'autore abbiamo agito sulla variabile $author_image che è stata valorizzata con l'URL dell'immagine del profilo di Google+.

In questo caso è stato necessario per prima cosa trovare un modo per recuperare l'URL dell'immagine a partire dall'ID di Google. Fortunatamente ciò è possibile, basta infatti fare una richiesta a Google nella forma https://www.googleapis.com/plus/v1/people/NUMEROID?fields=image&key=API_KEY per ottenere un JSON di risposta che contiene l'URL dell'immagine.

NUMEROID è l'ID dell'utente Google, mentre API_KEY è una chiave che fornisce goolge previa registrazione come sviluppatori per accedere alle sue API.

Il JSON ottenuto da una richiesta di questo tipo è nella forma seguente e contiene al suo interno il riferimento all'immagine voluto.


 
{
 "image": {
  "url": "https://lh4.googleusercontent.com/..../photo.jpg?sz=50"
 }
}
 



Quindi un possibile approccio poteva essere per ogni visualizzazione di articolo fare una richiesta lato server alle API di Google per ottenere l'URL dell'immagine e sostituiro alla variabile $author_name_link.

Questo approccio seppur corretto, per esperienza, avrebbe creato un problema di performance e un problema con i servizi di Google, infatti ad ogni API_KEY fornita da Google è associato un numero limitato di richieste giornaliere.

Per questo motivo abbiamo deciso di effettuare il caching delle risposte provenienti da Google e conservarle per 1 ora in modo da non dover continuamente richiederle a Google. Per farlo abbiamo utilizzato la classe AIBUrlWrapper.

Quindi con l'aiuto di questa classe la logica è semplicemente: se è abilitata la visualizzazione dell'avatar ($this->params->get('avatar')) ed è presente l'ID di Google allora si effettua la richiesta alle API di Google ($urlwrapper->Get($url)) si decodifica la risposta JSON e si sostituisce il valore della variabile $author_image con l'URL fornita da Google ($author_image = str_replace('sz=50','sz=80',$array_data['image']['url']);). I lettori attenti si saranno accorti che viene sostituito il parametro sz=50 con sz=80 per visualizzare l'immagine alla dimensione corretta.

Se invece è attivo l'avatar, ma manca l'ID di Google allora si è optato per visualizzare l'immagine di default che è stata caricata alla posizione JOOMLA_ROOT/media/aib_none.jpg.

Da notare che la classe AIBUrlWrapper alla chiamata $urlwrapper->Get($url) si preoccupa di effettuare tutte le attività di caching necessarie. Il codice della classe AIBUrlWrapper viene riportato di seguito e va aggiunto alla fine del file authorinfobox.php.

 
class AIBUrlWrapper
{
  public $CacheLifetime;
  protected $method;
  protected $cachedir;
 
  public function __construct()
  {
    $this->cachedir = JPATH_ROOT . "/cache/" . get_class($this);
    file_exists($this->cachedir) or mkdir($this->cachedir);
 
    $this->method = "none";
    if (!ini_get('allow_url_fopen')) return;
 
    $functions = array("file_get_contents", "curl_init");
    foreach ($functions as $function)
    {
      if (function_exists($function))
      {
        $this->method = $function;
        return;
      }
    }
  }
 
  public function Get($url)
  {
    if ($this->CacheExists($url)) return $this->CacheContent($url);
    $data = $this->{$this->method}($url);
 
    $this->CacheWrite($url, $data);
    return $data;
  }
 
  protected function file_get_contents($url)
  {
    return file_get_contents($url);
  }
 
  protected function curl_init($url)
  {
    $handle = curl_init($url);
    curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);
    curl_setopt ($handle, CURLOPT_CONNECTTIMEOUT, 5);
    $data = curl_exec($handle);
    curl_close($handle);
    return $data;
  }
 
  protected function none()
  {
    // Server lacks. Returns an empty page.
    return "";
  }
 
  protected function CacheExists($url)
  {
    $cachefile = $this->cachedir . "/" . md5($url);
    if (!file_exists($cachefile)) return false;
 
    $age = time() - filemtime($cachefile);
    return $age < $this->CacheLifetime;
  }
 
  protected function CacheContent($url)
  {
    $cachefile = $this->cachedir . "/" . md5($url);
    return gzinflate(file_get_contents($cachefile));
  }
 
  protected function CacheWrite($url, &$data)
  {
    $cachefile = $this->cachedir . "/" . md5($url);
    return file_put_contents($cachefile, gzdeflate($data));
  }
 
}
 


Sembrerebbe che abbiamo finito, ma manca ancora la modifica per aggiungere alla scheda dell'autore una posizione modulo in cui poter inserire il modulo degli ultimi articoli dell'autore.

In questo caso la modifica è stata realizzata nel metodo getData che abbiamo detto essere il metodo responsabile della creazione del codice HTML.
Scorrendo il metodo è facile vedere che viene creato l'HTML della scheda concatenando i vari pezzi alla variabile $html_output.

Quello che abbiamo fatto è stato inserire poco prima della fine il codice PHP per aggiungere la posizione Joomla! nome-posizione alla generazione del codice HTML della scheda.

 
  private function getData($author_data)
  {
...  
    //INIZIO POSIZIONE MODULO GI
    $document = JFactory::getDocument();
    $renderer = $document->loadRenderer('modules');
    $position = "nome-posizione";
    $options = array('style' => 'raw');
    $html_output .= $renderer->render($position, $options, null);
    //FINE POSIZIONE MODULO GI
 
    if(!empty($html_output))
    {
 
      $html = '<!-- Author Info Box Plugin for Joomla! - Kubik-Rubik Joomla! Extensions - Viktor Vogel --><div id="author_infobox">';
      $html .= $html_output;
      $html .= '</div><br class="clear" />';
    }
    else
    {
      // No data to show, return empty string
      $html = '';
    }
 
 
    return $html;
  }
 



Per finire e rendere la scheda con lo stesso look and feel di quella presente su Joomla.it si ringrazia Luca Orlandini per aver fornito il seguente codice css che va sostituito ai rispettivi riferimenti nel file authorinfobox.css.

 
#author_infobox {
  background-color: #fafafa;
  border: 1px solid #efefef;
  border-radius: 0px;
  color: #777;
  margin: 5px;
  overflow: hidden;
  padding: 20px;
}
 
 
#author_infobox .author_infobox_image img {
  border:2px solid#fff!important;
  box-shadow:0 0 10px #ddd;
  float: left;
  margin: 1px 10px 5px 5px;
}
 
 
#author_infobox .author_infobox_image img {
  width: 80;
  height: 80;
}
 

Scarica la versione originale del plugin AIB - Author Info Box utilizzato per mostrare le informazioni sull'autore.

Scarica il modulo FJ Related Articles Plus utilizzato per mostrare gli ultimi articoli dell'autore.


CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Garda Informatica
Alcune informazioni su di me:
Garda Informatica è una software house specializzata nello sviluppo di software personalizzato web. I software sviluppati comprendono estensioni a pacchetti open source come Joomla e Wordpress.


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.3 Stabile Italiana
Data di rilascio: 04 Luglio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: