Tweet
Tutorial Template SobiPro : Modification Template par défaut – VCard.
Utilisateur de SobiPro j’ai cherché lentement des Templates gratuit pour afficher mes entrées, mais en vain. Alors j’ai décidé de me coller à modifier celle par défaut pour mes besoins et de partager mon expérience avec vous.
Pour commencer il faut crée une copie de la Template par défaut qu’on va modifier :
Menu SobiPro/Gestionnaire d’application/Gestion des template/default/Info sur le Template
Puis on clique sur l’icône Copier en haut à droite.
On va maintenant procéder au modification de VCard, pour cela on ouvre le fichier vcard.xsl qui se trouve dans ../default/common/vcard.xsl
On étudiant un peu ce fichier on s’aperçoit que le Template prend les champs publiés et les affichent un après l’autre dans les DIV prédéfinies dans css .
On part de principe que vous avez créé les champs suivant dans votre SobiPro :
Titre / Logo / Région / Département / Ville / Code Postal / Téléphone
Et on souhaite les afficher de la façon suivante :
Maintenant on repère les alias des champs dans : Configuration de section/ Gestionnaire de champs :
Titre= field_name
Logo= field_logo
Région = field_region
Département = field_departement
Ville = field_ville
Code Postal = field_code_postal
Téléphone = field_telephone
Un peu du code youpiiiiiii : (pour commencer on utilise le style css par défaut, vous pouvez bien sur le modifier ou créer votre propre style)
Les Template VCard commence toujours par la déclaration du code xml :xlst
alors notre code ce situe entre:
Affichage du Titre cliquable :
Affichage de bouton d’édition si utilisateur est connecté:
Affichage du Logo à droite de notre cadre:
Si on veut un logo cliquable on doit d’abord définir une variable « url » juste après
<xsl:template name="vcard">
Affichage de champs Région avec son Label (Région : votre Région)
Affichage de champ Département avec son Label (Département: votre Département)
Affichage de Ville avec Label + Code Postal sans Label (Ville : Lille - 59000)
Affichage de numéro de Téléphone avec le Label (Téléphone : 010203040506)
Et voilà notre Template VCard est fini il suffit juste de placer le code entre les balises précisé au début,
cela donne :
Un peu d’explication maintenant sur les fonctions utilisées :
Affiche un texte :
<xsl:text> Le Texte de votre choix</xsl:text>
Affiche le Label de champ
<xsl:value-of select="fields/ALIAS_DE_VOTRE_CHAMP/label" />
Affiche la valeur de votre champ
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />
Affiche une image
<xsl:copy-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />
Pour aller plus loins:
Affichage d’une URL
Affichage avec condition :
Pour un nœud de texte généré de sorti sans aucun échappement ajouter :
disable-output-escaping="yes"
Par exemple :
A vous maintenant de modifier ce code selon vos besoins.
Pour un effet visuelle plus rendu il faut créer votre propre css.
Pour une demande de création de template SobiPro contactez moi par MP.
Je prépare un Tuto pour la modification de "Vu Detail" et "css"
Pour commencer il faut crée une copie de la Template par défaut qu’on va modifier :
Menu SobiPro/Gestionnaire d’application/Gestion des template/default/Info sur le Template
Puis on clique sur l’icône Copier en haut à droite.
On va maintenant procéder au modification de VCard, pour cela on ouvre le fichier vcard.xsl qui se trouve dans ../default/common/vcard.xsl
On étudiant un peu ce fichier on s’aperçoit que le Template prend les champs publiés et les affichent un après l’autre dans les DIV prédéfinies dans css .
On part de principe que vous avez créé les champs suivant dans votre SobiPro :
Titre / Logo / Région / Département / Ville / Code Postal / Téléphone
Et on souhaite les afficher de la façon suivante :
Maintenant on repère les alias des champs dans : Configuration de section/ Gestionnaire de champs :
Titre= field_name
Logo= field_logo
Région = field_region
Département = field_departement
Ville = field_ville
Code Postal = field_code_postal
Téléphone = field_telephone
Un peu du code youpiiiiiii : (pour commencer on utilise le style css par défaut, vous pouvez bien sur le modifier ou créer votre propre style)
Les Template VCard commence toujours par la déclaration du code xml :xlst
alors notre code ce situe entre:
Code:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl"> <xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" encoding="UTF-8"/> <xsl:template name="vcard"> <!—Notre futur code ici --> <div style="clear:both;"/> </xsl:template> </xsl:stylesheet>
Code:
….
<!-- Titre -->
<span class="spEntriesListTitle"><!—On utilise le css du titre par défaut -->
<a>
<xsl:attribute name="href">
<xsl:value-of select="url" />
</xsl:attribute>
<xsl:value-of select="name" />
</a>
</span>
<!-- fin Titre -->
….
Code:
…
<xsl:if test="edit_url">
<span class="spEntriesListEditLink">
<a>
<xsl:attribute name="href">
<xsl:value-of select="edit_url" />
</xsl:attribute>
<xsl:value-of select="php:function( 'SobiPro::Txt', 'Edit Entry' )" />
</a>
</span>
</xsl:if>
...
Si on veut un logo cliquable on doit d’abord définir une variable « url » juste après
<xsl:template name="vcard">
Code:
<xsl:variable name="url">
<xsl:value-of select="url" />
</xsl:variable>
Code:
…
<!-- Image Logo -->
<div style="float:right;"><!-- aligne notre image sur la droite -->
<a href="{$url}">
<xsl:copy-of select="fields/field_logo/data/*" />
</a>
</div>
<!-- fin Image Logo-->
…
Code:
…
<!-- Region -->
<div class="spField"><!—On utilise le css du titre par défaut -->
<!—On affiche le Label suivie de : -->
<strong><xsl:value-of select="fields/field_region/label" />:<xsl:text> </xsl:text></strong>
<!—On va chercher la valeur de notre champ -->
<xsl:value-of select="fields/field_region/data" />
</div>
<!-- fin Region-->
…
Code:
…
<!-- Département-->
<div class="spField"><!—On utilise le css du titre par défaut -->
<!—On affiche le Label suivie de : -->
<strong><xsl:value-of select="fields/field_departement/label" />:<xsl:text> </xsl:text></strong>
<!—On va chercher la valeur de notre champ -->
<xsl:value-of select="fields/field_departement/data" />
</div>
<!-- fin Département-->
…
Affichage de Ville avec Label + Code Postal sans Label (Ville : Lille - 59000)
Code:
…
<!-- Ville + Code Postal-->
<div class="spField"><!—On utilise le css du titre par défaut -->
<!—On affiche le Label Ville suivie de : -->
<strong><xsl:value-of select="fields/field_ville/label" />:<xsl:text> </xsl:text></strong>
<!—On va chercher la valeur de notre champ Ville -->
<xsl:value-of select="fields/field_ville/data" />
<!—On affiche » – « -->
<xsl:text> - </xsl:text>
<!—On va chercher la valeur de notre champ Code postal -->
<xsl:value-of select="fields/field_code_postal/data" />
</div>
<!-- fin Ville + Code Postal-->
...
Code:
...
<!-- Telephone-->
<div class="spField"><!—On utilise le css du titre par défaut -->
<!—On affiche le Label Téléphone suivi de : -->
<strong><xsl:value-of select="fields/field_telephone/label" />:<xsl:text> </xsl:text></strong>
<!—On va chercher la valeur de notre champ -->
<xsl:value-of select="fields/field_telephone/data" />
</div>
<!-- fin Telephone-->
...
cela donne :
Code:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl">
<xsl:output method="xml" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" encoding="UTF-8"/>
<xsl:template name="vcard">
<xsl:variable name="url">
<xsl:value-of select="url" />
</xsl:variable>
<!-- Titre -->
<span class="spEntriesListTitle">
<a>
<xsl:attribute name="href">
<xsl:value-of select="url" />
</xsl:attribute>
<xsl:value-of select="name" />
</a>
</span>
<!-- fin Titre -->
<xsl:if test="edit_url">
<span class="spEntriesListEditLink">
<a>
<xsl:attribute name="href">
<xsl:value-of select="edit_url" />
</xsl:attribute>
<xsl:value-of select="php:function( 'SobiPro::Txt', 'Edit Entry' )" />
</a>
</span>
</xsl:if>
<!-- Image Logo -->
<div style="float:right;">
<a href="{$url}">
<xsl:copy-of select="fields/field_logo/data/*" />
</a>
</div>
<!-- fin Image Logo-->
<!-- Region -->
<div class="spField">
<strong><xsl:value-of select="fields/field_region/label" />:<xsl:text> </xsl:text></strong>
<xsl:value-of select="fields/field_region/data" />
</div>
<!-- fin Region-->
<!-- Departement-->
<div class="spField">
<strong><xsl:value-of select="fields/field_departement/label" />:<xsl:text> </xsl:text></strong>
<xsl:value-of select="fields/field_departement/data" />
</div>
<!-- fin Departement-->
<!-- Ville + Code Postal-->
<div class="spField">
<strong><xsl:value-of select="fields/field_ville/label" />:<xsl:text> </xsl:text></strong>
<xsl:value-of select="fields/field_ville/data" /><xsl:text> - </xsl:text>
<xsl:value-of select="fields/field_code_postal/data" />
</div>
<!-- fin Ville + Code Postal-->
<!-- Telephone-->
<div class="spField">
<strong><xsl:value-of select="fields/field_telephone/label" />:<xsl:text> </xsl:text></strong>
<xsl:value-of select="fields/field_telephone/data" />
</div>
<!-- fin Telephone-->
<div style="clear:both;"/>
</xsl:template>
</xsl:stylesheet>
Un peu d’explication maintenant sur les fonctions utilisées :
Affiche un texte :
<xsl:text> Le Texte de votre choix</xsl:text>
Affiche le Label de champ
<xsl:value-of select="fields/ALIAS_DE_VOTRE_CHAMP/label" />
Affiche la valeur de votre champ
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />
Affiche une image
<xsl:copy-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" />
Pour aller plus loins:
Affichage d’une URL
Code:
<a>
<xsl:attribute name="href">
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data/a/@href" />
</xsl:attribute>
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP _URL/data" />
</a>
Code:
<xsl:if test="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data = 'VALEUR_CONDITION'">
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP_URL /data" />
</xsl:if>
disable-output-escaping="yes"
Par exemple :
Code:
<xsl:value-of select="fields/ ALIAS_DE_VOTRE_CHAMP /data" disable-output-escaping="yes"/>
Pour un effet visuelle plus rendu il faut créer votre propre css.
Pour une demande de création de template SobiPro contactez moi par MP.
Je prépare un Tuto pour la modification de "Vu Detail" et "css"
Commentaire