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>