Manuel d'intégration graphique v1.3.0, v1.4.0


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 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">    
      <themes>    
        <theme>directoryTheme://9afefe2e-9f17-4059-a9fc-21b68166879f</theme>    
      </themes>    
      <links>    
        <link id="directoryLink://3e1d509b-7e3d-4ec4-98d5-e70e268e78d5" url="http://www.ametys.org/forum/" 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>Outils</themes>    
        </link>    
        <link id="directoryLink://c9921cec-fa6e-46c9-a256-a7a800bcc1c3" url="https://www.google.com/contacts" 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>Outils</themes>    
        </link>    
        <link id="directoryLink://df2badfb-3e09-4a78-a74a-00b064d9ea38" url="https://fr-fr.facebook.com/AmetysCMS" title="Facebook" content="" alternative="Facebook" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="facebook.png" pictureSize="2809" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://1a48f614-ba61-4cd5-b53f-fd06b924e80c" url="https://twitter.com/ametyscms" title="Twitter" content="" alternative="Twitter" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="twitter_black.jpg" pictureSize="5140" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://edaa125f-80e3-425c-a2e7-f2aa5a013fe3" url="https://www.google.com/calendar" title="Agenda" content="" alternative="Agenda" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="agenda.png" pictureSize="4200" imageType="metadata" grantAnyUser="true" limitedAccess="true">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://d2c855a0-f815-4d6a-922f-c4b6d018acf4" url="http://www.google.fr" title="Google" content="" alternative="Google" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="google.png" pictureSize="7387" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://3d9d910f-3a2e-4fdd-8155-5452252a011c" url="https://wiki.ametys.org/display/AMETYSFR/Documentation+du+CMS+Ametys" title="Wiki" content="" alternative="Wiki Ametys" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="wiki.png" pictureSize="7008" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://54fe2ee1-f43f-42e5-8eda-aa4e5daaf1eb" url="https://fr.news.yahoo.com/" title="Yahoo" content="" alternative="Yahoo Actualités" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="yahoob.png" pictureSize="19406" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</themes>    
        </link>    
        <link id="directoryLink://0485c278-9dcf-4880-966d-c2249b3ba946" url="http://www.lemonde.fr/rss/" title="Fils RSS" content="" alternative="Fils RSS - LeMonde.fr" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="rssb.png" pictureSize="5933" imageType="metadata" grantAnyUser="false" limitedAccess="false">    
          <themes>Outils</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>    

 

 

Retour en haut

Link directory