Due mosse per posizionare ovunque un iframe in un sito Drupal 8 utilizzando jQuery

A volte si ha la necessità di posizionare in ogni articolo del proprio sito un blocco di contenuti, nel mio caso uno o più annunci pubblicitari, ma Drupal 8 e il suo nuovo sistema di tematizzazione non sono di molto aiuto. Quindi cercherò di descrivere il mio primo tentativo tramite jQuery e iframe per ovviare a questa problematica, nella speranza di ottenere qualche idea per migliorarlo o un altro metodo più efficiente, magari impiegando soltanto Twig.

Con Drupal 8 sono stati introdotti molti cambiamenti rispetto alla versione 7, persino nella creazione dei temi con twig, che sostituisce PHPTemplate come gestore dei temi predefinito. Questo implica che le funzioni theme_* e i file PHP *.tpl.php sono stati rimpiazzati dai template *.html.twig.[fn]Fonte: Theming differences between Drupal 6, 7 & 8[/fn]

Il principale beneficio del portare Twig in Drupal è stato la sicurezza, infatti esso separa la presentazione dalla logica delle attività. Quando si usa il PHP come sistema di tematizzazione si sta dando troppo potere allo strato della presentazione. Così diviene facile mescolare codice con layout e anche peggio: avere problemi di sicurezza nei temi personalizzati.[fn]Fonte: Drupal with Twig templates[/fn]

Da questo punto di vista, se si vuole creare o modificare il contenuto dei nodi del proprio template, in D8 è spesso necessario lavorare su due diversi strati o meglio file all'interno del proprio tema:

1. NOME_TEMA_IN_USO.theme (per definire nuove variabili che identificano blocchi o viste);
2. templates/node.html.twig (per riorganizzare il piazzamento dei campi e/o inserire le variabili del punto 1 che popolano la vostra pagina).

Questa tematica non è per niente facile da descrivere, perciò eviterò di entrare troppo nei dettagli... Tuttavia consiglio la lettura di Theming Drupal 8 per approfondire l'argomento.

Guarda l'immagine qui sopra, non dovrebbe essere difficile inserire in ogni nodo un elemento di vostro interesse dove più vi aggrada! Come per esempio un iframe sulla destra del primo paragrafo di ogni vostro articolo o un altro elemento al centro della pagina.

In Drupal 7, non ho avuto alcun problema, mi è bastato seguire e modificare quanto descritto in questo articolo: Add a block in the middle of a node Body field in Drupal 7, ma avrei anche potuto risolvere installando uno dei due seguenti moduli:

1. Advertisement;
2. Block Inject.

In D8? Al momento non ho trovato alcun modulo per semplificarmi la vita e ho quindi cercato di implementarlo con Twig, ma senza arrivare ad alcun risultato utile. Certo con Twig, so come cambiare l'ordine dei campi e come far apparire un blocco o una vista tra un campo e l'altro, ma niente più.

Come ottenerlo in D8: primo tentativo

Stanco di non poter piazzare le pubblicità dove volevo io con Twig, ho deciso di provare un'altra strada: una pagina HTML esterna con il codice da incorporare e un file JavaScript del proprio tema che si limita a caricarla tramite iframe e posizionarla con jQuery.

PRO

• facile da implementare, basta solo modificare il NOME_TEMA_IN_USO.libraries.yml e creare un file Javascript e un file HTML per l'elemento da incorporare;
• la versatilità di jQuery permette di modificare il DOM della pagina con estrema precisione ed efficacia.

CONTRO

• JavaScript rallenta il caricamento della pagina;
• inserire in un iframe i banner pubblicitari è sconsigliato e poco profittevole;
• risulta difficile escludere la visualizzazione di questi elementi in alcune pagine.

Guida passo passo

Riporto la procedura per riprodurre quanto schematizzato nell'immagine sopra o in parole povere come mettere una pubblicità Altervista (codice personalizzato e fornito dal mio host) sulla destra del primo paragrafo in ogni nodo del sito.

1. Nella cartella /themes/NOME_TEMA_IN_USO/js:
   • Si aggiunge un file nominato advert_right.html che contiene il codice Javascript del banner:

     <script type="text/javascript">
     /* <![CDATA[ */
     document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=300X250/?ref='+encodeURIComponent(location.hostname+location.pathname)+'&r='+new Date().getTime()+'"></s'+'cript>');
     /* ]]> */
     </script>
     

   • e un altro ad_middle.js con:

     (function($) {
     $(document).ready(function(){
     var count = $("#content p").length;
     var advertRight = `<div style="float: right;"><div class="sponsor">
     <iframe src="/themes/rainnic/js/advert_right.html" width="300" height="250" frameborder="0" scrolling="no"> </iframe></div></div>
     `;
     if (count > 4) {
         $(advertRight).insertBefore("p:eq(0)");
     });
     }(jQuery));

     Ho assegnato una variabile che contiene l' iframe e un po' di codice CSS per lo stile. Inoltre non desiderando che la pubblicità appaia in articoli più corti di 4 paragrafi ho creato una variabile con il conteggio dei paragrafi ("<p>" tag) e la relativa verifica.
   • Se si vuole inserire l'iframe al centro dell'articolo o nodo, basta cambiarlo in questo modo:

     (function($) {
     $(document).ready(function(){
     var count = $("#content p").length;
     var advertRight = `<div style="float: right;"><div class="sponsor">
     <iframe src="/themes/rainnic/js/advert_right.html" width="300" height="250" frameborder="0" scrolling="no"> </iframe></div></div>
     `;
     var inTheMiddle = Math.floor(count/2)-1;
     if (count > 4) {
         $(advertRight).insertBefore("p:eq("+ inTheMiddle +")");
     });
     }(jQuery));
     

2. Nel file /themes/NOME_TEMA_IN_USO/NOME_TEMA_IN_USO.libraries.yml si aggiunge il codice in grassetto:

   global-styling:
     version: VERSION
     js:
        js/ad_middle.js: {}
     dependencies:
       - core/jquery
       - core/drupal
     css:
       base:
       [...]
   

Ora conviene svuotare le cache di Drupal e verificare se il tutto funziona.

Spoiler: Secondo tentativo

Al momento sto testando una leggera modifica a quanto descritto sopra: blocchi con il codice JavaScript che poi muovo nel nodo usando jQuery, però continuo a sperare di trovare il modo di farlo soltanto con Twig, senza scomodare JS. Alla prossima!