Définition de thématiques dans la charte graphique
From version 2.13
A partir de la version 2.13 il est possible de définir des thématiques de liens propres à la charte graphique.
Les thématiques sont définies dans le fichier skins/[NOM_SKIN]/conf/link-directory.xml dans la section <definitions> comme dans l'exemple ci-après:
Oops!
Copy to clipboard failed. Open the code and copy it manually.
<link-themes>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="true">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
<link-themes>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="true">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
<link-themes>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="true">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
InputData
Le plugin Annuaire de liens fournit un input data, permettant d'insérer les liens d'une ou plusieurs thématiques sur l'ensemble ou partie des pages du site.
Activation pour les versions 2.13 et supérieures
L'activation de l'inputdata s'effectue au niveau de la charte graphique, dans le fichier skins/[NOM_SKIN]/conf/link-directory.xml dans la section <inputdata> comme dans l'exemple ci-après:
Oops!
Copy to clipboard failed. Open the code and copy it manually.
<link-themes>
<!-- Configure the template's link directory inputdata here -->
<inputdata>
<themes templates="index" configurable="true" displayUserLinks="true">
<theme id="TOOLS" lang="en"/>
<theme id="OUTILS" lang="fr"/>
</themes>
<themes templates="page,section" configurable="false">
<theme id="FOOTER"/>
</themes>
</inputdata>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="false">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
<link-themes>
<!-- Configure the template's link directory inputdata here -->
<inputdata>
<themes templates="index" configurable="true" displayUserLinks="true">
<theme id="TOOLS" lang="en"/>
<theme id="OUTILS" lang="fr"/>
</themes>
<themes templates="page,section" configurable="false">
<theme id="FOOTER"/>
</themes>
</inputdata>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="false">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
<link-themes>
<!-- Configure the template's link directory inputdata here -->
<inputdata>
<themes templates="index" configurable="true" displayUserLinks="true">
<theme id="TOOLS" lang="en"/>
<theme id="OUTILS" lang="fr"/>
</themes>
<themes templates="page,section" configurable="false">
<theme id="FOOTER"/>
</themes>
</inputdata>
<!-- Define the themes for this skin -->
<definitions>
<theme id="FOOTER">
<label i18n="false">SKIN_FOOTER_LINK_LABEL</label>
<description i18n="true">SKIN_FOOTER_LINK_DESC</description>
</theme>
</definitions>
</link-themes>
L'attribut templates contient le ou les gabarits affectés par cet input data, séparés par des virgules (* signifie que tous les thèmes).
L'attribut configurable détermine si une personnalisation des liens par un utilisateur connecté est autorisée (true ou false)
L'attribut displayUserLinks détermine s'il est possible d'ajouter des liens personnalisés
L'attribut inputDataId détermine l'identifiant de l'InputData pour différencier les liens provenant de plusieurs InputData répondants à un seul gabarit. Par défaut, l'identifiant est la chaîne vide. Disponible uniquement à partir de la version 2.12.
Beacons <theme> permet de choisir les liens de quelle thématique seront affichés.
L'attribut id correspondant à l'identifiant du thème
L'attribut lang détermine la langue des liens qui seront sélectionnés pour le thème donné (optionnel)
L'exemple ci-dessus permet donc d'activer l'input data:
pour le gabarit "index", l'input data contiendra les liens ayant pour thématique "OUTILS" pour les liens FR et les liens ayant pour thématiques "TOOLS" pour les liens EN
pour les gabarits "page" et "section", l'input data contiendra les liens ayant pour thématique "FOOTER". Cette thématique est apportée par la charte graphique.
Versions below 2.13
Pour les versions inférieures à 2.13, pour activer cet input data et définir son contenu, vous devez créer dans votre charte graphique, un fichier XML skins/[NOM_SKIN]/conf/link-themes.xml, qui contient pour chaque gabarit, les thématiques de liens à afficher :
Oops!
Copy to clipboard failed. Open the code and copy it manually.
L'attribut templates contient le ou les gabarits affectés par cet input data, séparés par des virgules (* signifie que tous les thèmes).
L'attribut configurable détermine si une personnalisation des liens par un utilisateur connecté est autorisée (true ou false)
L'attribut displayUserLinks détermine s'il est possible d'ajouter des liens personnalisés
L'attribut inputDataId détermine l'identifiant de l'InputData pour différencier les liens provenant de plusieurs InputData répondants à un seul gabarit. Par défaut, l'identifiant est la chaîne vide. Disponible uniquement à partir de la version 2.12.
Beacons <theme> permet de choisir quels liens (de quelle thématique seront affichés).
L'attribut id correspondant à l'identifiant donné au thème dans le CMS
L'attribut lang détermine la langue des liens qui seront sélectionnés
Données XML fournies
The input data format is as follows:
Oops!
Copy to clipboard failed. Open the code and copy it manually.
Le plugin Annuaire de liens fournit des helpers XSLT qui peuvent être utilisés dans la charte graphique. Pour cela il vous suffit d'importer le fichier pages/services/directory/utils/inputdata_utils.xsl du plugin est d'appeler les templates à l'endroit souhaité:
Nom du template
Function
Parameters
display-configure-links-btn-inputdata
Insère un lien "Personnaliser" pour configurer l'ordre d'affichage des liens. Le lien est présent uniquement si les liens sont configurables. Fournit une boite de dialogue javascript dans laquelle l'utilisateur pourra sélectionner les liens qu'il souhaite voir en premier
maxCheckedLinks : Nombre maximun de liens sélectionnable par l'utilisateur
links-thumbnails-input-data
Affiche les liens de l'input data sous forme de vignettes
moreThreshold: Nombre maximum de liens visibles par défaut
height: largeur maximun des vignettes
width: largeur maximum des vignettes
Oops!
Copy to clipboard failed. Open the code and copy it manually.
Copy to clipboard failed. Open the code and copy it manually.
<xsl:template name="configure-links-btn">
<xsl:param name="buttonId"/>
<xsl:choose>
<xsl:when test="$rendering-context = 'front' and ametys:user()">
document.writeln("<a id=\"configure-links-hyperlink-<xsl:value-of select="$buttonId"/>-disabled\" class=\"configure-links-service-button\" title=\"<i18n:text i18n:key="SKIN_LINKDIRECTORY_CONFIGURE_THUMBNAILS_TITLE_BO" i18n:catalogue="skin.{$skin}"/>\" i18n:attr=\"title\">");
document.writeln("<img alt=\"<i18n:text i18n:key="PLUGINS_LINKDIRECTORY_CONFIGURE_THUMBNAILS" i18n:catalogue="plugin.link-directory"/>\" src=\"<xsl:value-of select="ametys:skinImageURL('img/config;png', 20, 20)\"/>");
document.writeln("</a>");
</xsl:when>
<xsl:otherwise>
<!-- NO FO user connected: the button is not displayed -->
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="configure-links-btn">
<xsl:param name="buttonId"/>
<xsl:choose>
<xsl:when test="$rendering-context = 'front' and ametys:user()">
document.writeln("<a id=\"configure-links-hyperlink-<xsl:value-of select="$buttonId"/>-disabled\" class=\"configure-links-service-button\" title=\"<i18n:text i18n:key="SKIN_LINKDIRECTORY_CONFIGURE_THUMBNAILS_TITLE_BO" i18n:catalogue="skin.{$skin}"/>\" i18n:attr=\"title\">");
document.writeln("<img alt=\"<i18n:text i18n:key="PLUGINS_LINKDIRECTORY_CONFIGURE_THUMBNAILS" i18n:catalogue="plugin.link-directory"/>\" src=\"<xsl:value-of select="ametys:skinImageURL('img/config;png', 20, 20)\"/>");
document.writeln("</a>");
</xsl:when>
<xsl:otherwise>
<!-- NO FO user connected: the button is not displayed -->
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="configure-links-btn">
<xsl:param name="buttonId"/>
<xsl:choose>
<xsl:when test="$rendering-context = 'front' and ametys:user()">
document.writeln("<a id=\"configure-links-hyperlink-<xsl:value-of select="$buttonId"/>-disabled\" class=\"configure-links-service-button\" title=\"<i18n:text i18n:key="SKIN_LINKDIRECTORY_CONFIGURE_THUMBNAILS_TITLE_BO" i18n:catalogue="skin.{$skin}"/>\" i18n:attr=\"title\">");
document.writeln("<img alt=\"<i18n:text i18n:key="PLUGINS_LINKDIRECTORY_CONFIGURE_THUMBNAILS" i18n:catalogue="plugin.link-directory"/>\" src=\"<xsl:value-of select="ametys:skinImageURL('img/config;png', 20, 20)\"/>");
document.writeln("</a>");
</xsl:when>
<xsl:otherwise>
<!-- NO FO user connected: the button is not displayed -->
</xsl:otherwise>
</xsl:choose>
</xsl:template>
Affichage des informations dynamiques sur les vignettes
Si vos liens/applications possèdent des informations dynamiques pouvant être affichées sous forme de pastille et tooltip, importez également dans votre charte graphique le fichier pages/services/directory/utils/thumbnail_utils.xsl
Puis faites appel au template XSL "link-dynamic-info-js" dans la section <head>. Par exemple :
Oops!
Copy to clipboard failed. Open the code and copy it manually.