Impostiamo il template di GoHugo per includere automaticamente le immagini dal Cloudinary.

Immaginiamo di dover caricare un’immagine da pubblicare sul nostro sito. Come ben sappiamo, dovremo caricare l’immagine in molteplici dimensioni per supportare vari dispositivi e rendere il caricamento della pagina web il piĂą rapido possibile. Magari abbiamo bisogno di una thumb e di una versione con dimensioni maggiori nel post.

Esiste un sito che esegue questo lavoro automaticamente: Cloudinary

Cloudinary

Nella creazione di un post da pubblicare in un blog bisogna gestire molte dimensioni delle immagini: nella homepage ci potrebbe essere una miniatura dell’immagine mentre nel post abbiamo bisogno che si ridimensioni in base al dispositivo usato (uno smartphone necessita di un’immagine di dimensioni inferiori rispetto a un desktop).

Cloudinary ci viene incontro e svolge molto del lavoro necessario per avere un sito responsive.

Caricamento

Ci si logga sul sito e si carica l’immagine che possiamo averla in locale o in remoto copiando l’url originale.

Una volta caricata, si passa il puntatore del mouse sulla foto e si copia il link diretto per poi incollarlo nel post.

Caricamento immagine su cloudinary

Caricamento immagine su cloudinary

In questo esempio, come si può vedere nell’angolo inferiore destro della miniatura, la dimensione dell’immagine è di 4000x2520 pixel. Normalmente utilizzo quella grafica nei posts di questo sito ma la dimensioni originale è veramente eccessiva. Nei computer desktop 1024 pixel bastano e avanzano, quindi caricare l’immagine originale è uno spreco di tempo e di banda internet.

Per questo motivo utilizzo il metodo di modifica automatico attraverso un script javascript.

Resize Automatico

Non è complicato aggiungere il supporto per il ridimensionamento delle immagini con Cloudinary in un sito basato su Hugo.

Modifica Template

Sono pochi i passi da eseguire per automatizzare il lavoro:

  1. Scaricare questo script;
  2. Inserirlo nella cartella assets/js (la cartella di destinazione potrebbe risultare differente da quella che uso io);
  3. Creare il file partials/site-cloudinary.html per modificare il template che usa Hugo e inserire questo codice:
{{ $cloudinary := resources.Get "js/cloudinary-core-shrinkwrap.js" }}
{{/* $vars := resources.Get "other scripts" */}}
{{ $js := slice $cloudinary | resources.Concat "js/main.js" | minify |  fingerprint}}
<script type="text/javascript" src="{{ $js.Permalink }}"></script>

<script type="text/javascript">
    var cl = cloudinary.Cloudinary.new({ cloud_name: "IL_TUO_ACCOUNT" });
    cl.responsive();
</script>
  1. Includere il nuovo file appena creato nel template nella sezione body:
{{- partial "site-cloudinary.html" . -}}

Inserimento URL Immagine da Cloudinary

Ora che abbiamo modificato il template con il codice necessario, possiamo copiare il link che Cloudinary ha creato per noi e incollarlo nel post.

Prima della modifica se incollavamo il link dell’immagine ottenevamo il seguente codice html:

<img 
    src="https://res.cloudinary.com/nome_account/image/upload/v82486471/indirizzo/immagine.jpg"
>

Mentre ora lo script che abbiamo inserito in automatico modificherĂ  il link nel seguente modo:

<img 
    data-src="https://res.cloudinary.com/nome_account/image/upload/w_auto,c_scale/v82486471/indirizzo/immagine.jpg" 
    class="cld-responsive"
>

Sono ben chiare 3 differenze:

  • src viene modificato in data-src;
  • Vengono aggiunti c_scale w_auto nel mezzo del link;
  • Viene aggiunta la classe cld-responsive

Risultato finale

Il risultato è quello che speravamo fin dall’inizio: Cloudinary attraverso lo script inserito capirĂ  che tipologia di dispositivo stiamo usando e che dimensione dell’immagine abbiamo bisogno, inviandoci la versione perfetta adattata alla nostra esigenza.

Cloudinary provides an automatic JavaScript solution for handling dynamic generation of images that match the required dimensions according to the exact image width available and the DPR (Device Pixel Ratio) of every device. Cloudinary’s JavaScript library includes a method that dynamically builds the dynamic image URLs and works as follows:

A Cloudinary dynamic manipulation URL is automatically built on-the-fly to deliver an image that is scaled to the exact available width and resolution. If the browser window is consequently enlarged then new higher resolution images are automatically delivered, while using breakpoint steps (every 100px by default) to prevent loading too many images.
If the browser window is scaled down, browser-side scaling is used instead of delivering a new image.

This feature allows you to upload one high resolution image to Cloudinary, and have it automatically adapted to the resolution and size appropriate to each user’s device or browser on-the-fly.