Accéder aux codes sources
Index
File Transfer Protocol (FTP)
Prêt à mettre les mains dans le cambouis ?
Les codes sources de votre wiki sont hébergés sur un serveur web. Pour y accéder il est nécessaire de demander à l'administrateur de votre wiki : l'hote, l'identifiant et le mot de passe.
Quel logiciel utiliser ?
Le logiciel libre Filezilla permet d'accéder aux dossiers sur un serveur distant et d'y ajouter de nouveaux fichiers.Dans quel dossier faut-il mettre les templates ?
Les templates personnalisés doivent être placés dans le répertoire :/custom/templates/bazar
Tous les fichiers de ce répertoire seront conservés lors de la prochaine mise à jour de votre wiki.
Attention en aucun cas vous ne devez éditer les fichiers présents dans les autres dossiers !
Adrets
Adrets
Lien vers le wiki
https://adrets-asso.fr/
Travail réalisé
Le site vitrine de l'association ADRETS a été réalisé avec YesWiki en 2018, beaucoup de contenu est présent : actualités, ressources, description de projets mais la présentation n'était plus au goût du jour et la navigation n'était pas fluide.
- lier les projets avec les actualités et les documents
- ajouter un indicateur pour archiver les projets anciens et éviter la surcharge de la page projet
Le format des blocs "projet" permet d'afficher la description au survol, cette modification a nécessité un nouveau template card-hover.twig
Les fiches actualités ont été mises en forme via un template personnalisé pour épurer leur présentation, enlever les intitulés de rubrique.
Les fiches projet ont été entièrement repensée avec la mise en oeuvre d'onglets pour afficher les données liées à un projet : "actualités", "ressources" et ainsi permettre une decription plus complète.
Crédit image de présentation : Designed by Yael_Fazy / Freepik
Adaptation du style graphique
Une super charte graphique de l'association avait été réalisée par l'agence Poulets bicyclettes en 2020 avec pas mal de pictos pour mettre en valeur les activités de l'asso.Structuration de la base de donnée
Plusieurs adaptations de la base de données ont permis de fluidier le parcours utilisateur :- lier les projets avec les actualités et les documents
- ajouter un indicateur pour archiver les projets anciens et éviter la surcharge de la page projet
Adapter les templates de présentation
Le format des vignettes de la partie actualités a un style photo polaroid, grâce à une légère adaptation css du template cardLe format des blocs "projet" permet d'afficher la description au survol, cette modification a nécessité un nouveau template card-hover.twig
Les fiches actualités ont été mises en forme via un template personnalisé pour épurer leur présentation, enlever les intitulés de rubrique.
Les fiches projet ont été entièrement repensée avec la mise en oeuvre d'onglets pour afficher les données liées à un projet : "actualités", "ressources" et ainsi permettre une decription plus complète.
Crédit image de présentation : Designed by Yael_Fazy / Freepik
Année de réalisation
- 2024
Type de réalisation
- Légère adaptation graphique
- Template de fiche twig
Ajouter du css personnalisé
Index
Ajouter du css personnalisé
Si vous avez besoin de faire des petites modifications sur le style de votre wiki, il est possible d'ajouter du code CSS en ligne, sans avoir besoin d'accéder au serveur.La page PageCss est chargée après les autres feuilles de style, de ce fait vous pouvez surcharger une classe css ou en déclarer de nouvelles, elles seront prises en compte.
Si vous n'avez pas peur d'un peu de code
Des variables CSS sont disponibles dans le thème Margot pour vous aider à affiner le design :
couleur des titres
couleur des liens
couleur de la barre de menu...
Sur chaque wiki, il existe une page nommée PageCss qui permet d'ajouter du code CSS pour définir des styles personnalisés
Un extrait de code est disponible par défaut dans PageCss :
/* :root { */ /* couleur des titres */ /* --title-h1-color:var(--neutral-color); */ /* --title-h2-color:var(--primary-color); */ /* --title-h3-color:var(--secondary-color-1); */ /* --title-h4-color:var(--secondary-color-2); */ /*}*/
Ce code définit des variables de couleurs qui s'appliquent à l'ensemble du wiki.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.
Si vous souhaitez commencer la personnalisation il faudra d'abord enlever les commentaires pour les lignes que vous souhaitez personnaliser :
:root { --title-h4-color:var(--neutral-color); }
Il est possible d'utiliser soit les couleurs en hexadecimal (#092e67) soit les variables de couleurs qui correspndent aux couleurs que que vous avez choisies via la page Apparence
[IMPORTANT!]Après avoir fait une modif de style CTRL + MAJ + R pour vider le cache du navigateur
Ajouter un effet au survol de l'image
Index
Ajouter un effet au survol de l'image
Yeswiki utilise une bibliothèque css nommée Izmir qui permet d'ajouter facilement des effets au survol d'une image.1ere étape : insérer une image et ajouter un texte
Code wiki{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left" caption="Texte de la vignette apparait au survol de la souris"}}
Lorsque vous ajoutez une image avec le bouton fichier (fonction attach), il est possible de saisir un "texte de la vignette" - il sera visible au survol de l'image. Ce texte apparait dans votre code avec le paramètre caption="mon texte"
2eme étape : paramètres avancés
En éditant le composant attach vous aurez accès à de nouvelles options, notamment dans les paramètres avancés, l'effet izmir permet d'ajouter du style pour l'affichage de votre texte au survol.La couleur de fond est maintenant présente sur l'ensemble de l'image, le texte est centré.
D'autres options comme l'apparition de bordures ou le zoom sur l'image apportent un dynamisme lors du survol.
A ce jour il semble que texte surgissant et gradient ne fonctionnent pas
3eme étape : personnalisation plus fine
Pour modifier la couleur, il est possible de définir spécifiquement la propriété background-color de l'opbjet figcaption.
ici j'ai ajouté une classe css 'custom-izmir' afin de ne modifier que le 3eme exemple
Code attach avec la classe css ajoutée :
{{attach file="undraw_teaching_f1cm.png" desc="image undraw_teaching_f1cm.png (86.0kB)" size="medium" class="left c4-izmir c4-gradient-top custom-izmir" caption="Texte de la vignette apparait au survol de la souris"}}
Ajout de code css pour modifier la couleur :
""<style>.custom-izmir figcaption{background-color:#ea663c;}</style>""
Remarque : si votre image comporte un fond transparent, vous serez certainement gênés par une couleur de fond bleu appliquée sous votre image, dans ce cas vous pouvez modifier la couleur de fond avec le code css suivant :
.c4-izmir { --primary-color: transparent;}
Ancre des savoirs
Ancre des savoirs
Lien vers le wiki
https://ancredessavoirs.fr
Travail réalisé
Thomas Pesnel est l'auteur des illustrations et la vidéo de la page d'accueil.
Paramétrage du preset :ancre.css
Adaptation du css pour différents éléments de la page d'accueil : voir PageCss
Mise en forme des fiches ressources > fichier source template fiche-6.twig
Design
Les maquettes de ce site ont été réalisées par Thomas Pesnel - CPIE Bassin de Thau.Thomas Pesnel est l'auteur des illustrations et la vidéo de la page d'accueil.
Intégration graphique
Utilisation du thème MargotParamétrage du preset :ancre.css
Adaptation du css pour différents éléments de la page d'accueil : voir PageCss
Personnalisation affichage de la base de données
Mise en forme de la liste des ressources > fichier source template custom activites.tpl.htmlMise en forme des fiches ressources > fichier source template fiche-6.twig
Année de réalisation
- 2022
Type de réalisation
- Légère adaptation graphique
- Template bazar
- Template de fiche twig
Fichier : custom_ancre.zip
Télécharger
Commanditaire
Kimiyo
Avant de faire un template de fiche
Index
Avant de faire un template de fiche
Les templates dynamiques "card" offrent énormément d'options de personnalisation. Explorez les différentes combinaisons possibles : vertical, horizontal, ainsi que différentes informations mises en avant dans les emplacements titre / sous-titre /zone flottante / footer.exemple de page ressource avec card : https://communservice.cc/?FichesExp
Avant de se lancer
Index
Avant de se lancer
La structure de votre formulaire est-elle stable ?
Lorsque vous réalisez un template de fiche il va faire appel à un certain nombre de champs contenus dans votre formulaire. Si la structure de votre formulaire évolue, les nouveaux champs ne seront pas pris en compte.C'est pourquoi il est recommandé de se lancer seulement quand les données sont stabilisées, à moins de pouvoir faire appel très facilement à la personne qui a concu le template.
Quelques astuces pour insérer des éléments de mise en forme
Custom HTML
Le constructeur de formulaire bazar permet d'insérer à l'endroit que vous souhaitez du contenu en html.Utilisez cette possiblité pour ajouter un encadré autour d'un groupe d'informations :
<div class="well">
infos de votre formulaire
date
heure
lieu
</div>
De la même manière, vous pouvez insérer une image, un picto, mettre en colonne...
PageCSS
En inspectant le code de votre page, vous avez la possibilité de voir quelles sont les classes css utilisées dans le rendu de votre formulaire, ainsi vous pouvez surcharger ces classes dans PageCss et modifier la mise en forme.exemples :
pour mettre un fond de couleur au fiches ressource
.id5 {background-color:yellow;}
mettre en forme les titres des fiches bazar
.BAZ_fiche_titre { color:var(secondary-color-2); border-bottom:2px solid var(--primary-color); }
Afficher les champs de type texte long en colonnes
.id4 .field-textelong { column-count: 2; }
Masquer un champ à l'affichage (mais le garder accessible via les filtres facettes)
.id4 [data-id="checkboxListeDepartementbf_checkbox_group"]{display:none;}
Comm'un service
Comm'un service
Lien vers le wiki
https://communservice.cc
Travail réalisé
L'association ADRETS possédait un wiki ressources depuis des années utilisé essentiellement en interne. En 2022, l'association choisit d'ouvrir cette base de donnée à un plus large public.
Afin d'améliorer la lisibilité et l'attractivité des ressources, j'ai réalisé la mise en forme des fiches ressources et des fiches expérience.
Les templates sont au format fiche-x.tpl.html.
Afin d'améliorer la lisibilité et l'attractivité des ressources, j'ai réalisé la mise en forme des fiches ressources et des fiches expérience.
Les templates sont au format fiche-x.tpl.html.
Année de réalisation
- 2022
Type de réalisation
- Template de fiche twig
Fichier : Templates_fiche_adrets.zip
Télécharger
Commanditaire
Adrets
Consulter les données brutes d'une fiche
Index
Extension Json dans le navigateur
Dans l'interface Bazar (Base de données) vous avez défini des identifiants pour chaque champ de votre formulaire. Ces identifiants sont utilisés pour stocker les informations à chaque fois qu'un utilisateur saisi une fiche.Afficher les données brutes
Pour vérifier vos identifiants et voir comment Yeswiki stocke les données, vous avez la possibilité d'afficher les données brutes.Lorsque vous consultez une fiche, ajoutez /raw à la fin de l'url
exemple :
https://pratic-coop.fr/?EcoclouD/raw
Json Lite : Extension firefox pour rendre plus lisible
Les données brutes sont stockées dans Yeswiki au format json, une extension firefox permet de formater l'affichage json : extension Json Lite.Pour installer l'extension dans firefox : Ctrl + Maj + A
Rechercher dans les Add-Ons mozilla le mot clé "Json", sélectionner "Json Lite" et installez.
Une fois l'extension installée, retournez sur votre wiki et consultez les données brutes, ca devrait être plus confortable !
Coopanimart
Coopanimart
Lien vers le wiki
https://dev.coopanimart.eu/?Home
Travail réalisé
Ce projet de coopération européen a choisi YesWiki pour partager des ressources produites dans le cadre de séminaires d'expérimentation de techniques d'intelligence collective.
Les templates twig sont disponibles dans le dossier custom.
Intégration d'un thème graphique
La charte graphique a été conçue par Guillaume Dethorey. J'ai réalisé l'intégration en CSS dans YesWiki.Mise en forme des fiches bazar
Les modules et les activités partagés dans le cadre de se projet ont été mise en forme selon les maquettes fournies par le graphiste.Les templates twig sont disponibles dans le dossier custom.
Année de réalisation
- 2024
Type de réalisation
- Légère adaptation graphique
- Template de fiche twig
Fichier : custom.zip
Télécharger
Commanditaire
Occitanie en scène
Créer un template de fiche
Index
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
Un exemple de template de fiche est fourni dans le code source de votre wiki. Il est disponible en accédant via ftp à votre serveur, dans le dossier/docs/examples/templates/bazar
Pour démarrer, vous pouvez copier ce dossier dans votre dossier custom, puis renommer le fichier avec le numero identifiant de votre formulaire.
Il vous reste ensuite à éditer ce fichier et à construire votre mise en page.
Créer un template de liste
Index
Créer un template de liste
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 ?
Il n'y a pas de convention de nommage pour votre template .twig .Les templates personnalisés sont chargés depuis le répertoire custom/templates/bazar/.
Structure du code
Code pour un template trombinoscope{% if fiches|length > 0 %} <div class="trombi-container "> {% for fiche in fiches %} <a class="bazar-entry modalbox bloc-question" data-size="modal-lg" {{ fiche.html_data|raw }} href="{{ fiche.url}}/iframe" data-iframe="1" {# add /iframe only for external YesWiki entries #} title="{{ fiche.bf_titre|raw|e('html_attr') }}"> <div class="caption trombi-content"> <span class="title">{{ fiche.bf_titre }}</span> </div> </div> </a> <!-- / bazar-entry --> {% endfor %} </div> <!-- / trombi-container --> {% endif %}
Anciens templates .tpl.html
Les templates yeswiki ont longtemps été codés en php dans des fichiers de type .tpl.htmlCes templates fonctionnent encore, cependant ils sont petits à petits réécrits en twig pour une meilleure lisibilité et une meilleure compatibilité avec le reste du code Yeswiki.
Un tuto Convertir un template bazar en twig a été écrit sur le site Yeswiki.net pour nous guider sur la réécriture des templates. Il comprend notamment un tableau de correspondance entre les syntaxes php et twig.
Ecocloud
Ecocloud
Lien vers le wiki
https://ecocloud.s-mart.fr
Travail réalisé
Proposition d'un preset en fonction des couleurs présentes dans le logo
Mise en forme de la page d'accueil
Les pictogrammes sont issus de Flaticon
Réalisation de templates simple pour affichage de l'apercu de la dernière ressource mise en avant.
> fichier source : apercu.twig apercu_peda.twig
Mise en forme de la page d'accueil
Les pictogrammes sont issus de Flaticon
Réalisation de templates simple pour affichage de l'apercu de la dernière ressource mise en avant.
> fichier source : apercu.twig apercu_peda.twig
Année de réalisation
- 2022
Type de réalisation
- Légère adaptation graphique
- Template bazar
Fichier : custom_ecocloud.zip
Télécharger
Commanditaire
GIS S-mart
Editeur de code
Index
Editeur de code
Les templates peuvent être édités avec n'importe quel éditeur de texte basique, néanmoins il existe des outils de développement qui peuvent apporter un peu de confort en permettant la coloration syntaxique et l'autocomplétion de votre code.Si vous n'avez pas encore d'éditeur de code, je vous conseille d'installer VsCodium
Exemples
Index
Exemples
Voici quelques exemples de mise en forme pour démarrer.Pour les réutiliser :
- copier les codes sources de ces templates,
- coller le fichier dans votre dossier /custom/templates/bazar
- renommer le fichier avec le numero identifiant de votre formulaire
- adaptez le contenu à votre guise
Pour ces premiers exemples partagés, il manque le fichier css associé ... coming soon
Exemple pour une fiche annuaire
Moveagri
Lien vers le wiki : Annuaire des membres du projet MoveagriCodes source du template formulaire annuaire id=1 : fiche1.zip (1.8kB) Le formulaire contient une section pour afficher les fiches produite par cet utilisateur.
Syalinnov
Lien vers le wiki : Page AnnuaireCodes source du template formulaire annuaire id=1 :fiche1_syalinnov.zip (2.0kB)
Exemple pour une fiche ressources
Adrets - Communs service
Lien vers le wiki : Page ressourcesCodes source du template formulaire ressource id=1 : fiche1_adrets.zip (1.8kB)
Exemple pour une fiche avec des onglets et des fiches liés
Lien vers le wiki : rendu de fiche avec ongletsfiche1.zip (2.4kB)
Forum national ESS
Forum national ESS
Lien vers le wiki
https://www.forum-ess.fr
Travail réalisé
Pour son 10ème anniversaire, le Forum national de l’ESS & de l'Innovation sociale fait vivre les valeurs défendues par l’économie sociale et solidaire (ESS). C’est donc ses acteurs qui ont élaboré le programme du Forum 2024 avec comme fil conducteur : prendre soin du territoire, des personnes et du vivant.
Année de réalisation
- 2023
Type de réalisation
- Thème graphique
- Template de fiche twig
Fichier : templates.zip
Télécharger
Commanditaire
CRESS Nouvelle-Aquitaine
Framasoft
Framasoft
Site web
https://framasoft.org/fr/
Type de ressource
- Partenaire ressource
Description
Framasoft, c’est une association d’éducation populaire, un groupe d’ami·es convaincu·es qu’un monde numérique émancipateur est possible, persuadé·es qu’il adviendra grâce à des actions concrètes sur le terrain et en ligne avec vous et pour vous !
Infopublic 71
Infopublic 71
Lien vers le wiki
https://infopublic71.fr/
Travail réalisé
Mise en forme de la page d'accueil à partir d'élements graphiques fournis sur une plaquette "Van 71"
Année de réalisation
- 2022
Type de réalisation
- Légère adaptation graphique
Commanditaire
Département de Saône-et-Loire
Inspecter le code
Index
Inspecter le code
Les navigateurs proposent d'inspecter le code de n'importe quel site et de modifier en direct le rendu. Dans Firefox, vous pouvez accéder aux Outil de développement web en appuyant sur F12 ou sur Ctrl + Maj + ICet outil permet d'explorer le code HTML ainsi que le style appliqué à chaque objet de la page. Il est possible de sélectionner directement un objet et d'y appliquer des variantes de style pour tester en direct votre modification.
Laboratoire Population Environnement Développement
Laboratoire Population Environnement Développement
Lien vers le wiki
https://lped.fr/
Travail réalisé
Refonte du site public du laboratoire
L'équipe utilise beaucoup yeswiki pour leur organisation interne et pour les projets de terrain. Ils apprécient la possibilité d'associer facilement les membres du laboratoire à la rédaction de contenus (en particulier les fiches projets et les présentations de membres et de leur terrain de recherche).
Ce travail a été réalisé en partenariat avec :
- Laurent Marseault - coordination du projet, animation des temps de concertation sur l'architecture du site et des structures de données
- Camille Durfort - conception graphique
- Pratic-Coop s'est chargé de l'intégration graphique
L'équipe utilise beaucoup yeswiki pour leur organisation interne et pour les projets de terrain. Ils apprécient la possibilité d'associer facilement les membres du laboratoire à la rédaction de contenus (en particulier les fiches projets et les présentations de membres et de leur terrain de recherche).
Ce travail a été réalisé en partenariat avec :
- Laurent Marseault - coordination du projet, animation des temps de concertation sur l'architecture du site et des structures de données
- Camille Durfort - conception graphique
- Pratic-Coop s'est chargé de l'intégration graphique
Année de réalisation
- 2023
Type de réalisation
- Template bazar
- Template de fiche twig
Commanditaire
LPED
Les documentations de référence
Index
Les documentations de référence
Documentation twig : https://twig.symfony.com/doc/2.x/templates.htmlDocumentation html : https://www.w3schools.com/html/default.asp
Documentation css : https://www.w3schools.com/css/default.asp
Mednum42
Mednum42
Lien vers le wiki
https://zoomacom.net/wiki/?Accueil
Travail réalisé
Le portail Mednum42 est un wiki qui permet aux acteurs de la médiation numérique de partager des ressources, des outils, des fiches pédagogiques, ... en bref toutes les connaissances qu'accumulent les acteurs de terrain en préparant leurs projet de médiation numériques.
Créé en 2020 par l'association Zoomacom qui assure sa coordination, le wiki comporte 1500 pages de ressources ! La stratégie de Zoomacom est de créer des espaces thématiques qui permettent à des groupes projets de s'exprimer plus facilement qu'en se jetant dans le grand bain d'un réseau départemental. Tel un patchwork ce wiki portait les traces des acteurs qui y ont contribué.
L'enjeu de cette refonte est d'affirmer l'identité graphique du réseau départemental, tout en respectant l'identité des espaces thématiques qui le compose.
Créé en 2020 par l'association Zoomacom qui assure sa coordination, le wiki comporte 1500 pages de ressources ! La stratégie de Zoomacom est de créer des espaces thématiques qui permettent à des groupes projets de s'exprimer plus facilement qu'en se jetant dans le grand bain d'un réseau départemental. Tel un patchwork ce wiki portait les traces des acteurs qui y ont contribué.
L'enjeu de cette refonte est d'affirmer l'identité graphique du réseau départemental, tout en respectant l'identité des espaces thématiques qui le compose.
Année de réalisation
- 2023
Type de réalisation
- Légère adaptation graphique
Commanditaire
Dpt Loire
MoveAgri
MoveAgri
Lien vers le wiki
https://moveagri.educagri.fr
Travail réalisé
Ce wiki permet aux étudiants de l'enseignement agricole qui sont en mobilité (stage à l'étranger) de partager leur expérience en ligne sur un blog.
Un concours est organisé par l'institut agro pour récompenser les meilleurs blogs et les meilleures photographies. Le wiki sert également de lien entre les élèves et les enseignants pendant leur stage. Il bénéficie de la fonctionnalité "Commentaires" qui a été développée en 2022 sur Yeswiki.
Au niveau du design, les maquettes ont été réalisées par Camille Durfort - Graphiste Freelance - https://camomillecom.fr
J'ai réalisé la personnalisation graphique du wiki ainsi que les templates custom :
Un concours est organisé par l'institut agro pour récompenser les meilleurs blogs et les meilleures photographies. Le wiki sert également de lien entre les élèves et les enseignants pendant leur stage. Il bénéficie de la fonctionnalité "Commentaires" qui a été développée en 2022 sur Yeswiki.
Au niveau du design, les maquettes ont été réalisées par Camille Durfort - Graphiste Freelance - https://camomillecom.fr
J'ai réalisé la personnalisation graphique du wiki ainsi que les templates custom :
- la page blog bénéficie d'un template personnalisé permet d'afficher le drapeau du pays dans lequel le jeune voyage (le drapeau est issu d'une fiche liée)
- les fiches blog (fiche-5) ont été mises en formes - avec un rappel des autres productions du même auteur en fin de fiche
Année de réalisation
- 2021
- 2022
Type de réalisation
- Légère adaptation graphique
- Template bazar
- Template de fiche twig
Fichier : custom_moveagri.zip
Télécharger
Commanditaire
Institut Agro
Nuit européenne des chercheurs
Nuit européenne des chercheurs
Lien vers le wiki
https://nuitdeschercheurs-france.eu/?2022
Travail réalisé
Intégration graphique en réutilisant les très belles illustrations réalisées par Baptiste Prat - Graphiste & illustrateur indépendant, auteur de l'affiche
Mise en forme du programme par ville
> fichier source fiche-32.twig
Mise en forme du programme par ville
> fichier source fiche-32.twig
Année de réalisation
- 2022
Type de réalisation
- Template de fiche twig
Fichier : custom_template_bazar.zip
Télécharger
Commanditaire
Kimiyo
Onglet saisie et fiche
Onglet saisie et fiche
Zone de texte
1er test : les 3 onglets sont activés en saisie et en affichage de la fiche
Zone de texte
dans la déclaration des onglets on a bien onglet1,onglet2,onglet3 dans saisie et dans fiche
Zone de texte
au niveau de chaque tab vérification des options
option déplacer le bouton valider = non
- afficher en saisie = oui
- afficher dans la fiche = oui
option déplacer le bouton valider = non
Partage ton outil
Partage ton outil
Lien vers le wiki
https://partagetonoutil.fr
Travail réalisé
L'ACEGAA est un point d'appui des Associations Gardoises, elle accompagne les acteurs associatifs dans leurs actes quotidiens : création, statuts, ressources humaines, organisation comptable et administrative, fiscalité, liens avec les partenaires publics et privés, recherche de financements...
L'usage du numérique s'est développé dans les associations et certaines ont su développer de nouvelles pratiques sur des outils en ligne pour faciliter le quotidien de leur structure.
La plateforme partage ton outil est née de la volontée de transmettre des astuces pour faciliter le fonctionnement des associations. L'aventure commence en 2022 avec un appel à manifestation d'intérêt de l'ANCT.
Difficile de réunir tout le monde sur des points réguliers, la première fonction du wiki partagetonoutil a été de centraliser les informations et documents utiles au projet sur un espace en ligne, accessible à tous.
C'est plus simple d'avoir un point central pour consulter les comptes rendus, les avancées et les questions en suspens.
Les pages de suivi du projet sont restées ouvertes pendant la période de construction, maintenant que la plateforme est opérationnelle, les pages liées aux étapes de co-construction sont réservées à l'équipe projet (accès par mot de passe)
Autant de questions dont les réponses ont été capitalisées dans la rubrique "Ressources" du wiki.
Elles sont regroupées sur une page qui permet d'afficher les miniatures des vidéos et de lancer la lecture.
Le template liste_video.twig a été réalisé spécifiquement, il est disponible et réutilisable en téléchargeant le dossier code source.
Le logo et l'image de bandeau ont été réalisés par Camille Durfort, CamomilleCom
L'intégration graphique a été réalisée par Pratic-Coop.
L'usage du numérique s'est développé dans les associations et certaines ont su développer de nouvelles pratiques sur des outils en ligne pour faciliter le quotidien de leur structure.
La plateforme partage ton outil est née de la volontée de transmettre des astuces pour faciliter le fonctionnement des associations. L'aventure commence en 2022 avec un appel à manifestation d'intérêt de l'ANCT.
1ere étape : co-construire le projet
L'ACEGAA a réuni un dizaine structures du territoire pour réfléchir au projet. Le cadre a été posé avec un calendrier, des points d'étapes tous les 2 mois, une feuille de route.Difficile de réunir tout le monde sur des points réguliers, la première fonction du wiki partagetonoutil a été de centraliser les informations et documents utiles au projet sur un espace en ligne, accessible à tous.
C'est plus simple d'avoir un point central pour consulter les comptes rendus, les avancées et les questions en suspens.
Les pages de suivi du projet sont restées ouvertes pendant la période de construction, maintenant que la plateforme est opérationnelle, les pages liées aux étapes de co-construction sont réservées à l'équipe projet (accès par mot de passe)
Réaliser des vidéos comme des pros
Produire une vidéo est loin d'être trivial, c'est pourquoi l'ACEGAA a fait appel à un professionnel, Alain Imbaud pour guider les associations dans la réalisation de leur première vidéo : quelle question aborder dans la vidéo ? quels outils pour enregistrer, quel logiciel pour faire le montage ? comment poster une vidéo sur une chaine ? quels sont les précautions à prendre à propos des droits d'auteur, droits à l'image ?Autant de questions dont les réponses ont été capitalisées dans la rubrique "Ressources" du wiki.
Faciliter l'accès aux vidéos
Les vidéos sont répertoriées en fonction de critères pratiques comme usage, coût, licence, langue...Elles sont regroupées sur une page qui permet d'afficher les miniatures des vidéos et de lancer la lecture.
Le template liste_video.twig a été réalisé spécifiquement, il est disponible et réutilisable en téléchargeant le dossier code source.
Mettre en forme la plateforme
Pour permettre la diffusion de la plateforme à un large public, un soin a été apporté à la présentation de la page d'accueil et à l'ergonomie du wiki en général.Le logo et l'image de bandeau ont été réalisés par Camille Durfort, CamomilleCom
L'intégration graphique a été réalisée par Pratic-Coop.
Année de réalisation
- 2023
Type de réalisation
- Légère adaptation graphique
- Template bazar
Fichier : custom_partagetonoutil.zip
Télécharger
Commanditaire
ACEGAA
Personnaliser les templates bazar
Personnaliser les templates bazar
Ce parcours permet d'aborder les questions de personnalisation graphique pour l'affichage des données issues de votre base de données bazar
Pré-requis : l'outillage
Avant de commencer la personnalisation de votre wiki, vérifiez que vous disposez des bons outils : accès ftp, éditeur de code, extension json...
Ce module est accessible.
Activités
: 7
Temps estimé
: -
Template de fiche
Il est possible de construire de toute pièce le rendu d'une fiche bazar via un template de fiche. Vous aurez la possibilité de choisir les informations que vous souhaitez afficher ainsi que leur mise en forme.
Ce module est accessible.
Activités
: 4
Temps estimé
: -
Template de liste
Les templates de listes sont les fichiers qui permettent de formater le rendu lors de l'affichage de vos données bazar via la fonction bazarliste.
Leur mise en forme a vocation à faciliter la recherche pour les utilisateurs de votre wiki.
Ce module est accessible.
Leur mise en forme a vocation à faciliter la recherche pour les utilisateurs de votre wiki.
Activités
: 2
Temps estimé
: -
Pré-requis : l'outillage
Prévention des discriminations
Prévention des discriminations
Lien vers le wiki
https://prevenir.educagri.fr
Travail réalisé
Intégration graphique selon les maquettes fournies par Terre Nourricière - Agence de Communication pour l'environnement, la solidarité et le développement - www.terrenourriciere.org
Mise en forme de la fiche info fiche-5.twig
Mise en forme de la fiche info fiche-5.twig
Année de réalisation
- 2022
Type de réalisation
- Légère adaptation graphique
Fichier : custom_prevenir_educagri.zip
Télécharger
Commanditaire
Institut Agro
Prototyper
Index
Prototyper
Figma est un outil en ligne qui permet de réaliser des maquettes de vos futures réalisations.Vous avez la possibiliter de partager ces maquettes à votre équipe qui pourra anoter des remarques, ou même proposer des améliorations.
Pour chaque objet on peut extraire le code css facilement, ce qui facilitera le travaiul d'intégration.
Syalinnov
Syalinnov
Lien vers le wiki
https://syalinnov.org
Travail réalisé
Ce wiki a vocation à réunir une communauté autour de l'évaluation de projets alimentaires territoriaux.
Syalinnov est une démarche pour évaluer l'impact de vos actions sur la durabilité du système alimentaire basée sur 14 indicateurs.
Ce wiki a bénéficié de beaucoup d'éléments de personnalisation.
Le prototypage a été réalisé par Camomille Création Graphique.
Templates personnalisés :
- fiche indicateur
- fiche projet
- fiche membre
- Graphique en vecteur pour la phase d'évaluation
- Graphique en toile d'araignée
Syalinnov est une démarche pour évaluer l'impact de vos actions sur la durabilité du système alimentaire basée sur 14 indicateurs.
Ce wiki a bénéficié de beaucoup d'éléments de personnalisation.
Le prototypage a été réalisé par Camomille Création Graphique.
Templates personnalisés :
- fiche indicateur
- fiche projet
- fiche membre
- Graphique en vecteur pour la phase d'évaluation
- Graphique en toile d'araignée
Année de réalisation
- 2021
Type de réalisation
- Thème graphique
- Template bazar
- Template de fiche twig
Fichier : custom_syalinnov.zip
Télécharger
Commanditaire
Institut agro Montpellier
Syntaxes twig pour afficher du contenu yeswiki
Index
Syntaxes twig pour afficher du contenu yeswiki
Afficher la valeur brute d'un champ
{{fiche.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 veillez à conserver la classe "BAZ_fiche_titre" pour le titre de votre fiche - il est notamment utile dans l'affichage accordéon (évite d'avoir un doublon)
Afficher une partie d'un texte long
{{fiche.bf_description1[:250]}}
Voir documentation twig slice
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...
Fonction displayFieldIfNotEmpty
En copiant le modèle /www/docs/examples/templates/ dans votre dossier custom, vous bénéficiez de fonctions génériques permettant de faciliter le rendu : les helper.entryHelper.displayHtml retourne la/les valeurs d'un champ liste
{{ entryHelper.displayHtml(html.listenom_champ,'optionnal label','optionnal class css') }}
entryHelper.displayHtmlIfNotEmpty retourne le champ formaté précédé par son libellé en gras après avoir vérifié son existence
{{ entryHelper.displayHtmlIfNotEmpty('Libellé','FieldName',html) }}
Formater un champ checkbox ou un champ tag
Ces champs 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 %}
Afficher une image
Le code ci-dessous permet de redimensionner une image avant de l'afficher.{% 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 %}
Utiliser une syntaxe Yeswiki dans le template twig
{{ format('{{include page="' ~ fiche.id_fiche ~ '"}}') }}
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 }}
Afficher pour les admins seulement
{# --- 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"> {{ entryHelper.displayHtml(html.listeListeProjects,'Project','') }} {{ entryHelper.displayHtml(html.checkboxListeParamsbf_display_params,'Display','') }} </div> </div> {% endif %}
Template de fiche
Template de liste
Texte plus long que son contenant
Index
Texte plus long que son contenant
La propriété css text-overflow : ellipsis permet de remplacer le texte qui dépasse par ...https://www.weblogin.fr/blog/116-css-text-overflow-ellipsis-sur-plusieurs-lignes
Tiers Lieux
Tiers Lieux
Lien vers le wiki
https://tiers-lieux.fr
Travail réalisé
L'association nationale des tiers lieux a choisi de réaliser son site web avec Yeswiki. Ce choix est motivé par la nécessité d'offrir un espace en ligne de production de communs aux nombreux groupes de travail impliqués dans la dynamique tiers lieux.
Le wiki est une porte d'entrée à la dynamique collaborative de l'association, les porteurs de projet ont naturellement souhaité que la charte graphique de l'association puisse être intégrée et ainsi garantir la cohérence de tous leurs supports de communication.
Image by rawpixel.com on Freepik
Le wiki est une porte d'entrée à la dynamique collaborative de l'association, les porteurs de projet ont naturellement souhaité que la charte graphique de l'association puisse être intégrée et ainsi garantir la cohérence de tous leurs supports de communication.
Image by rawpixel.com on Freepik
Année de réalisation
- 2023
Type de réalisation
- Légère adaptation graphique
Commanditaire
Association nationale des tiers lieux
Tourisme Sciences
Tourisme Sciences
Lien vers le wiki
https://tourisme.science/
Travail réalisé
L'objectif de ce wiki est de recencer les activités grand public proposées par les structures oeuvrant dans le champ de la culture scientifique en Région Occitanie.
Le catalogue a vocation à être utilisable par les structures de toursime, et à permettre l'exportation d'une sélection de fiche au format PDF.
Kimiyo m'a fourni une maquette réalisée par une graphiste afin d'intégrer la mise en forme personnalisée des fiches activités.
Le catalogue a vocation à être utilisable par les structures de toursime, et à permettre l'exportation d'une sélection de fiche au format PDF.
Kimiyo m'a fourni une maquette réalisée par une graphiste afin d'intégrer la mise en forme personnalisée des fiches activités.
Année de réalisation
- 2022
Type de réalisation
- Thème graphique
- Template bazar
Fichier : custom_tourisme_sciences.zip
Télécharger
Commanditaire
Kimiyo
Yeswiki : le site officiel
Yeswiki : le site officiel
Site web
https://yeswiki.net
Type de ressource
- Site web ressource
Description
Tout ce qu'il y a à savoir sur Yeswiki