webdesign jekyll plugin ruby

Plugin di Jekyll per ridimensionare immagini

Quest'anno mi son promesso di imparare Ruby. Data la semplcità del linguaggio, mi sono messo subito al lavoro su qualcosa di utile, prima di imparare le basi. Ci sono riuscito!

Magari non è il massimo dello stile, qualcosa si può sicuramente fare meglio, ma il risultato c'è ed è molto vicino a quello che volevo. Ho creato il mio primo plugin per Jekyll!

Nei miei post mi capita spesso di mettere delle foto e necessito di un sistema automatico per ridimensionarle, senza però perdere quelle originali. Così ho sfruttato la potenzialità dei plugin di Jekyll (scritti in linguaggio Ruby) per svolgere automaticamente questo task.

Sono partito da Jekyll Thumbnailer che ho trovato in GitHub, che mi sembrava un buono spunto. Quindi alla fine, ho ottenuto questo plugin: jekyll-post_image

Quando scrivo un post, per aggiungere le immagini uso questo tag, invece del solito Markdown:

<img data-original="/2013/04/26/filename.ext" class="content-image img-responsive" src="/2013/04/26/filename.m.jpg" alt="Testo alternativo" title="Testo alternativo" />

Dove "Testo alternativo" è opzionale e se specificato diventa l'attributo alt. Ad esempio, nel post precedente, questo pezzo di codice

<img data-original="/2013/04/26/0-terminal-2.jpg" class="content-image img-responsive" src="/2013/04/26/0-terminal-2.m.jpg" alt="Terminal 2" title="Terminal 2" />

viene tradotto in html in questo modo:

<img src="/assets/2013-04-21-il-mio-estremo-oriente/0-terminal-2.jpg" alt="Terminal 2">

Il risultato è un'immagine con la dimensione giusta per adattarsi al tema attuale del sito (Twitter Bootstrap, 870px di larghezza). Ma dove sta scritta la dimensione? Semplice: nel file di configurazione _config.yml

post_image:
    dimensions: '870x'

Per funzionare, il plugin ha bisogno di mini_magick, che è installabile anche con il comando gem install mini_magick. È il wrapper ruby per utilizzare ImageMagick. Si occupa di creare la nuova immagine, ridimensionata, convertendola in jpeg. L'immagine originale non viene sovrascritta: sempre seguendo l'esempio, la foto viene cercata in _assets/2013-04-21-il-mio-estremo-oriente/0-terminal-2.jpg e salvata in assets/2013-04-21-il-mio-estremo-oriente/0-terminal-2.jpg. In questo modo, vengono pubblicate esclusivamente le immagini inserite nei post, perché la cartella _assets non viene pubblicata. Per evitare che Git faccia il tracking di questi file creati automaticamente, ho aggiunto la cartella _src/assets in .gitignore.

Il passo successivo sarà fare in modo che salvi le immagini direttamente in _site, in modo di evitare che vengano copiate lì al passaggio seguente. Ma per questa sera ho già dato e posso andare a letto soddisfatto.

Ti è piaciuto l'articolo? Condividilo! Commentalo!

comments powered by Disqus