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:

../_images/img-placeholder.png

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.

../_images/crop-database-mode.gif

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