Index


Notions de base HTML / CSS

Template de fiche

Template de liste

Créer un template de fiche

Les templates personnalisés sont écrits au format twig. C'est un langage qui permet le formatage en html et l'appel à des données bazar, tout en restant facile à lire.

Dans quel dossier du serveur faut-il placer les fichiers ?

Un template de fiche doit être nommé fiche-id.twig (id étant l'identifiant du formulaire).
Les templates personnalisés sont chargés depuis le répertoire custom/templates/bazar/.

ATTENTION, toutes les fiches possedant cet ID de formulaire seront avec le look personnalisé plutot que le look proposé par défaut... pour pouvoir réutiliser les templates, il faut enlever fiche-id.twig (ou le renommer avec un .old)

Exemple de code source

Pour démarrer, vous pouvez copier ce code dans votre dossier custom/templates/bazar/, puis le coller dans le fichier fiche-x.twig (avec x = le numero identifiant de votre formulaire).
Il vous reste ensuite à adapter votre mise en page. 


{# Exemple d'un template agenda #}
<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>

<div class="parent">
    <div class="enfant">
    <p><b><span> Du </span> {{ html.bf_date_debut_evenement }} <span> au </span> {{ html.bf_date_fin_evenement }}</p></b>
    <p>{{html.bf_description}}</p>

    <br>
    {% if fiche.bf_adresse %}   
        <p><i class="fas fa-map-marker"> </i> {{ fiche.bf_adresse }} {{ fiche.bf_code_postal ~ ' ' ~ fiche.bf_ville }}</p> 
    {% endif %}
    {% if fiche.bf_site_internet and not (fiche.bf_site_internet == 'http://') %} <p><i class="fas fa-link"> </i> {{ format(fiche.bf_site_internet)|raw }}</p>{% endif %}
    <br>
    <h3> En savoir plus </h3>
    {{html.fichierfichier|raw}}
    </div>
    <div class="enfant">
    {% if fiche.imagebf_image is not empty %}
    {# you can choose width, height (in px)  and mode "fit" or "crop" #}
    {% set imageFileAddr = urlImage({fileName:"files/#{fiche.imagebf_image}",width:500,height:500,mode:"crop"}) %}
        {% if not(imageFileAddr is same as(false) or imageFileAddr matches '/^\\d+$/') %}
            {# imageFileAddr is not false or not integer otherwise error #}
            <img
                class="center custom-entry"
                alt="{{ fiche.bf_titre|e('html_attr') }}"
                src="{{ imageFileAddr }}"
            />
        {% endif %}
    {% endif %}
    </div>    
</div>
PDF