Continuando la risistemazione del blog di Tra Musica e Parole mi sono imbattuto in altro problema: come faccio a inserire una playlist Spotify in un blog creato con Jekyll e Markdown?
Cercando su Github ho trovato la soluzione proposta da Andrian Nur Prabawa un paio d’anni fa.
Spotify Playlist
Per prima cosa si crea il file spotifyplaylist.html nella cartella _includes contenente questo codice:
<div class="embed-spotify">
<iframe src="https://open.spotify.com/embed/playlist/{{ include.id }}"
width="700"
height="480"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen>
</iframe>
</div>
Poi in un file CSS vanno inseriti questi stili:
.embed-spotify {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-spotify iframe, .embed-spotify object, .embed-spotify embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Quindi nel Front Matter
title: Titolo del Post
spotifyplaylist: id della playlist
Dove per id si intende la parte finale dell’url della playlist. Per esempio, se la playlist si trova all’indirizzo
https://open.spotify.com/playlist/5Ac7O2ePo0GnsfVP2a6obo
allora l’ID della playlist è
5Ac7O2ePo0GnsfVP2a6obo
Per inserire la playlist nella pagina è sufficiente scrivere:
{% include spotifyplaylist.html id=page.spotifyplaylist %}
per ottenere questo:
