img¶
Il widget img
permette di visualizzare o caricare nel nostro applicativo un’immagine tramite un’area di caricamento, e sostituirne il contenuto con l’immagine stessa una volta caricata. Questo widget si adatta quindi bene a foto profilo, immagini di prodotti, ecc, che richiedono un caricamento di un “immagine nella form.
Il widget è definito nel Model da un campo con dtype='P'
(picture) come segue:
tbl.column('image',dtype='P', name_long='!![en]Photo')
Il corrispondente widget nella resource, invece, è definito come segue:
pane.img(src='^.image',
border='2px dotted silver',
crop_width='320px',
crop_height='168px',
edit=True,
placeholder=True,
upload_filename='=#FORM.record.id',
upload_folder='site:social/image')
Con edit=True
si abilita non solo la visualizzazione ma anche la componente «attiva» di caricamento. In aggiunta a quest’ultimo, o in alternativa ad esso, con takePicture=True
verrà consentita la possibilità di scattare una foto dalla webcam o dallo smartphone per il caricamento.
L’attributo src
, come in HTML standard, permette di identificare il path (assoluto o, come in questo caso, relativo) dell’immagine. Con upload_filename
e upload_folder
si specificano invece un nome del file personalizzato (in questo caso corrispondente all’id del record) e una directory dove effettuare l’upload. Se impostata uguale ad “*”, l’immagine verrà salvata sul database invece che sul filesystem.
Con placeholder=True
, verrà mostrata un’immagine di default nell’area designata al caricamento dell’immagine (in alternativa, anche in questo caso, è possibile invece di True specificare un path di un’immagine).
Il widget si presenta lato utilizzatore come segue:
Con un doppio clic sul placeholder o semplicemente trascinando il file nell’area designata verrà completato l’upload. Una volta uploadato un file sarà possibile, cliccando due volte sull’immagine, modificare nel dialog che si presenterà il ritaglio, selezionando una porzione dell’immagine selezionata, o eliminare il file precedentemente caricato.
Suggerimento
Si noti che il widget si occuperà di registrare al path indicato (nel nostro caso ^.image
) l”url relativa dell’immagine, nella forma:
/_storage/site/prodotti/immagini/7896986.jpg?_pc=592&v_x=565&v_y=302&v_z=0.17&v_r=0&v_h=100&v_w=100
L’url comprenderà quindi anche gli attributi di ridimensionamento e riposizionamento che abbiamo inserito, ma non comprenderà di default l’url del sito, che potremmo in alcuni casi dover aggiungere manualmente.
Per l’utilizzo di campi di tipo immagine nella stampe da template, si faccia riferimento alla sezione dedicata nel Manuale Utente
Upload delle immagini sul database¶
Invece che nella cartella site
del sito (o in un sistema di storage alternativo) è possibile richiedere il salvataggio dell’immagine all’interno del database. In questo modo, effettuando un’operazione di dump e restore del database le immagini verranno automaticamente ripristinate anche senza un servizio di storage esterno.
Per salvare l’immagine sul db è sufficiente specificare come parametro:
upload_folder='*'
anziché una cartella o un path specifico.
Si noti che salvando le immagini sul database alla posizione indicata nel campo src verrà salvata una stringa binaria nella forma:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/...
Si consiglia quindi di limitare questa opzione a immagini di dimensioni ridotte o comunque in numero contenuto. Il vantaggio è che essendo sul database i file saranno sempre disponibili anche a seguito di dump e restore su macchine diverse.
Parametri:
Nome parametro |
Tipo |
Descrizione |
---|---|---|
src |
T |
Indica il path relativo dove andrà salvata l’url interna del file immagine (es: src=”^.image”). Corrisponde al classico “value” utilizzato da altre parti in Genropy |
edit |
B |
Se impostato a True rende l’immagine editabile (cioè ridimensionabile e riposizionabile) |
takePicture |
B |
Se impostato a True sarà possibile scattare una foto al caricamento, da webcam o da smartphone. |
placeholder |
T |
Può essere uguale a True (in quel caso verrà mostrato quello di default) oppure uguale a un url (es: placeholder=”http://www.genropy.org/logo.jpg”). |
crop_width |
T |
Permette di indicare la larghezza di taglio dell’immagine |
crop_height |
T |
Permette di indicare l’altezza di taglio dell’immagine |
crop_rounded |
T |
Permette di indicare il rientro di taglio dell’immagine |
crop_margin |
T |
Permette di indicare il margine di taglio dell’immagine |
crop_border |
T |
Permette di indicare il bordo di taglio dell’immagine |
upload_folder |
T |
Permette di indicare la cartella dove andare a posizionare il file caricato (es: upload_folder=”site:social/image”). Se pari a “*” l’immagine verrà invece caricata sul database. |
upload_maxsize |
T |
|
upload_filename |
T |
Permette di indicare il nome del file da assegnare. Può anche essere uguale a un altro parametro (es: upload_filename=”=#FORM.record.id”) |
Html Parametri |
||
_class |
T |
Permette di assegnare una specifica classe CSS al widget |
height |
T |
Permette di assegnare un’altezza al widget |
width |
T |
Permette di assegnare una larghezza al widget |
border |
T |
Permette di assegnare un bordo al widget |
rounded |
L |
Permette di assegnare un arrotondamento al widget |
style |
T |
Permette di assegnare uno stile (da esprimersi come serie di attributi CSS) al widget |
background |
T |
Permette di assegnare uno sfondo al widget |
HTML Parametri |
||
disabled |
B |
Permette di disabilitare il campo. Es: disabled=True |
Autore della sezione: Davide Paci