Syntaxes twig pour templates bazar

Attention les syntaxes twig changent bientôt

Des exemples de twig custom avec de nouvelles syntaxes sont en cours de préparation. Exemples disponibles ici
https://github.com/YesWiki/yeswiki/tree/doryphore/docs/examples
La plus simple façon d'afficher la valeur d'un champ : 
{{ fiche.nom_champ }}


Affichage d'un champ liste : 
{{ _self.showStr(html.listenom_champ,'label facultatif','class css facultatif ') }}


Formater un champ date


<hr><p class="small">Cette fiche a été mise à jour le {{ html.bf_date_mise_a_jour }}</p>

{# {{ _self.showStr(html.bf_date_mise_a_jour,'','') }} - retourne le bon format de date mais dans un <p> #}
{# {{ format(fiche.bf_date_mise_a_jour)|raw }} retourne la date au format brut #}


Les textes long


si tu affiches du contenu qui est du html et pas que du texte
ex : <p>{{ _self.showStr(html.listeListeListeprojets,'Cadre','') }}</p>

il va chercher à inclure une balise html de type bloc (genre <div> ou <section>) dans une balise html de type inline (genre <p> ou <span>).
Ceci n'est pas autorisé par html et le navigateur ferme automatique la balise inline avant d'afficher le bloc, ce qui crée un décalage ensuite dans les fermetures des balises div.

L'idéal pour le bloc admin, c'est de taper plutôt ceci:
{{ _self.showStr(html.listeListeListeprojets,'Cadre','','div') }}


  • en retirant les balises <p> qui créent le souci et qui sont en fait superflues
  • en ajoutant l'option 'div' pour forcer l'usage d'un bloc englobant en <div> plus stable que la balise par défaut en <p> (qui est en inline contrairement à <div>)

Valeur des checkbox

Pour afficher la liste des valeurs cochées sous forme de liste à puce classique, utiliser la syntaxe :
{{ _self.showStr(html.listeListeListeprojets,'Cadre','') }}


Pour formater de manière personnalisée les valeurs des checkbox, comme dans l'exemple ci-dessous dans des étiquettes 
{% set fieldOptions = (form.prepared|filter(f => f.propertyname == 'checkboxListeViolence')|first).options %}
	{% for element in fiche.checkboxListeViolence|split(',')|filter(o => o is not empty) %}
      <span class=" label label-primary">  {{fieldOptions[element]|raw}}  </span>
	{% endfor %}


Utiliser une syntaxe Yeswiki dans le template twig

{{ format('{{include page="' ~ fiche.id_fiche ~ '"}}') }}



{{ format('{{section visibility="@admins"}}')|raw }}
...
{{ format('{{end elem="section"}}') }}

!! Suite bug sur twig tableau de bord kimiyo (04/04/2022)
il vaut mieux remplacer le end elem
{{format('{{end elem="col"}}')}} par </div>
{{format('{{end elem="grid"}}')}} par </div>
{{format('{{end elem="accordion"}}')}} par </div>
{{format('{{end elem="label"}}')}} par </span>
{{format('{{end elem="panel"}}')}} par </div></div></div>

Pour trouver la bonne syntaxe, regarde le fichier tools/templates/actions/end.php

Afficher des fiches liées

{{ format('{{bazarliste id="5" template="blog-custom" champ="bf_date" header="false" nb="10" ordre="desc" show_author="1" show_date="1" query="listefiche8=' ~ fiche.id_fiche ~ '"}}')|raw }}


Redimensionner les images

dans un tpl.html
<img src="<?php echo redimensionner_image('nom-du-fichier-image-dans-le-dossier-files.ext','',300,200,'fit');?>">


ici : 300 = largeur 300px, 200 = hauteur 200px, 'fit' = l'image est contenu dans 300 x 200, si tu mets 'crop', l'image sera coupée

en twig ce serait
<img src="{{ urlImage({fileName:'nom-du-fichier-image-dans-le-dossier-files.ext',width:300,height:200,mode:'fit'}) }}">

Refaire le point sur l'affichage des images avec twig

Sinon pour une image rangée dans custom/images/mon-image.jpg qu'il n'y a pas besoin de redimensionner, tu peux mettre
<img src="<?php echo $this->wiki->getBaseUrl() ; ?>/custom/images/mon-image.jpg">


Exemples

Fichiers à placer dans le dossier /custom/templates/bazar
exemple_template.zip