Avant de faire un template de liste

Avant de se lancer

La structure de votre formulaire est-elle stable ?

Quelques astuces pour insérer des éléments de mise en forme

Custom HTML

<div class="well">

</div>

PageCSS

.id5 {background-color:yellow;}

.BAZ_fiche_titre {
		color:var(secondary-color-2);
		border-bottom:2px solid var(--primary-color);
	
}

.id4 .field-textelong {
  column-count: 2;
}

.id4 [data-id="checkboxListeDepartementbf_checkbox_group"]{display:none;}

Choisir des illustrations

A propos de l'utilisation des images

Quelques sites pour trouver des belles illustrations libres de droit

des dessins au trait modernes et joyeux

des photos

Elements graphiques, photos, illustrations

Format des images

• leur taille (largeur et hauteur) exprimée en nb de pixel
• leur qualité en dpi ou en %

La taille

• Full HD (1920 x 1080 pixels) est la dimension d'un écran PC, dans tous les cas il n'est jamais utile d'avoir une image plus large que ca !
• la largeur de la partie centrale de la page d'un wiki c'est 1100px, donc une demi-colonne 550px

La qualité

Autres traitements pour réduire le poids

Cibler les attentes des utilisateurs

A quels besoins répond le site ?

Quelques exemples d'utilisateurs d'une plateforme collaborative

Prenez le temps de dresser le portrait de vos utilisateurs

Extension Json dans le navigateur

Afficher les données brutes

https://pratic-coop.fr/?EcoclouD/raw

Json Lite : Extension firefox pour rendre plus lisible

Créer un template de fiche

Dans quel dossier du serveur faut-il placer les fichiers ?

Exemple de code source

/docs/examples/templates/bazar

Créer un template de liste

Dans quel dossier du serveur faut-il placer les fichiers ?

Structure du code

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

Editeur de code

Exemples

• 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

Exemple pour une fiche annuaire

Moveagri

Syalinnov

Exemple pour une fiche ressources

Adrets - Communs service

Exemple pour une fiche avec des onglets et des fiches liés

Exemple de graphe en toile d'araignée

Inspecter le code

Les documentations de référence

Modifier la couleur du menu

Définition des variables de couleur

:root{--primary-color:pink;}

/* un commentaire est placé entre ces caractères */

• enlever les caractères / et / sur la ligne souhaitée
• mais également sur la 1ere ligne :root{ et sur la dernière ligne }

Les variables liées à la barre de menu

/* couleur de la barre de menu */
 --navbar-bg-color: var(--neutral-light-color); 

 --navbar-text-color: var(--primary-color); 

 --navbar-link-color: var(--primary-color); 

 --navbar-link-bg-color: transparent; 

 --navbar-link-hover-color: var(--secondary-color);

 --navbar-link-bg-hover-color: transparent; 

 --navbar-border: none; 

 --navbar-border-radius: 0; 

 --navbar-shadow: none;

Le logo

#yw-topnav .navbar-brand img {  max-height: 2.9rem;}  /* soit environ 40px de haut */

@media mobile and (max-width: 480px) {
	#yw-topnav .navbar-brand img {
	max-height: 3.9rem;
	width: auto;
	margin-left: .9rem;
	margin-top: 1rem;
	}
}

Personnaliser le favicon

Prendre en main l'éditeur de page

Les principaux éléments de mise en forme du texte

Titres

Gras, souligné, italique

Ajouter une image

Mise en forme avancée : colonnes, bloc de couleur, ...

Prototyper

Rédiger les textes de présentation

Comment une page web est-elle parcourue ?

Quelques points de repères pour vous aider à préparer vos contenus

Titre

Introduction

• une phrase d'accroche
• définir le sujet et son contexte
• la problématique (donne un angle et s'articule autour du besoin)
• annonce le plan

Texte d'habillage

Conclusion

• complète l'introduction
• donne des éléments de réponse
• incite à aller plus loin
• suggère une action
• laisser une ouverture

Quelques conseils

5W2H Who What When How

• Telle personne a commis telle action
• Telle personnalité a formulé telle déclaration
• Tel évènement a engendré telle conséquence

Règle d’écriture : pyramide inversée

Penser au confort de lecture

Référencement naturel

Choisir les bons mots clés

Une bonne astuce pour explorer les mots clés

Explorer les mots clés de vos concurrents

Utilisez vos mots clé

Performance du site

Liens internes et liens externes

Style des titres

Personnaliser la couleur des titres

:root { 
 --title-h1-color:var(--neutral-color); 
 --title-h2-color:#ea663c;
 --title-h3-color:Fuchsia; 
 --title-h4-color:var(--secondary-color-2); 
 }

• Si vous souhaites aller plus loin, vous pouvez aussi définir vos propres style avec toutes les propriétés css que vous voulez :

• /* pour les titres de niveau 1 */
   h1 {
  	color:red;
  	border:2px solid blue; }
   /* pour les titres de niveau 2 */
   h2 {
    ....
    }
  

• Titre avec un effet surligné

L'astuce pour avoir une couleur de fond légèrement décalée comme sur cet exemple, c'est de définir un dégradé transparent sur 60% de la hauteur du titre, puis de la couleur de votre choix sur 40%
L'utilisation d'un dégradé est possible en utilisant la propriété CSS background-image.

h3 {

• font-size: 1.2rem;
• color: var(--neutral-color);
• background-image: linear-gradient(transparent 60%, rgb(253, 193, 0) 40%);
• width: fit-content;

}

Titre avec un petit trait dessous

Le trait est sous le titre est défini grâce au pseudo élément after
Celui ci permet de rajouter un contenu après une balise HTML, ici après les titres de niveau 2

• h2::after {
  • content: '';
  • width: 60px;
  • border-bottom: 3px solid var(--primary-color);
  • display: block;

}

Syntaxes twig pour afficher du contenu yeswiki

Afficher la valeur brute d'un champ

{{fiche.identifiant}}

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

Afficher une partie d'un texte long

{{fiche.bf_description1[:250]}}

Afficher le champ pré-formaté

{{html.identifiant}}

Fonction displayFieldIfNotEmpty

{{ entryHelper.displayHtml(html.listenom_champ,'optionnal label','optionnal class css') }}

{{ entryHelper.displayHtmlIfNotEmpty('Libellé','FieldName',html) }}

Formater un champ checkbox ou un champ tag

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

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

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