Se l'attributo mn:editable viene applicato ad un'immagine, saranno ad essa aggiunte nuove funzionalità e vincoli, quali quella di associarvi un link e di ridimensionarla.
mn:editable farà aprire l'interfaccia dell'editor lasciando agli utenti la possibilità di ridimensionare le immagini in larghezza ed in altezza, di configurare il loro allineamento, il title, l'alt ed un link da associare per rendere l'immagine cliccabile.
Larghezza delle immagini
È sempre obbligatorio specificare il valore della larghezza.
Per impostarlo usa l'attributo width="" che definisce la larghezza massima dell'immagine inserita.
<img mn:editable width="100" />
Il comportamento di default della piattaforma per il ridimensionamento automatico delle immagini si basa sulle seguenti regole:
- Se l'immagine è troppo larga, allora viene scalata proporzionalmente fino alla larghezza massima consentita;
- Se l'immagine è più stretta e non è stato inserito alcun vincolo, allora non viene effettuata nessuna operazione;
- Se si specificano le dimensioni in altezza, si applicano anzitutto le regole relative alla larghezza delle immagini; se l'immagine resta troppo alta, allora sarà tagliata in altezza.
Immagini di default
È possibile valorizzare l'attributo src con un'immagine di default che risiede nel file .zip del template importato. Se src è vuoto, la piattaforma mostrerà un box grigio con le dimensioni specificate nel tag img.
<img mn:editable width="100" src="img/image1.jpg">
Quando l'utente sceglie l'immagine da inserire, essa sarà ridimensionata in automatico per essere conforme alla larghezza richiesta.
È possibile definire anche l'altezza dell'immagine. In questo caso, l'immagine sarà prima ridimensionata in larghezza poi eventualmente tagliata per corrispondere all'altezza desiderata.
Gli attributi di base per la gestione delle immagini con Giotto sono i seguenti:
| Attributo | Descrizione | Esempio |
|---|---|---|
| mn:min-width | Impedisce all'utente di selezionare un'immagine più stretta del valore configurato. | mn:minwidth="60" |
| mn:min-height | Impedisce all'utente di selezionare un'immagine più bassa del valore configurato. | mn:min-height="60" |
| mn:max-width | Ridimensiona la larghezza di un'immagine. | mn:max-width="60" |
| mn:max-height | Definisce l'altezza massima dell'immagine dopo un eventuale ridimensionamento in altezza. Se l'altezza supera il limite, allora viene tagliata. |
mn:max-width="100" |
| mn:linkable | Definisce se all'immagine può essere associato o meno un link da cliccare. Il suo valore di default è true. |
mn:linkable="true" or "false". |
| mn:editable | Rende un contenuto modificabile. | |
| mn:label | Mostra un'etichetta nel form di modifica del contenuto. | mn:label="Etichetta" |
<img mn:editable width="100" mn:min-height="70" mn:resize="false" mn:label="Logo" alt="Testo alternativo" mn:linkable="false">
<img mn:editable width="100" height="100" alt="Immagine non ospitata nella piattafoma" mn:noimport />
Per ottimizzare la visualizzazione dei template, gli attributi del linguaggio Giotto possono talvolta modificare il comportamento degli attributi standard del linguaggio HTML.