Le pagine

Le pagine rappresentano la funzionalità più importante di SelfComposer, all'interno di queste si trova la gran parte dei contenuti del sito. Ogni pagina può contenere delle figlie senza limiti di sotto-livelli, sono pienamente personalizzabili e il loro aspetto può essere modificato tramite i layout.

In genere sono utilizzate per tutte le voci di un sito e per suddividere i suoi contenuti, ma possono essere anche sfruttate nelle vetrine per mostrare delle immagini in uno slider o per reindirizzare l'utente a pagine esterne attraverso l'utilizzo del redirect.

Le pagine vanno create all'interno del pannello nell'omonima sezione, mentre la loro visualizzazione, nel caso in cui non siano stati applicati dei layout, viene utilizzata la vista del file page_generic.html.

Una funzionalità molto simile è rappresentata dalle news che condividono gran parte delle caratteristiche delle pagine, ma non possono avere più di un sottolivello.

Informazioni base della pagina

Ogni pagina è contraddistinta da un id e un URL unici per ogni lingua, e da diversi elementi multilingua:

  • Titolo
  • Date di inizio e fine pubblicazione
  • Impostazioni per il SEO

Descrizione

Ogni pagina può contenere una descrizione principale e una breve, differenti per ogni lingua attiva. Le descrizioni sono personalizzabili dal pannello tramite un campo WYSIWYG che genera un codice HTML.

Immagini

Ad una pagina possono essere associate diverse immagini (principale, alternativa, icona), oltre alle immagini inserite nella descrizione o nella gallery.

Ad una pagina può essere associata una gallery, ovvero un gruppo di immagini ordinabili.

Form contatti

Ogni pagina può avere un form contatti associato ad un modulo realizzato nel pannello che permette, una volta compilato, di spedire una email con il suo contenuto.

Form pagina

I form pagina permettono di aggiungere nel pannello dei campi per valori personalizzabili per ogni pagina. Vengono usati per mostrare una tabella di caratteristiche di un prodotto o per fornire delle opzioni aggiuntive per le pagine.

Tag

Ad una pagina possono assere associati dei tag che permettono di suddividerle. Questa funzionalità non ha nulla a che vedere con i metatag, ed è stata superata dal concetto di categorie pagina che permettono una gestione più avanzata.

Relazioni

Le pagine possono essere suddivise in categorie per poi essere associate l'una all'altra attraverso delle relazioni. Associando categorie alle pagine, è anche possibile filtrarle attraverso una Ricerca categorie.

Pagine figlie

Ogni pagina può avere più sottolivelli di figlie, che possono essere ricavate con la funzione get_contents() descritta in seguito.

La suddivisione dei file

SelfComposer utilizza il file page_generic.html come view per le pagine a cui non è stato associato un layout.

Inoltre è possibile, anche se non è obbligatorio, includere il file page_single.html con all'interno tutti i contenuti della pagina. Il file page_generic viene in questo modo utilizzato solo come contenitore con all'interno la struttura base della pagina, l'eventuale inclusione del file page_single.html e la lista delle pagine figlie.

Estrarre contenuti di una pagina

I contenuti delle pagine sono tutti inseriti all'interno della variabile globale content. Ad esempio per estrarne il titolo è sufficiente richiamare la proprietà title

{{ content.title }}

Per ogni pagina è possibile estrarre da content:

nome tipo descrizione
id string id della pagina (si può usare anche page_id)
parents.id string Lista degli id delle pagine padre separate da virgola
lang_code string Il codice della lingua attualmente visualizzata
layout string Nome del layout attivo sulla pagina
title string Titolo della pagina (in lingua)
slug string Slug della pagina, ovvero il nome usato nell'URL
url string URL della pagina a partire dalla root. Esempio azienda/chi-siamo
status string Stato di pubblicazione della pagina, se pubblicata ritorna "Published"
description string Descrizione della pagina
short_description string Descrizione breve della pagina
image_url string URL dell'immagine principale
alt_image_url string URL dell'immagine alternativa
icon string URL dell'icona
contact_id string id del modulo contatti associato alla pagina
redirect string URL del redirect
publish_start string Data di inizio pubblicazione
publish_end string Data di fine pubblicazione
created_at string Data di creazione della pagina
updated_at string Data dell'ultima modifica effettuata alla pagina
scripts_head string Script della pagina in <head>
scripts_body string Script della pagina in <body>
tags array Tag della pagina

Oltre a questi valori sono disponibili anche funzionalità specifiche per il SEO attivabili dal pannello che agiscono direttamente sui metatag del sito.

Per richiedere invece i contenuti di una pagina diversa da quella in cui ci si trova, è possibile utilizzare la funzione find_page_content() a cui è possibile passare i seguenti parametri:

nome tipo descrizione valore di default
page_id int id della pagina da cui si vogliono ricavare i contenuti
lang_code string Codice lingua dei contenuti che si vogliono estrarre

Ad esempio per estrarre i contenuti in tedesco dalla pagina con id 53:

{% find_page_content(53, 'de') %}

Estrarre le pagine figlie

