Pubblicato il 27/01/12e aggiornato il

Come inserire la miniatura del post prima del titolo in Blogger.

Recentemente ho pubblicato un articolo sui tag di Blogger illustrando il significato di quelli che sono i più importanti. Si tratta di variabili che iniziano tutte con data:, che hanno senso solo se inserite nel modello di Blogger e che mostrano dei contenuti in modo dinamico così come avviene per linguaggi di programmazione più evoluti. In questo post utilizzeremo il tag

data:post.thumbnailUrl

che determina in modo univoco la miniatura della prima immagine presente nell'articolo e che non avevo inserito nell'elenco appena citato. Questa immagine processata dai server di Blogger ci viene inviata con le dimensioni di 72x72 pixel. Volendo si possono modificare mantenendo però l'uguaglianza tra larghezza e altezza pena la distorsione della foto. L'obiettivo di questo articolo è quello di visualizzare insieme al titolo di ciascun post, la miniatura della prima foto pubblicata nello stesso. Se non ci sono immagini si vedrà un quadrato bianco. Per dare l'idea ecco come si visualizzeranno i post nella Homepage

miniatura-prima-del-titolo-post

Da notare che la miniatura sarà visualizzata anche se l'immagine si trova sotto all'intervallo del Continua a leggere. Andate su Modello > Backup/Ripristino e salvate il modello completo. Tornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate con F3 o Ctrl+F la riga

<h3 class='post-title entry-title'>

e subito sotto incollate quest'altro codice

<img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>

