====== Lavorare con immagini e documenti ======

In questa sezione:

  * Impara a caricare una o più immagini sul sito
  * Impara ad inserire immagini nel contenuto di una pagina web
  * Impara a caricare PDF, .DOC, documenti audio e video e a creare link ad essi dal contenuto di una pagina web.
  * Impara a gestire i file caricati

===== Inserire immagini =====

Ci sono due modi per inserire immagini sul sito: uno, relativamente semplice, per caricare un'immagine singolarmente, oppure un altro, più robusto, per caricarne parecchie contemporaneamente. Una volta che l'immagine è stata caricata, può essere utilizzata in dierse pagine del sito.


==== Caricare immagini singole ====

Il modo più semplice per inserire un'immagine dal tuo computer all'interno di una pagina web, è andare in quella pagina dall'area //Contenuto del sito//, aprirla e cliccare il pulsante **Inserisci immagine** (è la figura dell'alberello sulla barra delgli strumenti). Questo apre, nella parte destra dello schermo, la //barra delle immagini//.

{{ :editors:selezione_447.png?direct& |}}

Dalla barra laterale delle immagini, clicca su **Upload file**. Comparirà il form di upload, quindi clicca su //Scegli file// per poter caricare sul sito un file dal tuo computer. Una volta caricata, una piccola anteprima dell'immagine dovrebbe apparire nella barra laterale.

{{ :editors:selezione_448.png?direct }}

<style background box>
:!: **NOTA:**\\ 
Una volta che l'immagine è stata caricata, puoi riutilizzarla in più posti nel sito. Potresti dare un'occhiata più in basso a //Inserire immagini caricate precedentemente// per dettagli su come riutilizzare le immagini, oppure a //Gestire i file// per organizzare e mantenere aggiornati i file sul sito.
</style>


==== Caricare più immagini contemporaneamente ====

