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 principale
  • content.alt_image_url per l'immagine alternativa
  • content.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.

Voci correlate