Inserire una immagine (avatar) per ogni autore del blog sotto il titolo del post.

Questo articolo è sotto certi aspetti su ordinazione nel senso che mi è stata esplicitamente richiesta questa personalizzazione da Natalia in questo commento. Prendo spesso spunto da delle domande dei lettori per scrivere dei post ma questo solo se ritengo si tratti di argomenti che possano interessare anche altri, se la cosa è fattibile e non eccessivamente impegnativa e se ho le conoscenze necessarie per venire a capo del problema che mi è stato posto. Ma veniamo al nocciolo della questione. In un blog con più autori c'è la necessità di individuare in modo immediato colui che ha scritto un determinato post. Ho già avuto modo di illustrare come fare a inserire firme diversificate alla fine dell'articolo, adesso mi occuperò di come visualizzare una immagine identificativa che può essere l'avatar dell'autore. Questa immagine viene inserita automaticamente e può essere posizionata in vari punti del layout del blog su Blogger.

In questo caso non ci si può limitare al semplice linguaggio HTML come fatto con le firme utilizzando i tag condizionali, ma bisogna inserire del javascript, peraltro molto semplice. Andiamo come al solito su Design > Modifica HTML e salviamo il modello completo. Dopo aver messo la flag a espandi modelli widget, cerchiamo la solita riga </head> che individua la fine della prima parte del template. Subito sopra incolliamo questo codice

<!-- IMMAGINI PER AUTORE INIZIO -->
<script type='text/javascript'>
function AutoreAvatar(utente) {
immagine = new Array()
immagine[0] = ""
immagine[1] = "<img border='0' src='URL avatar utente1'/>"
immagine[2] = "<img border='0' src='URL avatar utente2'/>"
immagine[3] = "<img border='0' src='URL avatar utente3'/>"
if (utente == "utente1")
{document.write(immagine[1]);}
if (utente == "utente2")
{document.write(immagine[2]);}
if (utente == "utente3")
{document.write(immagine[3]);}
}
</script>
<!-- IMMAGINI PER AUTORE FINE - http://www.ideepercomputeredinternet.com -->

Al posto di URL avatar utenteX si inserisce l'hotlink della immagine che si è caricata su un hosting quale Picasa o SkyDRive. Dobbiamo anche digitare i nickname degli autori del blog da sostituire a utente1, utente2 e utente3. E' importante distinguere tra maiuscole e minuscole perché si tratta di una espressione case sensitive.  Si deve scegliere la posizione migliore in cui visualizzare l'avatar. Il codice da inserire è questo

<script type='text/javascript'>
AutoreAvatar(&quot;<data:post.author/>&quot;);
</script><span class='fn'> <data:top.authorLabel/> <data:post.author/></span>

Dove ci sono da fare alcune considerazioni:

1. La parte colorata di viola riprende il javascript precedente e inserisce l'avatar dell'autore del post.
2. <data:top.authorLabel/> è l'espressione che abbiamo scelto di visualizzare prima del nome dell'autore. Per default è "Pubblicato da" ma si può modificare andando su Design > Elementi pagina > Post sul blog > Modifica e digitandone un'altra come illustrato in Configura post.
3. <data:post.author/> è il nome dell'autore del post.

Con questo ordine si visualizza una cosa di questo genere

   dove sono stati evidenziati i tre elementi che possono anche essere inseriti in modo diverso. Per esempio l'avatar può essere messo alla fine. Questo codice va inserito nella posizione del template che si preferisce. Indico alcune zone tra le più adatte:

1. Subito sotto la linea <div class='post-header-line-1'> per visualizzare i tre elementi sotto il titolo del post (vedi screenshot)
2. Subito sotto la riga <div class='post-body entry-content'> per visualizzare l'avatar prima dell'inizio del post
3. Subito sopra la riga  <data:post.body/> per visualizzare l'avatar in linea con il contenuto del post

Se si vuole visualizzare alla fine del post accanto al classico Pubblicato da "autore del post", dobbiamo inserire il codice colorato di viola all'interno di questo blocco di codice

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>

ricordandoci che cosa indicano rispettivamente <data:top.authorLabel/> e <data:post.author/>. Finalmente si salva il modello.

Osservazioni conclusive

Si possono inserire anche più di tre autori semplicemente inserendo altre righe nel primo codice con la stessa sintassi. Se si vuole visualizzare gli avatar sulla destra o inserire dei margini perché nel nostro modello l'immagine non viene visualizzata in modo appropriato possiamo modificare le righe del codice in questo modo

immagine[1] = "<img style='float:left;margin:10px 10px 0px 0px;" border='0' src='URL avatar utente 1'/>"

dove può essere inserito right al posto di left e ovviamente possono essere calibrati i vari margini. Ricordo che il primo numero rappresenta la distanza dalla parte alta, i numeri successivi indicano la distanza da tutte le altre tre direzioni in senso orario.

Ho testato questo hack nel blog Menù Orizzontale. Ho inserito due diverse icone per due diversi autori

1. Post primo autore -
2. Post secondo autore -  

Il codice in questo caso è stato inserito sotto la linea <div class='post-header-line-1'>.