Creare un template personalizzato per Insert

Caricare un file od un'immagine su di un nodo ed inserirlo con un semplice click del mouse all'interno di un'area di testo con tanto di markup HTML personalizzato.

˅
Tempo stimato di lettura
2 m 20 sec

Insert è un comodo modulo che può semplificare la vita agli editor di contenuti di un sito Drupal. Il modulo aggiunge un pulsante accanto ad un campo file o ad un campo immagine, che consente di inserire in un'area di testo della form di inserimento del nodo, del markup HTML contenente un riferimento allo specifico file. Potrebbe essere un semplice link al file, un tag nel caso di immagini (è incluso anche il supporto ai vari stili immagine) od anche del markup personalizzato.

In rete trovate alcune guide e video che mostrano il funzionamento del modulo, quindi non mi soffermerò oltre sulla cosa.

Quello di cui invece voglio raccontarvi è di una funzionalità molto comoda ma che forse non tutti conoscono, ovvero il fatto che ciascuna modalità di inserimento corrisponde ad uno specifico template, e che i template che possono essere facilmente personalizzati (per chi non lo sapesse, un template non è altro che un file PHP responsabile del markup HTML che si ottiene al click sul pulsante "Insert" nell'immagine di cui sopra). Il modulo dispone di un certo numero di template predefiniti (ce n'è uno anche per il bottoncino di inserimento):

(Nota: questo articolo è basato sulla versione 7.x-1.3 del modulo Insert). Per personalizzare un template non dobbiamo modificare il codice originale del modulo (guai a voi! ;) ), ma è sufficiente copiare il dato template nella cartella del tema che stiamo utilizzando per effettuare l'editing del nostro contento. Attenzione quindi che per poter fare correttamente l'override dei template di Insert, dobbiamo copiarlo nella cartella del tema che stiamo utilizzando per l'editing del nodo. Quindi se stiamo utilizzando il tema di amministrazione per l'editing dei nodi, conviene creare un subtheme del tema di admin (operazione semplicissima) e copiare i file di template da modificare in questo tema. Ad esempio, se stiamo usando Seven come tema di admin, creiamo in "sites/all/themes" una nuova cartella che chiamiamo "myseven". Dentro creiamo il file myseven.info con il seguente contenuto:

``` name = My seven backend theme description = A sub-theme of Seven Theme, used to customize the Insert module templates. core = 7.x engine = phptemplate

base theme = seven

; Call style sheets. ;stylesheets[all][] = css/myseven.css

; Define theme JS libraries. ;scripts[] = js/myseven.js

```

Nel file info ho aggiunto anche due righe per integrare un eventuale file CSS ed un eventuale file JS che potrebbero tornarci utili nel caso volessimo customizzare il tema. I due file al momento non vengono caricati, le righe sono commentate, se volete integrarli nel vostro tema, ricordatevi di togliere il ; davanti rispettivamente a stylesheets[all][] per il CSS e scripts[] per il JS).

Il secondo file da aggiungere è il file template.php con il seguente contenuto (ovvero vuoto, c'è solo un commento):

A questo punto **puliamo la cache di Drupal** ed andiamo a **settare come tema di amministrazione il nuovo subtheme "MySeven backend theme" appena creato**. Ricordiamoci di fare questa operazione, altrimenti quanto illustrato di seguito non funzionerà. Tornando al modulo Insert, se vogliamo ad esempio personalizzare il template utilizzato per l'inserimento di un'immagine caricata utilizzando il modulo file (quindi non tramite il modulo Image, ma come file allegato) prendiamo il file **`insert-image.tpl.php`** e copiamolo nella cartella del tema MySeven, ed andiamo quindi a personalizzarne il contenuto come mostrato nell'esempio sottostante:

Tutti i file di template sono ben commentati, quindi dovreste avere tutto quello che vi serve per lavorare. Inoltre, per ogni template, trattandosi di una funzione di theming, sono disponibili anche i relativi preprocess e process, quindi volendo è possibile aggiungere anche altre variabili oltre a quelle già disponibili (poi vedremo un esempio). La cosa interessante del modulo è che è possibile utilizzare una specifica modalità di inserimento per ciascun stile immagine (*admin/config/media/image-styles*). Ad esempio, se creo lo stile immagine "**blog_post_inline_image**", posso configurare questo stile immagine tra quelli disponibili nel menu a tendina di Insert:

Fatto questo, posso configurare il template specifico per questo stile immagine utilizzando una convenzione sul nome del file che trovate spiegata anche nel file `readme.txt` del modulo: > Insert can be configured to work with non-HTML filters like BBCode or Markdown. > To do this, copy the template file you would like to change from the "templates" > directory to your active theme's directory. Then empty your Drupal caches at > admin/config/development/performance. >  > The Image templates may also be used per Image style. You can copy the > image-insert-image.tpl.php file to your theme directory and then rename it to > image-insert-image--[style-name].tpl.php, where [style-name] is the name of the > Image style. Change underscores to hyphens in the style name. Quindi per avere un template specifico per lo stile immagine *blog_post_inline_image*, copio il template `image-insert-image.tpl.php` dalla cartella template del modulo alla cartella del tema, e lo rinomino come di seguito: `image-insert-image--blog-post-inline-image.tpl.php` Fatto questo, posso modificarne il contenuto secondo le mie esigenze, ad esempio, per avere l'effetto lightbox che abbiamo utilizzato su alcune delle immagini di questo blog, abbiamo utilizzato il seguente codice (con l'aggiunta di un po' di JS e CSS): ```

" height="" alt="__alt__" title="__title__" class="image-" /> <span class="zoom"><i class="icon-16 icon-white-shadowed icon-search"></i></span> </a> </p>

La variabile $original_url che contiene l'URL dell'immagine originale, l'abbiamo aggiunta nel preprocess della funzione di theming image_insert_image. Per far questo, abbiamo editato il file template.php ed aggiunto le seguenti righe di codice:

``` <?php

/** * Theme the content that will be inserted for Image styles. */ function myseven_preprocess_image_insert_image(&$vars) { $vars['original_url'] = file_create_url($vars['item']['uri']); }

```

Questa la struttura dei file mostrata in Netbeans:

Dopo aver pulito la cache (ricordatevi sempre di svuotare la cache, quantomeno il theme registry, quando aggiungete dei nuovi file di template od un nuovo process/preprocess altrimenti Drupal li ignorerà), potremmo utilizzare il nostro insert personalizzato.

Come abbiamo appena visto, non è troppo complicato configurare il modulo Insert in modo da utilizzare un template personalizzato. La condizione necessaria è ricordarsi che i file di template vanno inseriti nel tema che stiamo utilizzando per l'interfaccia di inserimento / modifica del contenuto, non nel tema di frontend del nostro progetto (a meno che i due temi non coincidano). Con un semplicissimo subtheme la cosa si risolve rapidamente.

E voi? Avete qualche esperienza con Insert che volete raccontarci? Oppure qualche osservazione o qualcosa da aggiungere?

A presto con un nuovo post!

Gli ultimi post di Andrea Panisson

Restiamo in contatto

Enter your email address below to receive all our latest articles and announcements via email.