Pratic-Coop

  • Réalisations
  • Formation
  • Contact

Rechercher
  • Se connecter

    Se connecter

    Mot de passe perdu ?

    S'inscrire
  • Aide, démo, actu
  • Documentation
  • Présentation YesWiki
  • Gestion du site
  • Tableau de bord
  • Base de données
Pratic-Coop

  • Formulaires
  • Rechercher
  • Saisir
  • Listes
  • Importer
  • Exporter

Accéder aux codes sources

Index
Accès à mes fiches

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 !
PDF Voir la fiche

Ajouter du css personnalisé

Index
Accès à mes fiches

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.

Attention Il est parfois nécessaire de vider le cache de votre navigateur pour que la modification de style soit visible : Ctrl + Maj + R
PDF Voir la fiche

Ajouter un effet au survol de l'image

Index
Accès à mes fiches

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

image undraw_teaching_f1cm.png (86.0kB)
Texte de la vignette apparait au survol de la souris
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

image undraw_teaching_f1cm.png (86.0kB)
Texte de la vignette apparait au survol de la souris
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

image undraw_teaching_f1cm.png (86.0kB)
Texte de la vignette apparait au survol de la souris

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;}
PDF Voir la fiche

Avant de faire un template de fiche

Index
Accès à mes fiches

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
image Capture_adrets_commun_service.png (0.4MB)
PDF Voir la fiche

Avant de se lancer

Index
Accès à mes fiches

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 un texte long en colonnes
.id4 .field-textelong {
  column-count: 2;
}
PDF Voir la fiche

Consulter les données brutes d'une fiche

Index
Accès à mes fiches

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 !
PDF Voir la fiche

Créer un template de fiche

Index
Accès à mes fiches

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.
PDF Voir la fiche

Créer un template de liste

Index
Accès à mes fiches

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.html
Ces 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.
PDF Voir la fiche

Editeur de code

Index
Accès à mes fiches

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
PDF Voir la fiche

Exemples

Index
Accès à mes fiches

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

image membre_moveagri.png (0.2MB)
Lien vers le wiki : Annuaire des membres du projet Moveagri
Codes 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

image membre_syalinnov.png (72.5kB)
Lien vers le wiki : Page Annuaire
Codes source du template formulaire annuaire id=1 :fiche1_syalinnov.zip (2.0kB)


Exemple pour une fiche ressources

Adrets - Communs service

image RESSOURCES_adrets.png (0.1MB)
Lien vers le wiki : Page ressources
Codes source du template formulaire ressource id=1 : fiche1_adrets.zip (1.8kB)
PDF Voir la fiche

Inspecter le code

Index
Accès à mes fiches

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 + I

Cet 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.
PDF Voir la fiche

Les documentations de référence

Index
Accès à mes fiches

Les documentations de référence

Documentation twig : https://twig.symfony.com/doc/2.x/templates.html

Documentation html : https://www.w3schools.com/html/default.asp

Documentation css : https://www.w3schools.com/css/default.asp
PDF Voir la fiche

Prototyper

Index
Accès à mes fiches

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.
PDF Voir la fiche

Syntaxes twig pour afficher du contenu yeswiki

Index
Accès à mes fiches

Syntaxes twig pour afficher du contenu yeswiki

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 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 %}
PDF Voir la fiche

Texte plus long que son contenant

Index
Accès à mes fiches

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
PDF Voir la fiche
CSV JSON Widget

image PRATICCOOPLOGO150.png (8.1kB)

Mélanie Michel


Toulon (Var)

06.22.53.75.58.
Licence Creative Commons
Les contenus de ce site sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International.
(>^_^)> Galope sous YesWiki <(^_^<)