Pubblicato il 06/04/11 - aggiornato il  | 10 commenti :

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

avatar sotto titolo post   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

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



10 commenti :

  1. Molto interessante anche se nel mio blog sono l'unico a postare.... volevo invece chiederti se riuscivi a creare un codice html per gestire l'anteprima dell'immagine nella condivisione con facebook. Ultimamente quando si prova a condividere un post dal mio blog appaiono immagini senza connessione logica e prese a caso dal blog. Ho visto che su wordpress esiste il rimedio, è spiegato qui: http://www.bigthink.it/impostare-lanteprima-quando-condividiamo-un-post-su-facebook/

    Grazie mille ;)

    RispondiElimina
  2. @SE-Gen
    Hai fatto queste modifiche al template?
    http://www.ideepercomputeredinternet.com/2010/10/come-inserire-la-descrizione-del-blog.html
    Se sì e il problema rimane c'è poco da fare. Si potrebbe tentare di inserire una immagine fissa. Ci studierò sopra...

    RispondiElimina
  3. Grazie mille del post ^-^

    RispondiElimina
  4. Non ho capito una cosa: ma se mettiamo l'immagine al posto del "immagine 1" ecc,blogger come fa a distinguere i vari autori?

    RispondiElimina
  5. Grazie mille della soluzione adesso sembra impostare per prime le immagini che più si addicono al post ;) Se in futuro si potrà decidere da noi l'immagine sarà ancora meglio ma per ora va bene così :P

    RispondiElimina
  6. @Natalunia_7
    Al posto di utente1, utente2, utente3 inserisci i nomi di coloro che scrivono sul blog, mi raccomando di distinguere bene tra maiuscole e minuscole perché è "case sensitive".
    La funzione AutoreAvatar nel secondo codice acquisisce il nome dell'utente e inserisce le impostazioni del primo codice. Come vedi è presente in entrambi. Se non ti fidi controlla la demo dei due post :)

    RispondiElimina
  7. Articolo utilissimo come sempre...ma quanto mi dai da lavorare? Ho un sacco di modifiche da fare!!! Noi siamo in 3 a postare! :-)
    Grazie!

    RispondiElimina
  8. posso usarlo anche solo per me? Perché mi hanno appena commentato sul blog "bravissime"... ma sono io sola e vorrei farlo capire subito mettendolo sotto al post

    RispondiElimina
  9. @Soffio di DeaSì, non ci sono problemi. Puoi lasciare anche tre utenti immettendo solo il tuo nome oppure togliere le righe che non ti servono.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy