Immagini della pagina
Panoramica
Ad ogni pagina possono essere associate diverse immagini singole (immagine principale, immagine alternativa, icona) o una serie di immagini: gallery, immagini inserite nella descrizione, e immagini inserite tramite form pagina. Di seguito descriveremo come attivare e mostrare le immagini "singole" associabili alla pagina. Per ognuna di queste i tipi di file accettati sono .jpg, .png, .gif ed .svg.
Generalmente nei siti web viene utilizzata l'immagine principale all'interno della singola pagina, l'alternativa per slider o vetrine, e l'icona per menu o elenchi. L'unica differenza tra le tre è che del campo icona è possibile estrarre solamente l'URL e nessun altro parametro.
Implementazione
Attivare l'immagine alternativa e l'icona per tutte le pagine
L'immagine principale è una funzionalità già disponibile di default per tutte le pagine del pannello, a differenza dell'immagine alternativa e dell'icona che vanno attivate dal file theme.php. La procedura di attivazione è simile per entrambe e riguarda l'aggiunta di un oggetto in features
, aggiungeremo quindi alt_image
per l'immagine alternativa e icon
per l'icona. Ognuno di questi oggetti deve avere come parametri enabled
per attivare la funzionalità e description
con il collegamento alla descrizione in lingua nel file common.php.
'features' => [ 'alt_image' => [ 'enabled' => true, 'description' => 'theme::common.features.alt_image', ], 'icon' => [ 'enabled' => true, 'description' => 'theme::common.features.icon', ] ],
In questo modo avremo abilitato le funzionalità e possiamo associarne la descrizione nel file common.php dove andremo a modificare sempre l'oggetto features
, associando ai nomi indicati nel file theme.php la stringa della descrizione.
'features' => [ 'alt_image' => '<strong>OPZIONALE</strong>: Utilizzare questo campo per impostare nello <strong>Slider</strong> un\'immagine diversa da quella principale.', 'icon' => 'Utilizzare questo campo per impostare l\'icona nei menu', ],
Mostrare le immagini
I dati delle immagini sono presenti nell'array content
di ogni pagina.
L'array di quelli dell'immagine principale può essere estratto con content.image
mentre per l'immagine alternativa viene utilizzato content.alt_image
, gli indici di questo array sono gli stessi per entrambi i tag:
nome | tipo | descrizione |
---|---|---|
id | string | Id dell'immagine |
title | string | Titolo dell'immagine nella lingua attiva (non presente nell'array) |
url | string | URL assoluto dell'immagine (da http…) |
folder_id | string | Id della cartella |
name | string | Nome del file dell'immagine |
kind | string | Può essere public o private a seconda se l'immagine è parte o meno dei file dell'area riservata |
extension | string | Estensione dell'immagine, ad esempio "jpg" |
mimetype | string | Tipo mime dell'immagine, ad esempio "image/jpg" |
thumb | string | Nome del file thumbnail generato (una versione compressa e rimpicciolita dell'immagine originale) |
size | string | Peso in byte dell'immagine |
token | ||
sequence | string | |
created_at | string | Data di caricamento dell'immagine |
updated_at | string | Data di ultima modifica dell'immagine |
Non è possibile estrarre queste informazioni per l'icona, della quale è disponibile solo l'URL.
È possibile richiamare direttamente l'indirizzo di una immagine con questi tag:
content.image_url
per l'immagine principalecontent.alt_image_url
per l'immagine alternativacontent.icon
per l'icona
Una volta ottenuto l'URL basterà inserirlo in un tag HTML <img>
o in una proprietà CSS come background-image
per mostrare l'immagine nel tema.
Infine è possibile, come per tutte le immagini, estrarre le immagini già correttamente ritagliate con la funzione di ricampionamento resize
descritta in Gestione File, o ridimensionarle con l'utilizzo del filtro resample.