.. _inserting_images:

Inserire immagini e video in pagina
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ci sono molte situazioni in cui inserire immagini. Due i metodi principali: un campo dedicato (image chooser) oppure il pulsante immagine nel campo rich text. La scelta dipende dalla configurazione del sito.

Inserire immagini con il campo dedicato
_______________________________________

Spesso è previsto un campo immagine per l’immagine principale o per la condivisione social.

.. image:: ../_static/images/screen14_add_main_image.png

* Clicca *Choose an image* per selezionare un’immagine.

Scegliere l’immagine da inserire
________________________________

Puoi:

#. scegliere dalla libreria immagini
#. caricarne una nuova

Cliccando *Choose an image* si apre un popup con due tab: Search (ricerca nella libreria) e *Upload* (caricamento).

**Selezione dalla libreria**

.. image:: ../_static/images/screen16_selecting_image_from_library.png

#. La ricerca aggiorna i risultati automaticamente.
#. Le *Popular tags* filtrano i risultati.
#. Cliccando un’immagine si apre la finestra di scelta del formato.

**Caricamento di una nuova immagine**

.. image:: ../_static/images/screen17_upload_image.png

#. Inserisci un titolo per l’immagine.
#. Clicca *Choose file* per selezionare dal computer.
#. Usa *Tags* per associare tag (separa con spazio; per tag multi-parola usa underscore).
#. Clicca *Upload*. L’immagine viene anche aggiunta alla libreria del CMS.

Inserire immagini via rich text
_______________________________

Nel corpo pagina, clicca il controllo Image nel rich text. Le opzioni sono analoghe al carosello.

Wagtail permette anche di scegliere l’allineamento.

.. image:: ../_static/images/screen18_image_alignment.png

#. Seleziona il formato/allineamento desiderato.
#. Fornisci sempre un testo alternativo (alt) appropriato.

Allineamenti disponibili:

* **Full width:** immagine a tutta larghezza dell’area testo.
* **Half-width left/right aligned:** metà larghezza, con testo a capo attorno; due immagini half width affiancate.

.. Note::
    La resa degli allineamenti dipende dall’implementazione del tema Wagtail; i risultati possono variare.