img

Il widget img permette di 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')

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. 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:

../_images/img-placeholder.png

Con un doppio clic sul placeholder o semplicemente trascinando il file nell’area designata verrà completato l’upload. Una volta caricata, sarà possibile spostarla per selezionare la parte di interesse, o ingrandirla tenendo premuto Shift.


Parameters:

Parameter name Type Description
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 Rende l’immagine editabile (cioè ridimensionabile e riposizionabile)
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”)
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 Parameters
_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 rientro 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 Parameters
disabled B Permette di disabilitare il campo. Es: disabled=True

Autore della sezione: Davide Paci