Blogger. Gadget per post popolari orientati alle immagini

Qualche giorno fa, ho apportato alcune piccole modifiche a un blog di fotografia (Blogger), che includeva il gadget "Post popolari" nel footer di tutte le sue pagine . Presumo che chi utilizza questa piattaforma sappia già che elenca i post del blog più visitati, in un periodo di tempo specifico che è possibile determinare, mostrando il titolo di ciascuno di essi e, facoltativamente, una piccola miniatura e un riepilogo.
Tuttavia, per un sito che si basa principalmente sulle immagini, questo formato con miniature da 72px non era molto attraente, e ho pensato di dare maggiore risalto a quelle immagini utilizzando un paio di accorgimenti che avevamo già visto qui.
Dato che le immagini sono la chiave del successo, e le immagini valgono più delle parole, ecco uno screenshot di come è andata. Chi vuole vederlo dal vivo dovrà andare sul sito di Juan Carlos MarinIb e scorrere verso il basso.

E come puoi farlo da solo? Beh, innanzitutto, installando il gadget "normale" sul tuo blog. Se non ce l'hai, puoi aggiungerlo facilmente dall'opzione Design nella dashboard di Blogger.
Noi faremo il resto modificando il template, iniziando con l'aggiunta di tutto questo al tuo CSS (prima di ]]></b:skin> ):

/* Post popolari */
.PopularPosts ul {
text-align: center;
font-size: 0;
}
.PopularPosts li {
width: 25%;
display: inline-block;
vertical-align: top;
padding: 10px !important;
box-sizing: border-box;
font-size: 14px;
font-family: arial;
}
.PopularPosts li:hover {
background: #fff; /* Colore di sfondo quando si passa il mouse sull'immagine */
}
.PopularPosts .item-content,
.PopularPosts .item-thumbnail-only {
position: relative;
}
.PopularPosts a {
display: block;
box-sizing: border-box;
colour: white;
}
.PopularPosts .item-thumbnail {
float: none;
margin: 0;
line-height: 0;
}
.PopularPosts img {
width: 100%;
height: self;
margin: 0;
padding: 0;
}
.PopularPosts .item-snippet {
display: none;
}
.PopularPosts .item-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px;
box-sizing: border-box;
background: rgba(0,0,0,.6);
/* Facoltativo per visualizzare il titolo verticalmente */
transform: rotate(90deg);
transform-origin: 21px 21px;
}

Questo visualizzerà sostanzialmente i post in righe da quattro ( 25% ). Inoltre, posizionerà il titolo del post sopra l'immagine e nasconderà qualsiasi testo di riepilogo, man mano che cambiano i dettagli.
Ci sono alcune regole necessarie per sovrascrivere lo stile predefinito, ma quelle che si riferiscono ai colori, ad esempio, possono essere modificate a proprio piacimento. È anche possibile eliminare due dichiarazioni che ruotano il titolo del post di 90° in modo che appaia verticalmente. Sono commentate alla fine del CSS precedente.
Continuiamo a modificare il template e andiamo un po' più in basso, prima di </head> , dove aggiungeremo questo piccolo codice JavaScript con una funzione che raccoglie i dati per l'URL, il titolo del post, l'immagine e una misurazione in pixel. Grazie al caricamento di un'immagine e alla presenza di centinaia di immagini , questo codice convertirà le miniature da 72px che di solito vengono visualizzate in una più grande (e di qualità superiore). Vedremo come impostare questa larghezza più avanti.

<script type='text/javascript'>//<![CDATA[
function redimthumb(url,title,image,size){
var image=image;
var return ='<a href="'+url+'"><img src="'+image.replace('/s72-c/','/s'+size+'-c/')+'" title="Vedi post completo" alt="'+title+'"/></a>';
if(image!='') return return; else return '';
}
//]]></script>

Ho già fornito questo codice più di una volta, quindi se lo avete già, dovrete saltare questo passaggio. Chi ha bisogno di approfondirlo può semplicemente andare su Miniature per riassunti più ampi , dove è spiegato più dettagliatamente.
Proseguiamo senza uscire dal modello per individuare il gadget "Post popolari" e modificarlo. Per farlo, utilizziamo il motore di ricerca interno e inseriamo la parola chiave "post popolari" per trovarne l'inizio. Data la sua lunghezza, non ho copiato l'intero codice e ho incluso solo le righe necessarie per individuare dove apportare le modifiche.
Come potete vedere, ci sono due parti che includono un'immagine ( img ), motivo per cui dobbiamo ripetere la procedura più volte. Quello che ho fatto è stato includere una chiamata allo script precedente appena prima di esse, inviandogli i dati necessari tramite i tag dati .
Dal codice originale, l'immagine e il link che la circonda devono essere eliminati per evitare duplicati.
Detto questo brevemente, dobbiamo aggiungere ciò che è contrassegnato in verde ed eliminare ciò che è contrassegnato in rosso.

<b:widget id='PopularPosts1' locked='false' title='Post popolari' type='PopularPosts'>
<b:includable id='main'>
(...)

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<script type='text/javascript'>
document.write(redimthumb("<data:post.href/>","<data:post.title/>","<data:post.thumbnail/>",300));</script>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
(...)

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<script type='text/javascript'>
document.write(redimthumb("<data:post.href/>","<data:post.title/>","<data:post.thumbnail/>",300));</script>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
(...)
</b:includable>
</b:widget>

Quel 300 che vedi lì (due volte) fa sì che le miniature passino da 72px a 300px, quindi è questo che devi modificare se vuoi immagini più grandi o più piccole di quella dimensione.
Ora puoi salvare le modifiche e il gioco è fatto. Buon divertimento!

Agosto 2016
Blogger ha modificato il codice per il gadget "Post popolari", sfruttando il nuovo operatore resizeImage ( vedi dettagli ). Ora è molto più semplice modificare il codice che ho menzionato nel terzo passaggio di questo tutorial (il codice del gadget stesso).
Ecco il codice che appare quando si aggiunge il gadget:

<!-- (3) Mostra solo miniature o (4) Frammenti e miniature. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
  <b:if cond='data:post.featuredImage.isResizable o data:post.thumbnail'>
    <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
        <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72 , "1:1") : data:post.thumbnail' var='image'>
          <img alt='' border='0' expr:src='data:image'/>
        </b:con>
      </a>
    </div>
  </b:se>
  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
  <b:if cond='data:showSnippets'>
    <div class='item-snippet'><data:post.snippet/></div>
  </b:se>
</div>

Bene, l'unica cosa che dovresti cambiare sarebbe il numero da 72 a 300. Dovrai eseguire i primi
due passaggi, aggiungendo CSS e JavaScript, nello stesso modo.

fonte

Archivio Blogger

Cerca nel blog

Blogger. Gadget per post popolari orientati alle immagini

Commenti

Posta un commento