datetime_create,datetime_latest,"Nom de la fonction *",Utilité,"Infos utiles","Exemple de code",Image,Langage "07/01/2025 15:14:22","07/01/2025 14:19:16",{{fiche.identifiant}},"Afficher la valeur brute d'un champ","""""{{fiche.identifiant}}""""retourne la valeur du champ ""identifiant"" Pour le mettre en forme vous pouvez y ajouter les balises html de votre choix : ","**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)",,TWIG "07/01/2025 14:17:16","07/01/2025 14:17:16",Slice,"Tronquer un texte long","Permet d'afficher les n premiers caractères d'un texte long Voir documentation [twig slice](https://twig.symfony.com/doc/2.x/filters/slice.html)",%%{{fiche.bf_description1[:250]}}%%,,TWIG "07/01/2025 15:23:13","07/01/2025 14:23:38",{{html.identifiant}},"Afficher le champ pré-formaté","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...","%%<p><span> Du </span> {{ html.bf_date_debut_evenement }} <span> au </span> {{ html.bf_date_fin_evenement }}</p>%%",,TWIG "07/01/2025 14:35:34","07/01/2025 14:35:34",urlImage,"Redimensionner une image avant de l'afficher","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","%%{% 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 %}%%",,TWIG "07/01/2025 14:38:44","07/01/2025 14:38:44",format,"Utiliser une syntaxe Yeswiki dans le template twig",,"%%{{ format('{{include page=""' ~ fiche.id_fiche ~ '""}}') }}%%",,TWIG "07/01/2025 15:42:54","07/01/2025 14:43:58","{{ format('{{bazarliste id=""5"" }}')|raw }}","Afficher une sélection de fiches liées",,"`{{ format('{{bazarliste id=""5"" template=""blog-custom"" champ=""bf_date"" nb=""10"" ordre=""desc"" query=""listefiche8=' ~ fiche.id_fiche ~ '""}}')|raw }}`",,TWIG "07/01/2025 14:48:18","07/01/2025 14:48:18",hasAcl,"Afficher pour les admins seulement","Cette fonction hasAcl permet de limiter l'affichage d'une partie du template aux utilisateurs autorisés.","%%# --- 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 %}%%",,TWIG "07/01/2025 14:53:34","07/01/2025 14:53:34",split,"Formater un champ checkbox ou un champ tag","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 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 %} %% ",,TWIG "09/01/2025 17:44:10","09/01/2025 16:48:14","Animation typing","Donner un mouvement machine à écrire","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.//","%% 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; } } %%",,CSS "09/01/2025 17:25:16","09/01/2025 17:25:16","Animation FadeIn","Faire apparaitre un élément progressivement","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 ","%%@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } h1 { animation: fadeIn 3s; } %%",,CSS "09/01/2025 18:39:11","27/01/2025 11:37:48","Font size","Taille de la police, quelle unité choisir","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 rem** 1rem 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. **Taille en em** 1em est un multiple de la taille de la police de l'élement à style Si on a un bloc pour lequel font-size=20px et qu'on applique padding:1.5em, la marge intérieure sera de 1.5*20px = 30px L'élément avec une taille en em hérite de la taille de son parent En résumé, il est plus pertinent de définir les tailles des textes en rem, ainsi on conserve une hiérarchie basée sur la taille de la police par défaut. En revanche, la marge autour d'un bloc peut être définie en em ainsi elle sera influencée par la taille du texte dans le bloc parent.","%% body{font-size:17px;} h1{font-size:3.2rem;} %% Taille du titre = 3.2 * 17 = 54.4px",,CSS "23/01/2025 08:25:52","23/01/2025 08:25:52","Ancre HTML","Icone animée pour inciter au scroll","Voir un exemple sur ce wiki : https://ancredessavoirs.fr/?Accueil Lorsque la première section occupe tout l'écran et qu'il y a aussi du contenu plus bas, sous la ligne de flottaison, il peut être utile d'ajouter une icone qui permet de descendre dans la page pour consulter le contenu.","Le bouton qui renvoie vers une ancre plus bas dans la page : %%{{button class=""btn-link btn-icon icon-action"" icon=""fas fa-angle-double-down"" link=""#homepage"" nobtn=""1"" }} %% L'ancre se déclare comme ceci avec l'id de votre choix ... %%""""<div id=""homepage""></div>""""%% Et voici le css associé à coller dans PageCss %% /* Animation de l'icone chevron sur home */ @keyframes scroll { 0% { opacity: 0; } 30% { transform: translateY(0); opacity: .5; } 90% { transform: translateY(15px); opacity: 1;} 100% { transform: translateY(20px); opacity: 0;} } .icon-action { font-size: 4em; text-align: center; margin-right: auto; margin-left: auto; width: fit-content; display: block; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; } %% ",,CSS "23/01/2025 08:33:01","23/01/2025 08:33:01",Hover,"Afficher du texte au survol","voir des exemples sur https://imagehover.io/","%% /* section effet texte au survol */ .text-hidden { background-color:transparent; webkit-transition: all ease-out 0.3s; -moz-transition: all .3s ease-in-out; transition: background-image 2s ease; border: 1em solid var(--secondary-color-1); box-shadow: inset 0 0 0 0 var(--secondary-color-1)!important; } .text-hidden:hover{ background-image: unset !important; background-color:var(--secondary-color-1); box-shadow: inset 0 0 0 100px var(--secondary-color-1)!important;} .text-hidden .container { display:flex; flex-direction:column; justify-content:center; min-height:630px; transition: all .7s ease; } .text-hidden .text-hover{opacity:0;height:0;} .text-hidden:hover .text-hover{opacity:1;height:100%;transition: all .7s ease;} %%",,CSS "23/01/2025 08:34:48","23/01/2025 08:47:17",Divider,"Ajouter un séparateur entre 2 sections","Les divider sont des formes géométriques : une vague, une ligne oblique, un triangle que l'on voit parfois pour habiller une section de couleur. Ce sont des formes en svg qui ont la capacité à s'adapter à la taille de l'écran et qui sont plus légère qu'une image. Pour préparer le séparateur à votre guise (forme, couleur, ...) : https://shapedividers.com/ exemple ici https://csc.yeswiki.pro/?PagePrincipale , la forme utilisée est un triangle asymétrique qui est repris en haut de page et dans le footer",,https://pratic-coop.fr/files/DivideR_imagebf_image_Capture_d039cran_20250123_094418_20250123084717_20250123084717.png,CSS "27/01/2025 16:19:19","28/01/2025 15:33:43",Flexbox,"Gérer l'alignement des objets dans une boite","Lorsqu'une une boite contient plusieurs objets, par exemple une colonne avec : - un titre - un texte - un bouton On peut définir des propriétés d'alignement qui s'appliqueront à tous les éléments enfants (ceux qui sont à l'intérieur de la boite) Un guide avec toutes les possibilités d'alignement - explication de chacun des paramètres: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Une interface pour simuler les réglages possibles d'une flexbox puis générer le css : https://loading.io/flexbox/",,,CSS "28/01/2025 14:58:33","30/01/2025 10:35:54",Date,"Date format",,"Affiche la date au format 12 JAN 24 %%{{ fiche.bf_date_debut_evenement|date(""j M y"",""Europe/Paris"") }} %% Affiche la date au format par defaut 10.01.2025 - 12:00 %%{{ html.bf_date_debut_evenement }} %% Si vous avez besoin de comparer une date à la date du jour %% {% if date(fiche.bf_date_limite) > date() %} <p> Les inscriptions sont fermées </p> {%endif %} %%",,TWIG "28/01/2025 14:59:47","28/01/2025 15:00:00",Map,"Affiche la carte geolocaliser","nécessite d'activer l'option ""Afficher la carte dans la fiche lors de sa visualisation"" dans les paramètres avancés du champ map dans le formulaire",%%{{html.geolocation|raw}}%%,,TWIG "28/01/2025 15:46:07","28/01/2025 15:46:07",@media,"Affichage responsive","En css il est possible de définir une variante de style lorsque l'écran est petit ou très large, ... Par exemple la barre de menu est masquée et remplacée par un menu ""burger"" lorsque la taille de l'écran est inférieure à 800px. On appelle cette dimension le point de rupture. Voir la [documentation css mediaqueries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp){.newtab}","Dans cet exemple, on peut définir une largeur de bloc différente en fonction de la taille de l'écran. Sur un écran d'une largeur supérieure à 800px, chaque bloc a une largeur de 20% (ce qui permet d'afficher 5 blocs sur une ligne) %%@media only screen and (min-width: 800px) { .mon-bloc{width:20%;} } %% Sur un écran d'une largeur inférieure à 799px, chaque bloc a une largeur de 33% (ce qui permet d'afficher 3 blocs sur une ligne) %% @media only screen and (max-width: 799px) { .mon-bloc{width:33%;} } %%",,CSS
