Manuel de paramétrage et d'intégration


Définition de thématiques dans la charte graphique

A partir de la 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:

<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:

<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.
  • Les balises <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 inférieures à 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 :

<link-themes>     
    <themes templates="index,page" configurable="true" displayUserLinks="true">     
        <theme id="OUTILS" lang="fr"/>     
    </themes>     
    <themes templates="news" configurable="false">     
        <theme id="ACTU" lang="fr"/>     
        <theme id="OUTILS" lang="fr"/>     
    </themes> 
    <themes templates="favorite-news" configurable="true" inputDataId="favNews">
        <theme id="ACTU" lang="fr"/>
    </themes> 
</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.
  • Les balises <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

Le format de l'input data est le suivant:

<cms>    
  <inputData>    
    <linkDirectory applicable="true" configurable="true" id="xxx">    
      <themes>    
        <theme>OUTILS</theme>
        <theme>FOOTER</theme>   
      </themes>    
      <links>    
        <link id="directoryLink://3e1d509b-7e3d-4ec4-98d5-e70e268e78d5" url="http://www.ametys.org/forum/" urlType="URL" title="Forum" content="" alternative="Forum Ametys" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="chat.png" pictureSize="4497" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>
             <theme id="OUTILS" name="OUTILS">
             <label>Outils</label>
          </themes>    
        </link>    
        <link id="directoryLink://c9921cec-fa6e-46c9-a256-a7a800bcc1c3" url="https://www.google.com/contacts" urlType="URL" title="Annuaire" content="" alternative="Annuaire" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="user.png" pictureSize="1868" imageType="metadata" grantAnyUser="true" limitedAccess="true">    
          <themes>
             <theme id="OUTILS" name="OUTILS">
             <label>Outils</label>
          </themes>    
        </link>  
        <link id="directoryLink://2e62b33d-fe90-4447-b135-01b11d6e270e" url="https://fr-fr.facebook.com/AmetysCMS" urlType="URL" title="Facebook" content="" alternative="Annuaire" pictureAlternative="" user-selected="false" color="#9900CC" pictureType="external" picturePath="picture" pictureName="facebook.png" pictureSize="2809" imageType="link-data" limitedAccess="false" userLink="false" isHidden="false" status="NORMAL">    
          <themes>
             <theme id="FOOTER" name="FOOTER">
             <label>Pied de page</label>
          </themes>    
        </link>    
      </links>    
    </linkDirectory>    
  </inputData>    
</cms>    

Exemple d'utilisation dans la charte graphique

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 templateFonctionParamètres
display-configure-links-btn-inputdataInsè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-dataAffiche 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

 

<xsl:import href="plugin:link-directory://pages/services/directory/utils/inputdata_utils.xsl"/>    

<xsl:template name="template">    
    <-- // ... ->    
    <xsl:if test="/cms/inputData/linkDirectory/@applicable = 'true'">    
      <div class="block">    
        <div class="header">    
          <!-- Button pour configurer l'affichage des liens -->    
          <xsl:call-template name="display-configure-links-btn-inputdata">    
            <xsl:with-param name="maxCheckedLinks" select="7"/>    
          </xsl:call-template>    
          <i18n:text i18n:key="SKINS_LINKS_HEADER" i18n:catalogue="skin.{$skin}"/>    
        </div>    
            
        <div class="body">    
            
          <xsl:call-template name="links-thumbnails-inputdata">    
            <xsl:with-param name="moreThreshold" select="8"/>    
            <xsl:with-param name="height" select="50"/>    
            <xsl:with-param name="width" select="50"/>    
            <xsl:with-param name="themes" select="/cms/inputData/linkDirectory/themes"/>    
          </xsl:call-template>    
        </div>    
      </div>    
    </xsl:if>    
</xsl:template>    

Pour aller plus loin
Pour pouvez personnaliser entièrement l'affichage des liens en surchargeant les templates XSLT fournit par le plugin.
Regardez aux fichier XSL du répertoire https://svn.ametys.org/trunk/plugins/link-directory/tags/1.1.0/main/plugin-link-directory/pages/services/directory/utils/ et surchargez le ou les templates nécessaires.
Par exemple, si vous souhaitez remplacer le lien "Personnaliser" par une image, il vous faudra surcharger le template "configure-links-btn"

<xsl:template name="configure-links-btn">     
 <xsl:param name="buttonId"/>     

 <xsl:choose>     
     <xsl:when test="$rendering-context = 'front' and ametys:user()">     
         document.writeln("&lt;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\"&gt;");     
 document.writeln("&lt;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)\"/&gt;");     
 document.writeln("&lt;/a&gt;");     
 </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 :

<xsl:import href="plugin:link-directory://pages/services/directory/utils/thumbnails_utils.xsl"/>    

<xsl:template name="additionnal-script">    
       <xsl:call-template name="link-dynamic-info-js">    
            <xsl:with-param name="maxItems">5</xsl:with-param>    
            <xsl:with-param name="themes" select="/cms/inputData/linkDirectory/themes"/>    
       </xsl:call-template>    
</xsl:template>    

Couleurs

Depuis la version 2.6.0, les liens peuvent avoir une couleur.

Pour surcharger la liste des couleurs disponibles par défaut, créez un fichier à l'emplacement WEB-INF/param/linkdirectory-colors.xml contenant :

<?xml version="1.0" encoding="UTF-8"?>
<colors default="4">
    <color id="1">
        <main>#FF66FF</main>
        <text>#FFFFFF</text>
    </color>
    <color id="2">
        <main>#CC33CC</main>
        <text>#FFFFFF</text>
    </color>
...
</colors>
Retour en haut