Animation FadeIn

Utilité Faire apparaitre un élément progressivement

Infos utiles Après avoir défini votre animation dans @keyframes suivi du nom de votre animation
L'élément changera progressivement, vous avez la possibilité d'ajouter des étapes intermédiaires (10%, 20%,80% ...) pour varier le rythme
Vous pouvez l'utiliser sur l'élément de votre choix en indiquant la propriété animation: nom_de_votre_animation ainsi que la durée que vous souhaitez

Exemple de code

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

h1 {
    animation: fadeIn 3s;
}

Langage CSS

PDF Voir la fiche

Animation typing

Utilité Donner un mouvement machine à écrire

Infos utiles Une animation un peu bling bling qui permet d'afficher un intitulé lettre par lettre avec un curseur qui clignote comme un prompteur

Rappel : Les animations doivent être utilisées avec parcimomie, car elles rendent la lecture plus difficile. Elles réduisent donc l'accessibilité de vos pages.

Exemple de code

h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation:
        typing 3.5s steps(26, end),
        blink-caret .75s step-end ;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }

}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent ;}
    50% { border-color: var(--secondary-color-1); }
    100% { border-color: transparent; }

}

Langage CSS

PDF Voir la fiche

Infos utiles La taille de la police peut être définie en px, em, rem ou vw
Taille en px permet de contrôler la taille du texte, l'utilisateur ne peut modifier qu'en zoomant sur la page

Taille en em 1em c'est la taille de référence de votre texte (dans le thème margot on peut choisir la taille du texte dans la configuration graphique) - en appliquant des multiples de cette taille de référence aux différents niveaux de titres, on peut définir une hiérarchie. L'utilisateur aura la possibilité de modifier la taille du texte dans son navigateur et les proportions seront préservées.

Exemple de code

h1{font-size:3.2em;}

Langage CSS

PDF Voir la fiche

format

Utilité Utiliser une syntaxe Yeswiki dans le template twig

Exemple de code

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

Langage TWIG

PDF Voir la fiche

hasAcl

Utilité Afficher pour les admins seulement

Infos utiles Cette fonction hasAcl permet de limiter l'affichage d'une partie du template aux utilisateurs autorisés.

Exemple de code

# --- Start reserved admins info --- #}
{% if hasAcl("@admins",fiche.id_fiche) %}

  <div class="panel panel-warning">
    <div class="panel-heading  center">
      <h4><i class="far fa-hand-point-right"></i> Administration</h4>
    </div>
    <div class="panel-body">
      Projets : {{html.listeListeProjects }}
    </div>
  </div>

{% endif %}

Langage TWIG

PDF Voir la fiche

Slice

Utilité Tronquer un texte long

Infos utiles Permet d'afficher les n premiers caractères d'un texte long
Voir documentation twig slice

Exemple de code

{{fiche.bf_description1[:250]}}

Langage TWIG

PDF Voir la fiche

split

Utilité Formater un champ checkbox ou un champ tag

Infos utiles Les champs checkbox et tag peuvent contenir plusieurs valeurs, elles sont enregistrées sous forme de liste séparés par des virgules, pour les formater, il faut donc traiter la chaine de caractères en isolant chacune des valeurs de la liste pour pouvoir gérer la mise en forme de chaque élément.
la fonction split dans twig permet de découper une chaine selon le caractère spécifié (ici ',')

Exemple de code exemple avec tag

{% for tag in fiche.bf_tags|split(',') %}
<div class="trombi-content"> {{tag}} </div>
{% endfor %}

exemple avec checkbox

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 %}

Langage TWIG

PDF Voir la fiche

urlImage

Utilité Redimensionner une image avant de l'afficher

Infos utiles La fonction urlImage a été définie pour permettre le redimensionnement des images.

2 options possibles :

fit : permet de conserver le ratio de l'image - la largeur ou la hauteur sera respectée est l'autre dimension sera attribuée en conservant le même ratio que l'image d'origine
crop : l'image sera tronqué selon les dimensions largeur et hauteur indiquées

Exemple de code

{% 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:200,height:200,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 %}

Langage TWIG

PDF Voir la fiche

Utilité Afficher la valeur brute d'un champ

Infos utiles {{fiche.identifiant}}retourne la valeur du champ "identifiant"

Pour le mettre en forme vous pouvez y ajouter les balises html de votre choix :

Exemple de code exemple pour un titre

<h1 class="BAZ_fiche_titre">{{fiche.bf_titre}}</h1>

Pour info pour le titre de votre fiche veillez à conserver la classe "BAZ_fiche_titre" - il est notamment utile dans l'affichage accordéon (évite d'avoir un doublon)

Langage TWIG

PDF Voir la fiche

{{ format('{{bazarliste id="5" }}')|raw }}

Utilité Afficher une sélection de fiches liées

Exemple de code

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

Langage TWIG

PDF Voir la fiche

Utilité Afficher le champ pré-formaté

Infos utiles Pour afficher vos données avec la mise en forme prévue dans yeswiki utilisez la syntaxe suivante :
{{html.identifiant}}

Cette syntaxe est utile pour les champs de type date, mail, liste, fichier, etc...

Exemple de code

<p><span> Du </span> {{ html.bf_date_debut_evenement }} <span> au </span> {{ html.bf_date_fin_evenement }}</p>

Langage TWIG

PDF Voir la fiche

Animation FadeIn

Animation FadeIn

Animation typing

Animation typing

Font size

Font size

format

format

hasAcl

hasAcl

Slice

Slice

split

split

urlImage

urlImage

{{fiche.identifiant}}

{{fiche.identifiant}}

{{ format('{{bazarliste id="5" }}')|raw }}

{{ format('{{bazarliste id="5" }}')|raw }}

{{html.identifiant}}

{{html.identifiant}}