Resample
Panoramica
Il filtro resample permette di rielaborare un'immagine prima che venga mostrata nella pagina, permettendo di ridimensionarla o modificarne il contenuto.
Questo filtro va utilizzato solo quando necessario e, possibilmente, per un ridotto numero di immagini, in quanto la rielaborazione appesantisce il server rallentando il caricamento della pagina web. Si consiglia quindi di utilizzare la proprietà Resize o di utilizzare le immagini come sfondo e gestirle con la proprietà background
di CSS.
Utilizzo
Rielaborare un'immagine
Il filtro resample è applicabile a qualsiasi URL di immagine che abbia come formato JPEG, PNG o GIF.
Alla funzione, che va preceduta dal carattere pipe, possono essere impostati diversi parametri, nell'esempio sono mostrati quelli più comunemente usati: width
, height
e grab
<img src="{{ content_image.url|resample(width=400, height=300, grab=true) }}">
I parametri della funzione, tutti opzionali, sono i seguenti
nome | tipo | descrizione |
---|---|---|
width | int | Larghezza in pixel dell'immagine elaborata |
height | int | Altezza in pixel dell'immagine elaborata |
ratio | bool | Se attivo mantiene il ratio dell'immagine |
upsize | bool | Se attivo ingrandisce l'immagine oltre la sua dimensione originale |
grab | bool | Se attivo mantiene le proporzioni dell'immagine tagliandola fino a farla combaciare con le misure height e width date |
grayscale | bool | Se attivo converte l'immagine in scala di grigio |
invert | bool | Se attivo inverte i colori dell'immagine facendone un negativo |
pixelate | int | Genera un effetto pixelato con quadrati di dimensioni pari alla dimensione indicata |
rotate | int | Ruota l'immagine del numero di gradi indicati. L'immagine genererà uno sfondo bianco nel caso la rotazione lo richieda |
Attenzione: per poter visualizzare correttamente l'immagine con almeno uno degli altri parametri sopra riportati è necessario impostare almeno un valore per height
o width
.
Esempi
Ridimensionare un'immagine e ritagliarla
Per ridimensionare un'immagine è possibile utilizzare i parametri height
, width
e grab
. Nell'immagine seguente è possibile vedere 3 risultati differenti a seconda del loro utilizzo.
Immagine 1
La prima immagine è stata ridimensionata mantenendo le proporzioni, questo è possibile utilizzando un solo parametro tra altezza e larghezza.
<img src="{{ child_image.url|resample(width=460) }}">
L'immagine viene ridimensionata secondo il parametro impostato, in questo caso la larghezza dell'immagine elaborata è stata ridotta a 460px mentre l'altezza è stata ridimensionata in proporzione rispetto all'originale. Questo può essere fatto sia per rimpicciolire che per ingrandire una immagine, tuttavia è sconsigliato l'ingrandimento in quanto creerà un effetto sgranato.
Immagine 2
La seconda immagine è stata ritagliata e ridimensionata utilizzando la proprietà grab
.
<img src="{{ child_image.url|resample(width=200, height=400, grab=true) }}">
Per ritagliare un'immagine, grab
deve avere altezza e larghezza definite. Il filtro così impostato ridimensiona l'immagine rispetto al lato più lungo, in questo caso l'altezza, e ritaglia l'altro con il valore indicato, rispetto al centro dell'immagine. Infatti è evidente come lo sfondo sia stato rifilato fino a portare l'immagine alla larghezza impostata di 200px.
Immagine 3
La terza immagine mostra il risultato del filtro applicato nella seconda, senza l'utilizzo di grab
.
<img src="{{ child_image.url|resample(width=200, height=400) }}">
Impostando sia una larghezza che una altezza, l'immagine viene ridimensionata senza mantenere le proporzioni. Questo utilizzo è sconsigliato in quanto porta le immagini ad essere sformate, è preferibile quindi utilizzare il parametro grab
per ritagliare secondo i parametri desiderati oppure indicare la dimensione di un solo lato.