Un formato verticale e adattabile (RWD) per i post correlati

Sono passati molti anni da quando ho pubblicato il primo post che spiegava come generare post correlati , e allora nessuno avrebbe potuto prevedere l'importanza che i dispositivi mobili avrebbero avuto nell'accesso a internet. Beh, qualche guru lo direbbe, ma di certo nemmeno lui immaginava la portata di tutto ciò.
Quindi, sia quel gadget, sia un altro che ho pubblicato poco dopo con le miniature , non tenevano conto del fatto che a un certo punto sarebbe stato necessario che il loro design fosse responsive.
Ma risolverò subito questo problema fornendo HTML, JavaScript e CSS completo per un gadget che puoi anche configurare facilmente. Per fare questo, ho aggiunto alcune cose al JavaScript per generare classi extra per controllare tutto. E per cambiare un po' il solito, il CSS farà apparire i riepiloghi uno sopra l'altro, inizialmente in righe di due.

Inoltre, le miniature da visualizzare possono avere qualsiasi proporzione si desideri e per evitare che si deformino con un semplice ridimensionamento, quello che faremo sarà ritagliarle dalla zona centrale , utilizzando un sistema che abbiamo già visto in una precedente occasione.

Ci saranno solo due modifiche al template.
Per prima cosa, individuiamo l' elemento di chiusura </head> . Subito prima di tale elemento di chiusura, inseriamo lo stile di cui abbiamo bisogno affinché il gadget abbia l'aspetto desiderato, e poi il codice JavaScript che gestirà la selezione dei post correlati, estraendone il titolo e una miniatura.
Questo è tutto ciò che segue, e ho commentato alcuni aspetti nel CSS in modo che possiate modificare le dimensioni delle miniature. I colori sono a vostra discrezione.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
margin-top: 20px;
padding: 10px;
background: #ccc;
font-size: 0;
line-height: 0;
font-family: arial;
}
#related-posts h4 {
font-size: 20px;
line-height: 20px;
padding: 0px 20px;
}
#related-posts a {
display: inline-block;
width: 48%; /* Due post per riga. Usa il 31,33% per tre */
height: 140px; /* Altezza di ogni blocco (1) */
overflow: hidden;
margin: 0 1%;
padding: 10px;
box-sizing: border-box;
background: #fff;
border-bottom: 10px solid #ccc;
text-decoration: none;
color: black;
}
#related-posts a:before {
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
#related-posts a:hover {
background: #eee;
text-decoration: none;
}
#related-posts .crop {
position: relative;
width: 180px; /* Thumbnail width (2) */
height: 110px; /* Thumbnail height = Value of (1)-30px */
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
#related-posts .crop img {
position: absolute;
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
width: 100%;
altezza: self;
margine: self;
imbottitura: 0;
}
#related-posts .title {
width: calc(100% - 180px); /* Sottrai lo stesso valore indicato in (2) */
padding: 0 20px;
font-size: 16px;
line-height: 16px;
box-sizing: border-box;
}
#related-posts .title,
#related-posts .crop {
display: inline-block;
vertical-align: middle;
}
/* Da qui lo stile per schermi più piccoli */
/* Regola i valori 800px e 400px in base al design specifico */
@media (max-width: 800px) {
#related-posts a {
width: 100%;
margin: 0;
}
}
@media (max-width: 400px) {
#related-posts a {
height: auto;
}
#related-posts .crop {
width: 100%;
height: 0;
padding-bottom: 50%;
}
#related-posts .title {
width: 100%;
height: self;
padding: 10px 0 0;
text-align: center;
}
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
prova
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
cattura (errore){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,cb-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
Thumburl[correlatiTitlesNum]=d;} else Thumburl[correlatiTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPyvXf5TL9O3V0ZkrJibdRXDQs4sTuvWtKQ W_-tM-1Upktj__AJqxk-1zCicrUCrWAOtPKc1_HWH6TKtMOkxf4UDS3WIL7krKRzVILFPqzyZys0amUxqECkICEGNvutLQnb7UArTYYx0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>150) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 150)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h4>'+relatedpoststitle+'</h4>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a href="' + relatedUrls[r] + '"><div class="crop"><img src="'+thumburl[r].replace('/s72-c/','/s300/')+'"/></div><div class="title">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
}
//]]>
</script>
</b:if>

L'approccio più ortodosso sarebbe quello di includere la sezione stile nella sezione CSS del template, ma dato che siamo a metà vacanza, non vi farò ripetere troppo. Come ho detto, tutto è al suo posto; si tratta di copiare e incollare in un unico posto. Inoltre, se mai vi stancaste di questo gadget, potrete individuarlo facilmente ed eliminare tutto completamente molto più velocemente.
Notate che il codice è all'interno di una condizione, quindi viene eseguito solo sui post, poiché ritengo che sia il modo ottimale per utilizzare i post correlati. Sulla home page o sulle pagine, non ha molto senso offrire link correlati a un articolo, e inoltre alleggerisce il carico sulla home page e sulle pagine di navigazione. Per lo stesso motivo, anche il codice seguente è condizionale.
Il secondo passaggio consiste nell'impostare un ciclo che esegua i tag di ogni post e da lì richiami l'utilità JavaScript creata sopra. Questa parte deve essere inserita nel punto in cui si desidera visualizzare i post correlati. Normalmente, si troverebbe nell'area post -footer .

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Altre foto da guardare";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='clear:both'/>
</b:if>

Bene, questo è tutto, non resta che salvare le modifiche e vedere come funziona in un post qualsiasi.
E poiché la demo non esiste finché non c'è una demo, ecco una simulazione per vedere i tre formati che il gadget adotta man mano che la finestra si riduce.