.. _widgetpedia/elements/html/img: 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. .. raw:: html
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: .. image:: /_static/images/html/img-placeholder.png :width: 500px :align: center 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. .. image:: /_static/images/html/crop-database-mode.gif :width: 1176px :align: center .. hint:: 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. .. raw:: html
**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 | +------------------------+------+--------------------------------------------------+ .. sectionauthor:: Davide Paci