Per caricare più immagini, clicca sulla linguetta **File & immagini** nel menu di navigazione principale nella parte superiore dello schermo (**ATTENZIONE:**  assicurati di aver salvato come bozza la pagina su cui stai lavorando in quel momento, altrimenti rischi di perdere tutto il lavoro che hai fatto a partire dall'ultimo salvataggio).

Clicca il pulsante **Aggiungi documenti a ...** nell'area Files. Da quesa sezione clicca il pulsante //Carica il file// per selezionare dal tuo computer il primo file da caricare. Ripeti questo passaggio per ogni file che intendi caricare. Quando tutti i file che vuoi caricare sono elencati in quest'area, clicca il pulsante **Upload** per caricare tutte le immagini

{{ :editors:selezione_450.png?direct }}

<style background box>
:!: **NOTA:**\\ 
Si tratta delle stesse operazioni da fare per caricare qualsiasi tipo di file, non solo le immagini.
</style>

==== Inserire nella pagina le immagini caricate ====

Una volta che hai caricato un'immagine, puoi inserirla all'interno di qualsiasi pagina. Assicurati che il documento in cui vuoi inserire l'immagine sia caricato nel Pannello di editing, quindi clicca sul pulsante **Inserisci immagine**. Si aprirà la barra laterale delle immagini, con le miniature delle immagini caricate. Se non vedi l'immagine che cerchi, potrebbe trovarsi in un'altra cartella. Puoi scegliere la cartella da visualizzare cliccando sul menu a tendina in cima alla barra laterale con scritto //(Scegli)//. Inoltre puoi anche usare il box di ricerca per nome del file.

{{ :editors:selezione_451.png?direct |}}

Quando hai trovato l'immagine che ti interessa, cliccaci sopra per selezionarla. Puoi aggiungere del //testo alternativo// (alt), che verrà mostrato nel caso non si possa visualizzare l'immagine  (ad esempio su browser testuali o su screen reader per non vedenti). Oppure puoi aggiugnere del //testo in sovraimpressione// (tooltip), che permette di visualizzare informazioni aggiuntive sull'immagine passandoci sopra con il mouse. Se vuoi puoi anche aggiungere una //didascalia// (caption text). Inoltre puoi scegliere l'allineamento e le proprietà per lo scorrimento del testo attorno ad essa, così come le dimensioni che dovrà avere l'immagine.

Quando hai completato l'inserimento di queste informazioni, clicca il pulsante nella parte inferiore destra del pannello **Inserisci immagine**. L'immagine sarà così posizionata nell'area Contenuto, in corrispondenza del cursore.

{{ :editors:selezione_452.png?direct |}}


===== Caricare e linkare documenti =====

Per caricare documenti, come ad esempio file PDF, documenti Word .DOC oppure audio o video scaricabili, clicca sulla voce **File&Immagini** dal menu di navigazione principale nella parte superiore dello schermo (ATTENZIONE: assicurati di aver salvato come bozza la pagina su cui stai lavorando in quel momento, altrimenti rischi di perdere tutto il lavoro che hai fatto a partire dall'ultimo salvataggio).

Clicca il pulsante **Aggiungi documenti a ...** nell'area Files. Da quesa sezione clicca il pulsante //Carica il file// per selezionare dal tuo computer il primo file da caricare. Ripeti questo passaggio per ogni file che intendi caricare. Quando tutti i file che vuoi caricare sono elencati in quest'area, clicca il pulsante **Upload** per caricare tutte le immagini

{{ :editors:selezione_450.png?direct |}}

Per creare un collegamento al documento, ritorna alla pagina dove vuoi crearlo, cliccando sulla voce **Contenuto del sito** dal menu di navigazione principale nella parte superiore dello schermo. Seleziona il testo che vuoi trasformare in collegamento, clicca il pulsante per l'inserimento del link, quindi dalla barra laterale di aggiunta del link, seleziona la voce **Scarica il file**. Puoi scegliere il documento dal menu a tendina che compare o scrivere il nome del file o parte di esso per cercarlo tra i file caricati. Il //testo del collegamento// dovrebbe essere stato automaticamente precompilato con il testo selezionato.

{{ :editors:selezione_455.png?direct |}}

Infine, per inserire il link, clicca il pulsante nella barra laterale dei collegamenti **Inserisci Link**. Se i webdesigner sono stati bravi, nella pagina ci dovrebbe essere una piccola icona che indica che il link conduce ad un documento da scaricare. Ad esempio, per un file PDF ci sarà l'icona di un documento Adobe Acrobat.

<WRAP info ROUND>
== Dimensione e tipo di file ==
I file caricati possono pesare al massimo 16Mb e possono avere una delle seguenti estensioni: html - HTML - htm - HTM - xhtml - XHTML - js - JS - css - CSS - bmp - BMP - png - PNG - gif - GIF - jpg - JPG - jpeg - JPEG - ico - ICO - pcx - PCX - tif - TIF - tiff - TIFF - au - AU - mid - MID - midi - MIDI - mpa - MPA - mp3 - MP3 - ogg - OGG - m4a - M4A - ra - RA - wma - WMA - wav - WAV - cda - CDA - avi - AVI - mpg - MPG - mpeg - MPEG - asf - ASF - wmv - WMV - m4v - M4V - mov - MOV - mkv - MKV - mp4 - MP4 - swf - SWF - flv - FLV - ram - RAM - rm - RM - doc - DOC - docx - DOCX - txt - TXT - rtf - RTF - xls - XLS - xlsx - XLSX - pages - PAGES - ppt - PPT - pptx - PPTX - pps - PPS - csv - CSV - cab - CAB - arj - ARJ - tar - TAR - zip - ZIP - zipx - ZIPX - sit - SIT - sitx - SITX - gz - GZ - tgz - TGZ - bz2 - BZ2 - ace - ACE - arc - ARC - pkg - PKG - dmg - DMG - hqx - HQX - jar - JAR - xml - XML - pdf - PDF - ods - ODS - odp - ODP - odt - ODT - odb - ODB.
</WRAP>

===== Gestire i file =====

Per gestire i file caricari, fai riferimento all'area **File&Immagini** a cui puoi accedere dal menu di navigazione principale nella parte superiore dello schermo. In quest'area, il pannello dei contenuti sulla sinistra, mostra la lista delle cartelle che contengono file nel sito. Queste potrebbero includere sia immagini che documenti come file PDF, o file .DOC, oppure anche file javascript.

==== Creare, spostare e cancellare cartelle ====

Puoi creare delle nuove cartelle, dove conservare immagini e documenti, semplicemente cliccando il pulsante **Crea** in cima al Pannello dei contenuti sulla sinistra. La nuova cartella verrà creata come sotto-cartella di quella che avevi selezionato.

{{ :editors:selezione_456.png?direct& |}}

Per **riordinare** le cartelle puoi spuntare la casella //"Permetti di riordinare con drag & drop"// in cima all'elenco delle cartelle nella barra laterale sinistra. In questo modo potrai semplicemente cliccare sulla cartella e spostarla in qualsiasi punto della lista (quando hai finito ti consigliamo di togliere la spunta dalla casella //"Permetti di riordinare con drag & drop"// per evitare spostamenti accidentali di cartelle).

Per **cancellare** una cartella, seleziona quella che vuoi cancellare, quindi clicca il pulsante **Cancella** in cima all'elenco delle cartelle nella barra laterale sinistra. Verrà visualizzata una casella di spunta accanto ai nomi delle cartelle con pre-selezionata quella su cui ti trovavi, per cancellare più cartelle contemporaneamente puoi spuntare più caselle. Una volta assicurati che abbiamo spuntato solo le caselle delle cartelle che vogliamo cancellare, possiamo cliccare il pulsante **Cancella le cartelle selezionate** per cancellare definitivamente le cartelle.

==== Cercare immagini e documenti ====

Per cercare un'immagine o un documento scrivi il termine da ricerca nella casella **Cerca** in cima all'area //Filese// nel pannello di editing della cartella.

{{ :editors:selezione_457.png?direct& |}}

==== Spostare immagini e documenti tra cartelle ====

Per spostare immagini e documenti tra le cartelle, selezionare innanzitutto la cartella di destinazione. Una volta all'interno della cartella in cui si vogliono spostare i file, cliccare il pulsante "Aggiungi documenti a 
{nome della cartella}".\\ Dal pannello di caricamento è possibile usare l'area **Import from an existing folder**, dove, tramite la tendina, è possibile selezionare i file contenuti in un altra cartella.

{{:editors:spostare_immagini.png?600}}

Una volta selezionata la cartella di provenienza è possibile selezionare i file contenuti (singolarmente o tutti assieme) e quindi cliccare il pulsante **Importa** presente sotto all'elenco.

<WRAP tip round>
== Spostamento vs Copia ==
Con questa operazione i documenti e le immagini verranno copiate nella nuova cartella, quindi, se necessario, sarà opportuno tornare nella cartella di provenienza dei file e cancellarli manualmente.
</WRAP>



==== Rinomina immagini e documenti ====

Per rinominare un documento, innanzitutto seleziona la cartella in cui si trova, quindi l'area //Files// nel panello principale di editing della cartella. Individua il file (potresti aver bisogno di navigare tra più pagine per trovarlo, se la cartella contiene molti files), quindi clicca sull'icona **Edit** alla destra del nome de file.\\  
Comparirà una finestra popup da cui puoi rinominare il file. Clicca il pulsante //Salva//, nella parte inferiore della finestra popup, quindi chiudi la finestra popup cliccando il pulsante //Close// o la //X// in alto a destra.

{{ :editors:selezione_459.png?direct& |}}


==== Cancella immagini e documenti ====

Per cancellare un documento, innanzitutto seleziona la cartella in cui si trova, quindi l'area //Files// nel panello principale di editing della cartella. Individua il file (potresti aver bisogno di navigare tra più pagine per trovarlo, se la cartella contiene molti files), quindi clicca sull'icona **Cancella** alla destra del nome de file (è una //X// rossa).


<WRAP info ROUND>
Ogni volta che inserisci un'immagine o un documento in una pagina web e poi dall'area **File&Immagini** la sposti, la cancelli o la rinomini, il CMS Silverstripe cerca di tenere automaticamente traccia di queste cose, preservando i //link rotti//. Ad esempio, se cerchi di cancellare un file e questo è utilizzato in qualche pagina, il sistema ti chiederà se sei veramente sicuro di voler cancellare il file.
</WRAP>