che può naturalmente essere personalizzato. Ricordo brevemente i parametri che possono essere modificati:

  1. Il bordo ha un suo spessore (1px), un suo aspetto (solid) e un suo colore (#003366) che possono essere modificati consultando il post sullo stile dei bordi. Tale attributo può anche essere tolto se vogliamo visualizzare la sola miniatura
  2. Lo sfondo del quadrato non sarà visibile (none) ma può essere inserito un colore (vedi i codici dei colori)
  3. La distanza interna tra miniatura e quadrato (padding) è stata impostata su 2 pixel
  4. I quattro numeri di margine (2px 10px 4px 2px;) sono rispettivamente le distanze del quadrato dalla parte alta, dalla parte destra, dalla parte bassa e dalla parte sinistra del layout. Si parte cioè dall'alto e poi si procede in direzione oraria. Determinano le distanze del quadrato nelle quattro direzioni.
  5. 72 pixel è la dimensione dell'altezza e della larghezza della miniatura
  6. Se si vuole visualizzare l'immagine sulla destra invece che sulla sinistra basta sostituire float:left; con float:right;

Si salva il modello e si vedono le modifiche apportate. In questi casi è opportuno prima dare uno sguardo all'Anteprima.





34 commenti :

  1. praticamente con questa modifica è possibile inserire la miniatura atutomaticamente nella home del blog? o sbaglio?

    RispondiElimina
  2. @michelelan
    E' esattamente così. Non mi ricordo nel test che ho fatto e di cui puoi vedere gli screenshot se tale miniatura rimane anche nei post. Se non si vuole nei post si possono sempre inserire dei tag condizionali.

    RispondiElimina
  3. cia ho notato che la miniatura si visualizza anche sulle pagine statiche, come faccio a toglierla dalle pagine statiche?

    RispondiElimina
    Risposte
    1. @Manager
      Prova a incollare al posto di questo codice

      <img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>


      quest'altro

      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>
      </b:if>

      Elimina
    2. Grazie ho sostituito il codice con la variante che mi hai consigliato ed ha funzionato, grz ancora

      Elimina
  4. Scusa sai anche come levare il modulo dei commenti dalle pagine statiche?

    RispondiElimina
    Risposte
    1. @Manager
      Vai sulla Bacheca quindi su Pagine e clicchi su Modifica su una pagina a cui vuoi togliere il modulo dei commenti. Nell'Editor che si apre vai sulla destra su Opzioni > Commenti dei lettori e metti la spunta a Non consentire nascondi quelli esistenti. Vai poi su Completato e Aggiorna

      Elimina
  5. ciao ernesto come mai da qualche settimana non si visualizza più la miniatura nel titolo del post? saranno stati gli aggiornamenti dei vari browser? puoi dare un occhiata? Grazie mille ti seguo sempre http://angelipersi.blogspot.it/

    RispondiElimina
    Risposte
    1. @sole
      Ho appena controllato e il sistema funziona per tutti i post che abbiano una immagine al loro interno. Forse hai modificato il sistema di postare o forse non vengono rilevate le immagini che sono dopo il Read More.

      Elimina
  6. ciao ho bisogno di aiuto io uso questo codice e mi sono accorto che prende la prima immagine di ogni post per creare la miniatura. io vorrei che l'immagine che prenda di riferimento sia la seconda. come potrei fare? c'è un modo?

    RispondiElimina
  7. Come posso impostare un'immagine da mostrare qualora non ci fosse nessuna immagine nell'articolo e quindi nessuna miniatura?

    RispondiElimina
    Risposte
    1. Dipende se in Google, in Facebook o su Twitter. Ci sono gli Open Graph di FB
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      metti l'immagine al posto di
      https://lh4.googleusercontent.com/-0L2P_yUFj3Q/T-lsE2iPfYI/AAAAAAAAY0I/RanQBNOCSig/s160/logo-ipcei.jpg
      poi ci sono i tag di Google
      http://www.ideepercomputeredinternet.com/2012/03/le-preferenze-di-ricerca-di-blogger.html
      e quelli di Twitter
      http://www.ideepercomputeredinternet.com/2013/06/twitter-cards.html
      @#

      Elimina
    2. No, non intendevo sui social, ma la miniatura accanto all'articolo. Se nell'articolo non c'è nessuna immagine, il quadratino della miniatura resterà vuoto. Se io invece voglio impostare un'immagine da mostrare quando non c'è la miniatura?

      Elimina
    3. Accanto al titolo del post? Puoi usare questo articolo ma la miniatura la devi mettere tra due tag condizionali in modo che si mostri solo se non c'è immagine nel post. Prova con questo
      <b:if cond='data:blog.postImageThumbnailUrl'>
      <h3 class='post-title entry-title'>
      <b:else/>
      <h3 class='post-title entry-title'>
      <img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>
      </b:if>
      Non ho testato!!! Salva il modello e non so se funzionerà
      @#

      Elimina
    4. Forse è meglio che provi con questo codice
      <b:if cond='data:blog.postImageThumbnailUrl'>
      <h3 class='post-title entry-title'>
      <img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>
      <b:else/>
      <h3 class='post-title entry-title'>
      </b:if>

      Elimina
    5. Ok, adesso provo. Ma dove lo devo mettere l'URL dell'immagine nel caso non ci sia la miniatura?

      Elimina
    6. Prova in questo modo

      <b:if cond='data:blog.postImageThumbnailUrl'>
      <h3 class='post-title entry-title'>
      <img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>
      <b:else/>
      <h3 class='post-title entry-title'><img src='URL_ICONA DI DEFAULT'/>
      </b:if>

      @#

      Elimina
    7. naturalmente prima di mettere questo codice devo togliere il < h3 class='post-title entry-title' > giusto?!

      Elimina
    8. con quel codice mi mostra SEMPRE l'immagine di default, anche se è disponibile una miniatura.

      Elimina
    9. Purtroppo non c'è la negazione della condizione
      b:if cond='data:blog.postImageThumbnailUrl
      però non capisco perché non funzioni :(
      @#

      Elimina
  8. L'idea di mettere una miniatura mi piace tantissimo! Ma scusami,per espandere i widget devo cliccare su "vai ai widget" , poi su "blog1" e infine digitare ctrl+f ?
    Ti chiedo scusa, sono davvero digiuna in materia, ma, allo stesso tampo la voglia di migliorare il blog è tanta!

    RispondiElimina
  9. Ho trovato la riga sotto la quale incollare il codice. Accanto ad essa però c'è scritto anche: itemprop='name'>
    Lo devo ignorare?
    Inoltre sotto, dove dovrei incollare il codice, il campo è occupato da altri codici....

    RispondiElimina
    Risposte
    1. Questo post è vecchio di quasi 2 anni e mezzo. Per sapere come funziona il nuovo editor leggi questi post
      http://www.ideepercomputeredinternet.com/2013/04/new-blogger-template-editor.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      Per quello che riguarda questo post da allora hanno aggiunto nuovi tag ma la riga inizia con un < e finisce con un > .
      Subito sotto significa mettere il cursore alla fine della riga e cliccare su Invio per creare uno spazio. Nello spazio va inserito il codice come illustrato nel post
      @#

      Elimina
    2. Approfondirò i link che mi hai segnalato. Grazie Ernesto!

      Elimina
  10. Ho letto il post e visto il video su come cercare una data riga di codici html, ma purtroppo, pur seguendo la procedura, non mi si visualizza nessuna riga che inizia con <h3 ecc. ecc.
    Non riesco a capire perchè!

    RispondiElimina
  11. Ernesto ce l'ho fatta!!! Ci tenevo tanto e malgrado la mia incompetenza, con il tuo aiuto sono riuscita in quella che per me era una vera impresa.
    Grazie!

    RispondiElimina
  12. Ciao Ernesto, io sarei interessato ad un altro tipo di miniatura. Mi secca caricare l'anteprima dell'immagine ogni santissima volta sotto al video che metto nell'articolo, perché mi occorre visualizzarla quando pubblico un link di Facebook, vorrei capire se è possibile farlo in automatico (rilevando magari direttamente l'anteprima youtube, oppure un'immagine a mia scelta, ma senza visualizzarla nel post in modo anti-estetico e confusionario per l'utente quando deve cliccare il vero video). So che in wordpress questa procedura è automatica per i video di youtube (però lì se cliccato da facebook, parte direttamente il video, cosa che io NON VOGLIO) e vorrei qualcosa di simile anche per blogger.

    Grazie mille della disponibilità e dell'eventuale risposta ! :)

    RispondiElimina
  13. Non c'è nulla di funzionante in modo affidabile per Blogger. Seguimi i prossimi giorni, può darsi che mi venga qualche idea (senza impegno)
    @#

    RispondiElimina
    Risposte
    1. Attendo con ansia una eventuale soluzione, se ci riesci, sei praticamente un genio! Grazie !

      Elimina
  14. Salve Ernesto, la miniatura l'ho inserita da tempo, solo che ora vorrei cambiare il colore del bordo. Ma pur inserendo la riga da trovare nella casella che si apre dopo aver digitato ctrl+f, non risco a trovarla...

    RispondiElimina
    Risposte
    1. In questi casi cerca semplicemente il bordo
      1px solid #003366;
      se ti ricordi il colore che avevi messo
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.