Ultimi video di un canale YouTube su Drupal 7

Può essere utile inserire in un'installazione Drupal 7, un blocco con la lista degli ultimi video inseriti in un canale YouTube, come fare? Semplice, si può utilizzare il nostro modulo YouTube Channel Block che abbiamo sviluppato per Drupal 7.

Per iniziare scarichiamo il modulo YouTube Channel Block e copiamo la directory estratta dentro "sites/all/modules".
Una volta abilitato il modulo la configurazione è estremamente semplice, basterà visitare la pagina "admin/config/ds_ytchannel/config" della propria installazione, è specificare il nome utente che appare nell'url YouTube del canale desiderato.
E' anche possibile indicare il numero massimo di video visualizzabili nel blocco.

Come già illustrato nella pagina dedicata a questo modulo per la personalizzazione grafica si andrà a lavorare con JavaScript.
Ci sono molti modi per includere uno script JS nella nostra installazione, in questo esempio includeremo il file con lo script direttamente dal file .info del nostro tema.

Se non è già presente creiamo una sotto directory "js/" nella directory del nostro tema.

Creiamo ora il nostro file "ds_ytChannel.js" all'interno della directory appena creata.

Apriamo il file .info del nostro con un editor di testo per aggiungere la seguente riga:

scripts[] = 'js/ds_ytChannel.js'

Apriamo ora il file ds_ytChannel.js per inserire il codice necessario alla personalizzazione del blocco.
Possiamo personalizzare il codice di ogni video che verrà visualizzato dichiarando la funzione "Drupal.theme.ytChannelRow", in questo modo

1. Drupal.theme.ytChannelRow = function(row) {
2. var $out = '<div class="ytc-wrapper">';
3. $out += '<div class="ytc-img">';
4. $out += '<a href="' + row.uri + '" target="_blank"><img src="' + row.thumb + '"/></a>';
5. $out += '</div>';
6. $out += '<div class="ytc-info">';
7. $out += '<h4><a href="' + row.uri + '" target="_blank">' + row.title + '</a></h4>';
8. $out += '<div class="ytc-author">' + Drupal.theme('ytChannelAuthor', row.submitted) + '</div>';
9. $out += '<div class="ytc-desc"><p>' + row.description + '</p></div>';
10. $out += '</div>';
11. $out += '</div>';
12.  
13. return $out;
14. };

E' facile intuire che questa funzione dovrà ritornare il codice HTML che vogliamo sia utilizzato per ogni video nel blocco, le proprietà dell'oggetto "row" conterranno i dati del video forniti da YouTube

• row.uri: URI per link al video
• row.thumb: URL alla thumbnail del video
• row.title: Titolo del video
• row.description: Descrizione del video
• row.submitted: Dati di pubblicazione del video, questo valore è personalizzabile tramite un'altra funzione che andremo a dichiarare dopo (Drupal.theme.prototype.ytChannelAuthor())

I dati di pubblicazione contengono il nome dell'autore, la data di pubblicazione e il numero di visualizzazioni, per permettere personalizzare la formattazione di questi dati andremo a dichiarare un'altra funzione nel nostro file javascript

1. Drupal.theme.ytChannelAuthor = function(submitted) {
2. var date = new Date(submitted.date);
3. var $out = 'di <a href="' + submitted.uri + '" target="_blank">' + submitted.name + '</a>';
4. $out += ' - <span class="yt-date">' + date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear() + '</span>';
5. if (submitted.hits > 0)
6. $out += '<span class="yt-hits">' + submitted.hits + ' hits</span>';
7.  
8. return $out;
9. };

Anche questa funzione dovrà ritornare l'HTML che ci occorre e anche qui avremo a disposizione alcune proprietà dell'oggetto "submitted" che sono:

• submitted.uri: Link all'autore del video
• submitted.name: Nome dell'autore del video
• submitted.date: Data di pubblicazione del video
• submitted.hits: Numero di visualizzazioni del video

Ora che abbiamo le nostre funzioni andiamo a completare il file JS con le closures convenzionali per gli script javascript in Drupal

1. (function($) {
2. Drupal.theme.ytChannelRow = function(row) {
3. var $out = '<div class="ytc-wrapper">';
4. $out += '<div class="ytc-img">';
5. $out += '<a href="' + row.uri + '" target="_blank"><img src="' + row.thumb + '"/></a>';
6. $out += '</div>';
7. $out += '<div class="ytc-info">';
8. $out += '<h4><a href="' + row.uri + '" target="_blank">' + row.title + '</a></h4>';
9. $out += '<div class="ytc-author">' + Drupal.theme('ytChannelAuthor', row.submitted) + '</div>';
10. $out += '<div class="ytc-desc"><p>' + row.description + '</p></div>';
11. $out += '</div>';
12. $out += '</div>';
13.  
14. return $out;
15. };
16.  
17. Drupal.theme.ytChannelAuthor = function(submitted) {
18. var date = new Date(submitted.date);
19. var $out = 'di <a href="' + submitted.uri + '" target="_blank">' + submitted.name + '</a>';
20. $out += ' - <span class="yt-date">' + date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear() + '</span>';
21. if (submitted.hits > 0)
22. $out += '<span class="yt-hits">' + submitted.hits + ' hits</span>';
23.  
24. return $out;
25. };
26. })(jQuery);

Svuotiamo la cache e il blocco con i video avrà il nostro look personalizzato!

Ti ricordiamo che Digisin si occupa di sviluppo moduli Drupal. Non esitare a contattarci!