Se le pagine hanno delle figlie, è possibile mostrarle attraverso la funzione get_contents() i cui contenuti estratti vengono associati ad una variabile chiamata child per comodità di lettura. È buona norma utilizzare una sola volta nella pagina la funzione get_contents() e associarla ad una variabile da cui estrarre i valori, per non aumentare inutilmente i tempi di caricamento.

La funzione get_contents() permette il passaggio di diversi parametri:

nome tipo valore di default descrizione
from_id String id della pagina attuale id da cui ricavare le pagine figlie
take Int null Quantità massima di pagine da estrarre
valid Bool true Estrae solo le pagine che hanno un contenuto e sono visibili
paginate Int null Numero di elementi per ogni pagina della paginazione
order_by String null
group_by String null
lang_code String Codice lingua attualmente attivo Codice della lingua del contenuto delle pagine
exclude_id String null Esclude gli id contenuti nella stringa separati da virgola
type String Sceglie il tipo di pagine, ad esempio solo le news
default_lang String
tags Array [] Filtra in base ai tag indicati nell'array
id Int null Id del contenuto da estrarre
from_page_id Int null Id della pagina da cui estrarre i contenuti
with_image Bool false Estrae solo le pagine che hanno l'immagine principale
all_childrens Bool false Estrae anche i figli di livelli superiore al primo

Pagina singola completa

In questo esempio abbiamo costruito una pagina che contiene titolo, immagine principale, descrizione, tag, form pagina, gallery, form contatti. Non estraendo i figli, questo codice potrebbe essere inserito all'interno di page_generic.html o incluso in questo come file esterno, solitamente chiamato page_single.html.

page_single.html
<p>{{ macro.breadcrumb() }}</p>
<h1>{{ content.title }}</h1>
 
{# --------------------------------------------------------
IMMAGINE PRINCIPALE
-------------------------------------------------------- #}
{% if content.image_url %}
{% set content_image = content.image %}
 
<a href="{{ content_image.url }}" title="{{ content_image.title }}">
    <img alt="{{ content_image.title }}" src="{{ content_image.url|resample(width=400) }}" />
</a>
{% endif %}
 
{# --------------------------------------------------------
DESCRIZIONE
-------------------------------------------------------- #}
<div>
    {{ content.description }}
</div>
 
{# --------------------------------------------------------
TAGS
-------------------------------------------------------- #}
{% set content_tags = content.tags %}
 
{% if content_tags|length %}
<div>
    <h3>{{ find_label('cms', 'tags_title') }}</h3>
</div>
<div>
    {{ macro.tag_cloud(content.tags) }}
</div>
</div>
{% endif %}
 
{# --------------------------------------------------------
FORM PAGINA
-------------------------------------------------------- #}
{% set page_forms = get_page_form() %}
 
{% if page_forms %}
<div>
    {{ macro.form_page(page_forms) }}
</div>
{% endif %}
 
{# --------------------------------------------------------
GALLERY
-------------------------------------------------------- #}
{% if content.gallery|length %}
<div>
    {% for image in content.gallery %}
    <div>
        <a href="{{ image.url }}" title="{{ image.title }}">
            <img src="{{ image.thumb_url }}" title="{{ image.title }}" />
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}
 
{# --------------------------------------------------------
CONTACT FORM
-------------------------------------------------------- #}
<div>
    {{ macro.form_bootstrap(find_contact(content.contact_id)) }}
</div>

L'esempio contiene richiami ad alcune macro che solitamente vengono incluse nel file delle macro, per le funzioni specifiche di queste sezioni si vedano le pagine specifiche.

Pagina con figli

Il seguente esempio permette di mostrare l'elenco delle pagine figlie di quella visualizzata. Nell'esempio mostreremo immagine principale, descrizione breve e un pulsante che rimanda alla pagina figlia. La paginazione è stata qui ridotta a 5, quindi dove abbiamo posizionato childs.links appariranno i link di paginazione per mostrare le altre figlie.

Per controllare l'effettiva presenza di pagine figlie utilizziamo content.count_childrens che permette di conoscere il numero di pagine figlie della pagina in cui ci troviamo.

page_generic.html
{% if content.count_childrens %}
    {% set children = get_contents(content.id, paginate = 12) %}
 
    {# --------------------------------------------------------
    PAGINAZIONE
    -------------------------------------------------------- #}
    <div>{{ children.links }}</div>
 
    {# --------------------------------------------------------
    CONTENUTI
    -------------------------------------------------------- #}
    {% for child in children %}
    <div>
        <h3>{{ child.title }}</h3>
        <div>
            {{ child.short_description|striptags|truncate(300) }}
        </div>
        <a href="{{ child.url }}">{{ find_label('cms', 'read_more') }}</a>
        {% if child.image_url %}
            {% set child_image = child.image %}
            <a href="{{ child.url }}">
                <img src="{{ child_image.url }}" alt="{{ child_image.title }}">
            </a>
        {% endif %}
    </div>
    {% endfor %}
{% endif %}

Dall'array children che abbiamo utilizzato, è possibile ricavare tutti i contenuti delle figlie, con le stesse proprietà di content.